3

jsフォームスクラッチ（つまり、プラグインなし）を介して水平視差スクロールを行う方法のチュートリアルを見つけることができることを知っている人はいますか? または私に例を提供することができます

私はそれをグーグルで検索するのに多くの時間を費やしましたが、プラグインを使用したチュートリアルしか見つけることができませんでした

ゼロからやりたい理由は、視差が実際にどのように機能するかを完全に理解したいからです。

jQuery ライブラリを使用してもかまいませんが、効果のためにプラグインに依存したくありません。

4

3 に答える 3

4

簡単なチュートリアル

参照: http://www.egstudio.biz/easy-parallax-with-jquery/

そのコードを 5/6 要素 (異なるscaling) に適用し、ユーザーのマウスに基づいて優れた単純な視差効果を作成できます。

Shmiddtyのおかげで、ここに例があります: http://jsfiddle.net/4kG6s/1

「そして、これは@PezCuckowの回答のコードと同じセットアップです」

スケーリングとは、次のようなことを意味します（上から編集）

var strength1 = 5;
var strength2 = 10;
var strength3 = 15;
$("html").mousemove(function(e){
    var pageX = e.pageX - ($(window).width() / 2);
    var pageY = e.pageY - ($(window).height() / 2);
    var newvalueX = ;
    var newvalueY = height * pageY * -1;
    $('item1').css("background-position", (strength1 / $(window).width() * pageX * -1)+"px "+(strength1  / $(window).height() * pageY * -1)+"px");
    $('item2').css("background-position", (strength2 / $(window).width() * pageX * -1)+"px "+(strength2  / $(window).height() * pageY * -1)+"px");
    $('item3').css("background-position", (strength3 / $(window).width() * pageX * -1)+"px "+(strength3  / $(window).height() * pageY * -1)+"px");
});

jQuery などのライブラリがないと、視差効果を実装するのはかなり難しくなります。ライブラリで提供される機能を使用するのではなく、すべてのアニメーションを手動で実装する必要があります。

ただし、おおよそのガイドは、背景が異なる速度で移動する非常に貧弱な視差効果を実装する以下のようなものです。

CSS:

#bg1, #bg2, #bg3 {
    background-image:url('stars.gif');
    height: 100%;
    width: 100%;
    position: absolute;
    left: 100%;
}

HTML:

<div id="bg1"></div>
<div id="bg2"></div>
<div id="bg3"></div>

JS:

while(true) {
  document.getElementById('bg1').style.left = (document.getElementById('bg1').style.left) - 4 + 'px';
  document.getElementById('bg2').style.left = (document.getElementById('bg2').style.left) - 10 + 'px';
  document.getElementById('bg3').style.left = (document.getElementById('bg3').style.left) - 20 + 'px';
}
于 2012-09-05T15:47:36.890 に答える
3

これは、視差スクロールの大雑把に単純な実装です: http://jsfiddle.net/4kG6s/

function AnimateMe(){
    $("#background").css("background-position", "-=2");
    $("#middleground").css("background-position", "-=4");
    $("#foreground").css("background-position", "-=8");    
}

setInterval(AnimateMe, 100);

この実装は background-position をアニメーション化していますが、コンセプトは同じままです。前景は背景よりも比例して速く移動し、互いの上に重ねられたレイヤーがあります。概念的には、これは非常に単純です。

于 2012-09-05T16:05:40.990 に答える
2

@PezCuckowの回答からのコードですが、jQueryを使用していません（つまり、純粋にJavaスクリプトで）： http://jsfiddle.net/Gurmeet/s26zxcnf/1/

HTML:

<div onmousemove="update(event)">
    <div id="background">
    </div>
    <div id="middleground">
    </div>
    <div id="foreground">
    </div>
</div>

JS:

var strength1 = 50;
var strength2 = 100;
var strength3 = 200;

var background = document.getElementById('background');
var middleground = document.getElementById('middleground');
var foreground = document.getElementById('foreground');

function update(e){
var pageX = e.clientX - (window.innerWidth / 2);
var pageY = e.clientY - (window.innerHeight / 2);
background.style.backgroundPosition = (strength1 / window.innerWidth * pageX * -1)+"px "+(strength1  / window.innerHeight * pageY * -1)+"px";
middleground.style.backgroundPosition = (strength2 / window.innerWidth * pageX * -1)+"px "+(strength2  / window.innerHeight * pageY * -1)+"px";
foreground.style.backgroundPosition = (strength3 / window.innerWidth * pageX * -1)+"px "+(strength3  / window.innerHeight * pageY * -1)+"px";

};

于 2014-10-07T09:19:26.753 に答える