「パララックス（視差効果）」を１２パターンほど作りました。

ホームページに「立体感」が生まれるので、現代のサイトではよく利用されていますね。

マウスでスクロールすると、少しずつ背景画像が移動していくパターンを見かけることが多いのですが、CSSでは「移動」以外にも

• skew(歪み)

• rotate(回転)

• scale(拡大、縮小)

• blur(ブラー)

を組み合わせることで、さまざまな視差効果を作ることができます。

今回作成したパララックスは下記のリンクからご覧いただくことができます。

パララックスコレクション

散歩している時、お風呂に入っている時、寝る前など、日々の生活の合間に、さまざまな「モーション」を考えていくことも自分にとっては楽しい時間でした。

今回は、「Javascript」をゼロから書いていきましたが、「パララックス」を制作できる「Javascriptライブラリ」を活用して制作することもできます。

もっと作り込めばより複雑な「パララックスモーション」を制作できそうなので、また新しいモーション制作に取り組んでいきたいと思っています。