【JavaScript】ランダム表示する要素サンプル

目的

・乱数を使って要素をパラパラと表示させたい。
・極力プラグインを使わずにアニメーションを実装したい。

デモコード

解説

// まずはそれぞれの要素を取得します
var text = document.getElementById('js-anim-text');
var el = text.getElementsByTagName('span');
var button = document.getElementById('js-anim-button');

button.addEventListener('click', function() {
// ボタンがクリックされた際イベントが発火するよう記述します
})

for (let i = 0; i < el.length; i++) {
 // 乱数を使い各spanタグのアニメーション用の遅延を定義します
 var delay = Math.random() * 900;
 setTimeout(function() {
   // 各要素にクラスを付与します（実際の挙動はcssで制御されています）
   el[i].classList.add('is-active');
 }, delay);
};

まとめ

プラグインなしでもだいぶ手軽にパラパラアニメーションは実装できます！

今回の対象はテキストだったためspanタグをやたら配置する羽目になりましたが、、要素や画像も同様に実装できます。
他にも対象の初期配置やスタイルを調整していくとさらに動きを加えれるので是非試してみてください〜（結構楽しめますw）