log > Animate.cssとWow.js

Animate.cssとWow.js

脱jQueryしようといろいろ調べているのだが、アニメーション系をVelocity.js以外でやる方法を調べていた。で、表示するときに動作させるだけであれば、Animate.cssとWow.jsでよさそう。

• Animate.css
• Reveal Animations When Scrolling — WOW.js

サンプル。下にスクロールするとさらに3つ表示される。

See the Pen KVrPLa by deprode (@deprode) on CodePen.

スクロール位置によってアニメーションは発動するけど、スクロールを戻したときに再度開始することはできない。あと、Animate.cssのサイトではjQueryをクラスのtoggleとbinding(one)で使ってる。

jQuery、別にWebサイトとかで使う分には全然ありだけど、モバイルでちょっと重いし、できれば使いたくない。ただjQuery抜きだと、「アニメーションのあとにコールバックで何かする処理が加わると、Promise使う」「クロスブラウザでajaxが面倒だからgithub/fetch使う」……とか、いろいろ加わると「じゃあjQueryでいいじゃん」となってしまう。しかし、それでページ内で密結合な処理を書いていくと不吉なにおいが立ちこめるので避けたい。

とか書いていたら、「Chromeがさらに増加、1月ブラウザシェア | マイナビニュース」という記事を見つけた。IE11の次にIE8で8%近くのシェアがあった。私はまだ、jQuery2.xすら使えないのかもしれない。