css - 視差スクロール

Question

誰かが私を正しい方向に向けることができますか？背景画像が固定されたDIVがありますが、ページを下にスクロールするときに、より遅い速度でスクロールしたいと思います。私はjQueryやCSS3が苦手なので、助けを求めています。

前もって感謝します。

Answer 1

視差効果に関しては、Web上に複数のチュートリアルがあります。ここで、エリア2は、「視差効果チュートリアル」の単純なグーグル検索を形成します。

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://richardshepherd.com/smashing/parallax/

http://stephband.info/jparallax/

Answer 2

これは役立つかもしれません：http ：//stephband.info/jparallax/ それはノードをマウスに反応して動く絶対に配置されたレイヤーに変えます。

Answer 3

http://potentpages.com/parallax-scroll-tutorial/

これが私の会社と私が作成したチュートリアルで、あなたが話しているようなWebページを作成する方法を説明しています。jQueryや高度なCSSは必要ありません。

視差ウェブサイトの作成方法に関する多数のライブラリとチュートリアルがあります。ここにいくつかリストしました：

http://potentpages.com/parallax-tutorials/

関連するJavaScriptは次のとおりです。

var topDiv = document.getElementById("topDiv");
var speed = 1.5;

window.onscroll = function()
{
   var yOffset = window.pageYOffset;
   topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}

ここで、「topDiv」は「通常のスクロール速度」よりも遅く移動したい要素です。要素の移動を遅くするには、速度変数を増やします。動きを遅くするには、小さくします。

Answer 4

window.onscroll = function(e)
{
    var val = document.body.scrollTop / your_scroll_factor;
    document.getElementById('your_background_image').style.posTop = -val;
}