javascript - 带滚动的视差和振动背景图像

Question

我需要背景图像视差并在使用鼠标滚动时稍微振动。

背景位置正在使用 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

Answer 1

jsFiddle DEMO

(提示:删除 URL 中的 /show/ 以访问 jsFiddle 编辑 页面)。

考虑使用jQuery Vibrate 您的 Parallax 网站中的插件。 parallax website您在评论中提到正在使用 custom written parallax script对于该网站，因此没有可用的插件。

上面的jsFiddle使用了视差插件jQuery Parallax v1.1.3连同它的 revised demo ，用额外的振动进行修改 trainers鞋类对象。

这个振动插件的好处是它可以与鼠标交互，当与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!)
});