2

背景画像の視差が必要で、マウスでスクロールするときに少し振動します。

バックグラウンド位置はjQueryのcss()機能で動作していますが、振動していません。

ii firebug の場合、結果は

<div data-speed="10" data-type="background" style="height: 1000px; 
background-position: 50% 0px; animation: 0s ease 0s normal none 1 NaNpx;" 
class="parallax-container" id="intro">

これには jQuery のコードを使用し、Mozilla でテストしています。

/*parallex backgound*/
$glob('div[data-type="background"]').each( function() {
    var $bgobj = $glob(this); // assigning the object
    $glob(window).scroll( function() {
        var yPos = -($window.scrollTop() / 10);
        var coords = '50% '+ (yPos) + 'px';
        $bgobj.css({'background-position': coords}).animate({
            '-webkit-animation': 'vibrateAnim 1s ease', /* Safari 4+ */
            '-moz-animation':    'vibrateAnim 1s ease', /* Fx 5+ */
            '-o-animation':      'vibrateAnim 1s ease', /* Opera 12+ */
            'animation':         'vibrateAnim 1s ease'  /* IE 10+ */
        },500);
    });
});

HTML:

<div id="intro" class="parallax-container" style='height:1000px;' data-type="background" data-speed="10">
    <div id="mainTitleText" class="top-content">
        <img class="logo" src="images/logo.png">
    </div><!-- mainTitleText -->
</div><!--home-->

CSS:

@-moz-keyframes vibrateAnim {
    0%   { top: -10px; }
    10%  { top:  10px; }
    20%  { top: -10px; }
    30%  { top:  10px; }
    40%  { top: -10px; }
    50%  { top:  10px; }
    60%  { top: -10px; }
    70%  { top:  10px; }
    80%  { top: -10px; }
    90%  { top:  10px; }
    100% { top: -10px; }
}

デモ:
jsFiddle

リンクのように必要ですhttps://victoriabeckham.landrover.com/INT

4

1 に答える 1

2

jsFiddle デモ

(ヒント: /show/jsFiddle編集ページにアクセスするには URL を削除してください)。

Parallax ウェブサイトでjQuery Vibrateプラグインを使用することを検討してください。コメントで言及した視差 Web サイトは、そのサイト用にカスタム作成された視差スクリプトを使用しているため、プラグインは利用できません。

上記の jsFiddle は、パララックス プラグインjQuery Parallax v1.1.3を、追加の振動トレーナーフットウェア オブジェクトで変更された改訂されたデモと共に使用します。

このバイブレーション プラグインの利点は、reverseオプションで使用すると、マウスが任意のテキスト上にあるときにバイブレーションを停止する、マウスとの相互作用があることです。これは、訪問者がメッセージを明確に準備できるようにするのに役立ちます。

補足: jsFiddle では、振動するオブジェクトは他の 2 つの要素の間にあるため、DOM レイアウトの順序により、その場合はマウスオーバーは適用されません。

$('#extra').vibrate({
    speed: 50,             // Vibration speed in milliseconds
    trigger: "mouseover",  // Triggering event
    reverse: true,         // Reverse behaviour
    overEffect: "stop",    // Over effect, see details below
    vibrateClass: "",      // CSS class applied when vibrating (New in vers. 1.1!)
    overClass: ""          // CSS class applied when over effect is triggered (New in vers. 1.1!)
});
于 2012-12-21T02:18:50.293 に答える