anime.jsを選択した理由の1つは以下のサンプルが素敵だったことにあります。しかしソースを確認すると、いろいろな要素が複雑に構成されており、解読する気になれませんでした…。なので1から独自に作っていこうと思います。
→参考：Letter Effects with anime.js
●1文字づつ分ける
今回は文字を個別に操作したいので、まずは1文字ずつspanタグで囲むことにしました。以下のサンプルでボタンをタップすると文字をspanで区切ります。区切ったことが分かるように1文字づつ色を変更しました。
function spanningFunc (_target){
var elms = document.querySelectorAll(_target);
elms.forEach(function (elm){
var myText = elm.textContent;
elm.innerHTML = null;
myText.split('').forEach(function (c) {
elm.innerHTML += ''+c+'';
});
});
}
1文字づつ区切るのでカーニングが外れてしまいますが、これは仕方ないですね（手動で調整もできますが、工数対効果は低そうです）。
●フェードアニメ
位置を移動させるアニメはcss的に面倒になると思うので、まずは位置の変わらないフェードアニメを作成しました。ボタンをタップすると下段のdivに文字列が表示されていきます。
var animObj_2 = anime({targets:'#at2 .anime',opacity:[0,1],easing:'linear',
autoplay:false,duration:300,
delay:function(elm,index, ln){
return index*50;
}
});
操作しているプロパティはopacityで初期値を設定する構文を利用しています。初期値が0なので最初は表示されませんが、アニメを開始すると値が1になるので表示されていくわけです。表示タイミングをずらすのはdelayでfunctionを設定して実現しています。
●移動アニメ
以下サンプルでボタンをタップすると、下段のdiv要素に文字が移動しながら表示されます。
移動に利用するプロパティは相対的に位置を設定できるtranslate系が良いでしょう（絶対値指定であればleftやtopも利用できます）。
spanはデフォルトでinline要素のためtranslateで位置を設定できません。なので、まずはアニメを設定する要素のdisplay属性をinline-blockに変更しました。
.anime{
display:inline-block;
}
これでtranslateを使って位置を変更できるようになったので、普通にanimeオブジェクトを作成できます。opacityと同じように初期値を設定する構文を使いました。最初は200に設定しているので、初期位置から200px下に配置されます。そして目的値が0なのでアニメで初期位置に戻ってくるわけです。
var animObj_2 = anime({targets:'#at2 .anime',
translateY:[200,0],
opacity:[0,1],
autoplay:false,duration:1000,
delay:function(elm,index, ln){
return index*50;
}
});
このサンプルは正常に機能しているように見えますが、半角スペースが無視されてしまっています。なので次項で修正したいと思います。
●span処理の改造
display属性をinline-blockに変更にしたら半角スペースが無視されるようになってしまいました。なのでspanで区切る処理で半角スペースを検知し、特殊文字（ ）で置きかえるようにしました。下記サンプルは半角スペースが問題なく表示されていると思います。
function spanningFunc (_target){
var elms = document.querySelectorAll(_target);
elms.forEach(function (elm){
var myText = elm.textContent;
elm.innerHTML = null;
myText.split('').forEach(function (c) {
if (c == ' '){
elm.innerHTML += ' ';
}else{
elm.innerHTML += ''+c+'';
}
});
});
}
あとは同じ要領でanimeオブジェクトを作成するだけです。色々なプロパティを操作して演出を試行錯誤してみようと思います。
今回はここまで
次回はボタンを押したらアニメするのではなく
ブラウザのviewに表示されたら自動でアニメを再生するようにします。