ページに動きをつけるパララックス効果

jQuery skroller

スクロールにあわせて、ウィンドウ内に動きをつける事ができる jQueryプラグイン 「skroller」

jQuery skroller

skrollr – parallax scrolling for the masses

様々なパララックス効果が用意されており、簡単に実装することができるかなり軽めのJSスクリプトです。
デモページを見ると、この「skrollr」で実装する事ができる様々なパターンのパララックスエフェクトみることができます。

HTML5とCSS3アニメーションで構成されていて、data属性を使って各エレメントにアニメーション設定をするようになっています。

その他にも

https://github.com/Prinzhorn/skrollr/tree/master/examples#examples

にはスクロールによって要素を回転させるパターンや、シンプルに背景画像のみにパララックス効果を付けるパターンなどいろいろなサンプルが用意されてるので、一度見ておくと感覚が刺激される事間違いありません!

skroller パララックス効果サンプル
jQuery skroller

ABOUTこの記事をかいた人

GeoDesign

ホームページは、情報収集が得意なメディアです。 集めたデータを活用することで、ホームページの改善だけではなく、リアルマーケティングや、新商品開発に発展するまでにできるのです。
  • 成果の見えるホームページを運用したい。
  • デジタルマーケッターになれる広報担当者を育成したい。
  • 自社メディアでブランド力の強化と、顧客創造を図りたい。
こんな欲求をかかえるあなた。
  • どうしたらウェブサイトから成果が上がるのかわからない
  • 簡単に運用できるシステム、時間ロス・コストロスを減らしたい
こんな悩みをかかえるあなた。 私達にその欲求や悩みを改善するお手伝いを任せてみませんか?