スクロールしたらふわっと表示されるAOSつかってみた

yasuko
結婚したい芸能人ランキング1位は木梨憲武です

サイトを見ていてスクロールしていくとしたからふわっと画像が出てきたりするエフェクト。

意外と簡単に出来ますよ!

AOS(Animate On Scroll)Library

AOSデモサイト

こちらのサイトにいろんなエフェクトが用意してあります!

下から上、右から左、ペロンとひっくり返る、ギューンと出てくる、などなど。

タイミングやスピードや位置など、自由度高めにカスタム出来ます。

サクッとつかってみよう

jQueryは使わないよ。

AOS GitHubからダウンロードしてもよいのですが、

CDNでも配布されているのでサクッっと使うにはこちらを。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script>
 AOS.init();
</script>

ふわっとさせたいコンテンツに

data-aos=”ふわっとさせる方法”

を指定したらこの通り!

動かしたくないときもある

たとえば、スマホの時はふわっとさせない。

そんなわがままも叶えてくれます。

<script>
  AOS.init({
    disable: 'mobile'
  });
</script>
<script>
  AOS.init({
    disable: 'tablet'
  });
</script>
<script>
  AOS.init({
    disable: 'phone'
  });
</script>

disable: ‘ふわっとしたくないデバイス’

を指定するとふわっとしなくなります。

<script>
  AOS.init({
    disable: window.innerWidth < 768
  });
</script>

画面幅でふわっとさせなくすることもできます。

公式サイト

AOS GitHub

AOSデモサイト