![見出し画像](https://assets.st-note.com/production/uploads/images/15164665/rectangle_large_type_2_5c76c8a837e4e6bfe1be6de7c9834b86.jpeg?width=1200)
anime.jsを使う(JavaScript)
アニメーションをつけるのに、外部ライブラリとして
初めてanime.jsを使ってみた。
【手順】
1)githubからダウンロード + 解凍
2)anime.min.jsと自作のJavascriptファイルを
HTMLファイルの「script」タグに記載
<!--anime.jsを参照-->
<script type="text/javascript" src="../anime/anime.min.js"></script>
<!-- JS情報 -->
<script type="text/javascript" src="MR0002_script.js"></script>
3)自作のJavasciriptファイルにanime{ }を使って
アニメーション詳細を記載
window.onload = function(){
anime({
targets: '#index_1', //動かしたい要素
translateX: '-700px',//相対X座標(着地点)
translateY: '0px',//相対Y座標(着地点)
duration: 2000, //アニメーションの時間を指定(ms)
elasticity:100,//アニメーションの弾み具合
loop: false, //ループを設定
direction:'normal'
});
anime({
targets: '#index_2', //動かしたい要素
translateX: '-700px',//相対X座標(着地点)
translateY: '0px',//相対Y座標(着地点)
duration: 2000, //アニメーションの時間を指定(ms)
elasticity:100,//アニメーションの弾み具合
loop: false, //ループを設定
direction:'normal',
delay: 100 //開始遅延(ms)
});
anime({
targets: '#index_3', //動かしたい要素
translateX: '-700px',//相対X座標(着地点)
translateY: '0px',//相対Y座標(着地点)
duration: 2000, //アニメーションの時間を指定(ms)
elasticity:100,//アニメーションの弾み具合
loop: false, //ループを設定
direction:'normal',
delay: 200 //開始遅延(ms)
});
}
この場合、3つの要素が1つずつ
(2つ目以降は delay :100ms でスタート)
バウンドしながら(elasticity)移動するようにしてみた。
【感想】
全く無知から始めた + 知りたい情報の探し方がよく分からず。
どんな要素にもアニメーションをつけられるかと思っていた…
が、今のところ「div」タグにしかつけられないことを発見。
(ここまでで1時間 苦戦)
それから、パワポのように「白紙からフェードインして文字が表れる」
ような「0から1」のアニメーションはできないことを理解。
(ここまでで3日…。)
右から左へ動くアニメーションをつけたい場合は
①動かしたい要素をCSS等で右寄せで表示設定しておく
②アニメーション設定で「translateX」の座標を
マイナス設定にして右に動くようにしておく
③アニメーションで高さを変えない場合は、「translateY」
の座標は「0」にしておく
という感じ。
この記事が気に入ったらサポートをしてみませんか?