on:2017年5月24日sponsorsページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示させたりできます。-GitHubparoller.jsのデモparoller.jsの使い方paroller.jsのデモデモでは、垂直・水平方向のパララックスを楽しめます。スマホでもパララックスは楽しめましたが、レイアウトが対応されていないようです。垂直方向のパララックス親コンテナいっぱいの背景をパララックスさせたデモで、1つ目と2つ目では係数が異なります。垂直方向のパララックスカード型のコンポーネントは、スクロールに連動して上下にずらしながら表示されます。水平方向のパララックス水平方向では、スクロールに連動して水平方向にパララックスします。水平方向のパララックスカードも水平に移動し、アコーディオンのような動きで面白いです。外部ファイル当スクリプトとjQueryを外部ファイルとして記述します。HTMLデモの最初にある、垂直方向のパララックスのコードです。親コンテナのdiv要素に画像を背景で指定し、それをアニメーションさせます。JavaScriptjQueryのセレクタでパララックスさせる要素を指定し、スクリプトを実行します。'horizontal'});});</script>パララックスの挙動は、HTMLにdata属性として記述することも可能です。