wow.jsのバージョン間の微妙な差異にはまる
あけめしておめでとうございます
※多分ネタが古すぎて伝わらない
松の内もおわってんのに何言ってんだって感じですが、今年も細々とやっていこうと思います。
でまあ新年一発目なんですが、アニメーションの件で仕事入りまして。
アニメといってもHTMLのアニメーションなんですけど、canvasでも使っとけよってほとんどの人言って終了かとは思いますが、
今回はちょっとインタラクティブなウェブサイトってご注文なんでcanvasで、というかcreateJSとかでやるわけにはいかず。
んでまあwow.jsを利用します。
wow.js自体はアニメーションさせてるわけではなくて、animate.cssに手を入れてスクロールで開始できるようにする感じのスクリプトです。
jQueryはいりません。
でまあそれでいいんですけど、
検索してもほとんどの情報に載ってなくてえらい？？？ってなったことがありまして。
wow.jsは一応オプションがありまして、
[js]
{
boxClass: ‘wow’, // default
animateClass: ‘animated’, // default
offset: 0, // default
mobile: true, // default
live: true // default
}
[/js]
このanimateClassなんですが、最初からGit確認しろよって感じなんですが、v1.0.2(公式サイトで使っているバージョン)とv1.1.2(GitHub/CDN最新版)で動きが変わります。
前のバージョンでは、アニメーションが終わった後にaddClassしてます(animatedなのでまあわかりやすい)、
現行バージョンでは、アニメーションをする前・最中の要素にaddClassしており、なんらかの原因でアニメーションがストップするとremoveされます(animatedってデフォルトクラス名合わなくないかな)
内部的にはresetAnimationが呼ばれたタイミングなので、
[js]
this.util().addEvent(box, ‘animationend’, this.resetAnimation);
this.util().addEvent(box, ‘oanimationend’, this.resetAnimation);
this.util().addEvent(box, ‘webkitAnimationEnd’, this.resetAnimation);
this.util().addEvent(box, ‘MSAnimationEnd’, this.resetAnimation);
[/js]
この辺。
animateClassでCSS変えていたのでちょっとはまりました。
あとはまあ特段変化ないので普通に使えると思います。
個人的にはboxClass名がダサいというか、なんでこんな名前なんだろうって思っちゃってますが。
