スクロールに合わせたアニメーション、昨今はクライアントさんがぐりぐり動かしたいっ、というケースが増え必須技術になっていますが、レスポンシブで行う場合、スクロール量が変化する為それなりに面倒です。これまで様々なプラグインもありました。「Intersection Observer API」を使うと、効率的にソースを書くことが出来る!!便利だ。ということで、使い回しがしやすいパタンを作っておくことにしま […]
Adobe AnimateCCは、Flash感覚でタイムラインアニメーションを作成し、canvas書き出しが出来る便利なソフトなのですが、レスポンシブの書きだしでちょっとハマってしまいました。同じことがまた起こると思われるので、メモしておきます。 本ケースの条件・環境 ワードプレステーマ内で利用(Foundationフレームワークを利用)AnimateCCのパブリッシュ設定 表示領域いっぱいも試し […]
cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。 使用方法の基本も簡単です。(1)CSSの@keyframesでアニメーションをつくる。(2)(1)のアニメーションを適用するCSSクラスをつくる。(2)inview.jsで、可視領域に入った […]