しんぺー AOSを使用して要素をふわっと出現させるアニメーションはよく使用されます。
タイミングを遅らせたいときにはdata-aos-delay属性を使いますが、ランダムに出現させたい時、AOSにはそのようなオプションが用意されていません。
固定値を設定するので、読み込む度にランダムに出現させることができない。
<!-- 固定値を入れるのでランダムに出現させることができない。 -->
<div data-aos="fade-up" data-aos-delay="200"></div>
<div data-aos="fade-up" data-aos-delay="400"></div>
<div data-aos="fade-up" data-aos-delay="800"></div>
<div data-aos="fade-up" data-aos-delay="1000"></div>今回はこの値をJavaScriptを使用して設定してみます。
// 配列内にdelayさせたい数値を格納し、その値を使用します。
// AOSのdelayをランダムに
const delays = [0, 100, 200, 300, 400, 500, 600];コードはコピペで使用できます。
要素のクラス名だけ自身のコードと一致させてください。
以下のように、複数の要素を指定することも可能です。
// 対象のアイコン
const kvIcons = document.querySelectorAll('.kv-icon-list li');
const aboutIcons = document.querySelectorAll('.icon-list01 li');
// iconsに遅延を設定
setAosDelay(kvIcons);
setAosDelay(aboutIcons);完成形のイメージ
スクロールしていくと丸い要素がランダムに出現します。
See the Pen aos_random_delay by shimpei (@shimpei) on CodePen.
完成形のイメージ、Azymothのジャケみたいにしたかったけど無理やった。
いつかthree.jsとかでやってみたいなぁ。
HTML
HTMLはこんな感じです。data-aos-delay属性はJavaScriptでつけるのでHTMLにはつけなくて大丈夫です。
<!-- data-aos-delayはつけなくてOK．JSでつけます。 -->
<ul class="icon-list">
<li data-aos="fade-up"></li>
<li data-aos="fade-up"></li>
<li data-aos="fade-up"></li>
<li data-aos="fade-up"></li>
</ul>JavaScript
少々長いですが変更が必要な箇所は一箇所。
対象のアイコンをクラス名で指定していますが、ここを自身のコードと一致させるだけです。const icons = document.querySelectorAll('.あたなのクラス名');
AOS.init({
once: true,
duration: 900,
easing: 'ease-out',
});
// AOSのdelayをランダムに
const delays = [0, 100, 200, 300, 400, 500, 600];
// 対象のアイコン
const icons = document.querySelectorAll('.icon-list li');
// delays配列をシャッフルする関数
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
// delays配列をシャッフルして使用
const shuffledDelays = shuffle([...delays]);
// 遅延を設定する共通関数
function setAosDelay(icons) {
icons.forEach((icon, index) => {
const randomDelay = shuffledDelays[index % shuffledDelays.length];
icon.setAttribute('data-aos-delay', randomDelay);
});
}
// iconsに遅延を設定
setAosDelay(icons);終わり。