このskrollr.jsというjQueryプラグインを使うと、スクロールに連動したアニメーションが簡単に作ることができます。
スクロールを数値に変換し、その加算に応じて、スタイルシートが変化してアニメーションに見えるイメージです。
これを応用すると視差効果（パララックス）を利用したデザインを作ることができます。ここではその基本動作を幾つか紹介します。
PC用とスマホ用で仕様がことなるので、それぞれ実装してみました。
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
jQuery パララックス基本動作
スクロールに連動したアニメーションを実装のサンプルです。動きの速度を操作することで視差効果をおこり、不思議な表現を作ることができます。
人気のサンプル
Top