[anime.js]アニメーションロゴ　スライドイン

anime.jsを使ってスルスル動くロゴを作る練習してみた。

１．前提

このページのコードでは、jqueryとanime.jsを使っています。

サンプル１．すぅいーん　すすすす

<div id="wansuke_anime1" class="anime-str-arrow-left" anime-str="WANSUKE" face="Monotype Corsiva">
<div class="icon-base wansuke-icon small-in-opacity"></div>
</div>

こんな感じのタグを書くと↓こうなるソースを書いてみた。

サンプル２．ぎゅん！　すすすす

<div id="wansuke_anime2" class="anime-str-arrow-left" anime-str="WANSUKE" face="fantasy">
<div class="icon-base wansuke-kirarin spin-in-opacity"></div>
</div>

こうすると、↓こうなる。

２．ソースコード

javascriptは、こんな感じ。

$(function (){
    $('div.anime-str-arrow-left').each(function () {
        let $logo = $(this);
        let fonts = $logo.attr('anime-str').split('');
        let face = $logo.attr('face');
        let lg_width = parseInt($logo.css('width'))-80 ;

        if (fonts.length) {
          let step_lng = lg_width / fonts.length
          for (let i=0 ; i < fonts.length ; i++) {
              let $font = $("<font />").attr('face', face).attr('stop-pos',step_lng*i-lg_width - 10).addClass('slide-left').text(fonts[i]);
              $logo.append($font);
          }
        }
    });
    var anime_sample1_2 = anime.timeline({duration: 300, direction: 'normal', easing: 'easeInOutQuart'});
    $('#wansuke_anime1 font.slide-left').each(function (){
       anime_sample1_2.add({ targets: this, translateX: $(this).attr('stop-pos') });
    });
    anime_sample1_2.pause;
    var anime_sample1 = anime({ targets: '.small-in-opacity', opacity: 0, duration: 1500, scale: 3, direction: 'reverse', loop: 1, easing: 'easeInOutQuart',
        complete: function (){
          anime_sample1_2.restart();
        }, });

    var anime_sample2_2 = anime.timeline({duration: 300, direction: 'normal', easing: 'easeInOutQuart'});
    $('#wansuke_anime2 font.slide-left').each(function (){
       anime_sample2_2.add({ targets: this, translateX: $(this).attr('stop-pos') });
    });
    anime_sample1_2.pause;
    var anime_sample2 = anime({ targets: '.spin-in-opacity', opacity: 0, duration: 1500, scale: 3, rotate: '2turn', direction: 'reverse', loop: 1, easing: 'spring',
        complete: function () { anime_sample2_2.restart(); } });

    $("#anime_sample1").on('click', function (){ anime_sample1.restart() });
    $("#anime_sample2").on('click', function (){ anime_sample2.restart() });
});

属性「anime-str」で設定された文字を、属性「face」で指定したフォントでスライドさせている。

CSSは適当にこんな感じ。

div.anime-str-arrow-left { 
 display: inline-block;
 position: relative;
 width: 220px;
 height: 55px;
 overflow: hidden;
}
div.icon-base {
 position: absolute;
 width: 50px;
 height: 50px;
 background-size: contain;
 background-repeat:
 no-repeat;
 background-position: center; 
} 
div.wansuke-icon {
 background-image: url(wp-content/uploads/2018/10/wanchan_.png);
} 
div.wansuke-kirarin {
 background-image: url(wp-content/uploads/2018/11/wan2.png); 
} 
div.anime-str-arrow-left font.slide-left {
 position: absolute;
 right: -20px 
}

とりあえず、動くレベルまで調整してみたけども、ソースぐちゃぐちゃになってしまったぁ・・・。