on:2012年8月28日sponsors複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。JavaScriptやCSSの初心者でも簡単にできると思います。Builderの使い方をざっくりと説明します。適用範囲の選択まずは、パララックスの適用範囲を選択します。左がページ全体、右がdiv要素のみ、です。カーソルを動かすとパララックスの動作が分かります。適用範囲を選択ここでは、左のページ全体をクリックして選択します。右上のパネルから背景カラーを設定します。レイヤーの設定ここからがパララックスの本番です。パララックスでずらして動かすレイヤーを設定します。右下の新規レイヤーボタンをクリックします。レイヤーパレットレイヤーの選択パネルが表示されます。レイヤーの選択パネルレイヤーパネルでは用意された画像やオンラインの画像を利用できます。ここでは、用意された2種類の波と太陽の画像を選択しました。選択するとレイヤーパレットに反映されます各レイヤーの配置を設定しましょう。位置を調整する場合は、Offsetを設定します。レイヤーのビジュアルプロパティまた、各レイヤーの目玉アイコンで表示・非表示が設定できます。Photoshopと同じですね。Behavior」で、各レイヤーのパララックスの設定を行います。Scroll」はスクロールに、それぞれ反応します。Move」をチェックします。Behavior」では、各レイヤーの設定を行います。右のレイヤーパネルでレイヤーを指定し、動作を設定してください。各レイヤーで大きくずらして動かしたい時には、「Speed」の値を調整します。※各レイヤーの設定を同じにすると、動きがつまらなくなります。パララックスの確認パララックスの設定が完了したら、左右のパネルを閉じて、動作確認をします。Code」をクリックします。コードの表示あとは、使用したいページにコードをコピペして利用するだけで、パララックスのエフェクトが実装できます。詳しい使い方は、下記ページをご覧ください。Posts関連記事が見つかりませんでした。