0

ちょっとしたインフォグラフィックとして、ページに縦に並べたい画像がいくつかあります。ただし、背景を前景要素から分離し、下にスクロールすると前景(背景)要素が移動する視差効果を少し加えたいと思います...

jQueryまたはCSS3でこれを達成するための最善の方法がわからない...リンクや例をいただければ幸いです。

4

2 に答える 2

6

jquery.parallaxを使用できます。

jParallaxは、ノードを、マウスに応答して移動する絶対位置のレイヤーに変換します。それらの寸法に応じて、これらの層は、パララキシーのような方法で、異なる速度で移動します。

それがどのようになるかのスクリーンショット:

jQParallax
(ソース:stephband.info

コードも小さいです。

<ul>
    <li class="parallax-layer"></li>
    <li class="parallax-layer"></li>
</ul>
于 2012-10-12T03:01:29.623 に答える
1

上記の回答に加えて、もっとシンプルで優れたプラグインがあります。

  1. (ほぼ)静的な背景

  2. カーテン.js

    http://www.jquerythisplugin.com/wp-content/uploads/2012/03/curtain.jpg

  3. ステラJS


    (ソース: jquer.in )

  4. スクロールデッキ

  5. スクロールラマ


    (ソース: romanliutikov.com )

  6. ParallaxSlider

于 2012-10-12T07:17:00.137 に答える