1

こんにちは、背景がさまざまな速度でマウスに移動して、ほぼ 3D のような効果を作成したいと考えています。

これは私がこれを見つけたもので作りたいものです

誰かが私に説明したり、これを行うスクリプトを見せてくれませんか。

4

2 に答える 2

1

あなたが話しているのは視差効果です。これを可能にする多くの既存のスクリプトとプラグインがあります。たとえば、簡単な検索でこのページが表示され、7つの異なるjQueryプラグインが一覧表示されます。

基本的な前提は、マウスの現在の位置に基づいてJSを介して独立して移動されるレイヤーにピースを分割し、必要に応じてエリアを非表示にすることです。

例

この効果の簡単な例は次のとおりです（このコードは使用しないでください。あまりクリーンではありません）。

HTML

<div id="parallax">
    <img src="img1.png" alt="background"/>
    <img src="img2.png" alt="foreground"/>
</div>

JS

$('#parallax').on('mousemove', function (e) {
    $('img').eq(0).css('left', e.pageX);
    $('img').eq(1).css('left', e.pageX * 2);
});

この簡単な例では、前景画像は背景の2倍の速さで移動します。ご覧のとおり、目的の効果を得るには、各ピースを互いに別々に移動するだけです。

于 2012-07-11T21:25:01.857 に答える
0

そのページのソースにある js を見てみませんでしたか。マウス移動イベントで絶対に配置される 4 つの画像。

 $(document).mousemove(function(e) {
    var x = ((e.pageX/$(window).width())*100)*-1;
    var y = ((e.pageY/$(window).height())*100)*-1;
    var pos = (x/80*-1)+"% "+(y/80*-1)+"%";
    var pos2 = (x/3+60)+"% "+(y/3+60)+"%";
    var pos3 = (x/5+30)+"% "+(y/5+30)+"%";
    var pos4 = (x/2+60)+"% "+(y/2+60)+"%";
    $("#grid").css("background-position",pos);
    $("#bottom").css("background-position",pos2);
    $("#bottomoverlay").css("background-position",pos3);
    $("#bottomblur").css("background-position",pos4); });
于 2012-07-11T06:54:53.987 に答える