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

（提示：在网址中移除/show/以访问jsFiddle 编辑页面。）

考虑在您的Parallax网站中使用jQuery Vibrate插件。您在评论中提到的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!)
});

视差和振动背景图像与滚动

我正在使用jQuery的代码，并在Mozilla中进行测试。

1 个答案: