スクロールで要素が出現したときにアニメーションさせたい場合(classを付与する)

アニメーション好きな人、多いですよね。

スクロールして、要素が見えたときになんか下からフェードインしてくるとか、リストで上の項目から順に現れていくとか。

個人的にはボタンでオーバー時にアニメーションとか、メインのイメージ部で例えば背景でちょっとアニメーションしてるとかは好きですが、サイト全体でやるのは苦手です。

とにかく、そういった依頼があったときに便利なのが以下スクリプト。

delighters(github)


<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」が付与されます。

あとは好きにアニメーションさせましょう。