サイトを見ていてスクロールしていくとしたからふわっと画像が出てきたりするエフェクト。
意外と簡単に出来ますよ！
AOS（Animate On Scroll）Library
こちらのサイトにいろんなエフェクトが用意してあります！
下から上、右から左、ペロンとひっくり返る、ギューンと出てくる、などなど。
タイミングやスピードや位置など、自由度高めにカスタム出来ます。
サクッとつかってみよう
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>画面幅でふわっとさせなくすることもできます。