waypoint.js でスクロールに連動してクラス名を追加し、mobile ON / OFF 機能をつけるカスタマイズ
下記の記事を参考にして、waypoint.jsでスクロールに連動してクラス名を追加し、さらにmobile ON/OFFをつけるカスタマイズをしてみました。今回はjQueryではなくJavaScript版を使用しています。
...
スクロールに連動したアニメーションを実現するには？
アニメーション、したいですよね。いまウェブサイトにアニメーションを実装するのに何がいいのか？を考えてみました。
必須で実現したいこと個人的には以下です。
手軽に導入できるスクロールの可
SVGスプライトを使ってコマ割りアニメーションを作ろう
SVGスプライトを使用してコマ割りアニメーションを作ってみました。以下の記事を参考にさせていただきました。
CSSスプライトとstepsを使ってアニメーション画像を作ろう
今回作ったサンプルはこちらです。
animateCCで作成したアニメーションをSVGスプライトに変換する手順
compassを使っていないけどスプライト画像だけ作成したかったので、generatorを探してみました。以下、今回行った手順です。
animate CC でアニメーションを作成するこんな感じの1秒24フレームのアニメーシ ...