タグ

パララックスに関するunirunのブックマーク (1)

  • [JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D

    複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン

  • 1