AOS.jsランダム（data-aos-delayの値をランダムに設定する方法）

  • 投稿日
  • 著者 しんぺー
  • カテゴリー Code
  • カテゴリー JavaScript
  • カテゴリー jQuery

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);

終わり。