アニメーション好きな人、多いですよね。
スクロールして、要素が見えたときになんか下からフェードインしてくるとか、リストで上の項目から順に現れていくとか。
個人的にはボタンでオーバー時にアニメーションとか、メインのイメージ部で例えば背景でちょっとアニメーションしてるとかは好きですが、サイト全体でやるのは苦手です。
とにかく、そういった依頼があったときに便利なのが以下スクリプト。
<script type="text/javascript" src="delighters.js"> <section class="anime" data-delighter> ~ </section> <style> .anime.delighter{ transition: all 0.2s; opacity:0; } .anime.delighter.started{ opacity:1; } </style>
こんな感じで、アニメーションしたい要素に【 data-delighter 】と指定するだけで、デフォルトで「delighter」というクラスが付与されるようになります。
で、スクロールして要素が出現したときに「started」が付与され、あまり使いませんが見えなくなる時には「ended」が付与されます。
あとは好きにアニメーションさせましょう。