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/在 URL 中删除以访问 jsFiddle编辑页面）。

考虑在您的 Parallax 网站中使用jQuery Vibrate插件。您在评论中提到的视差网站正在为该网站使用自定义编写的视差脚本，因此没有可用的插件。

上面的jsFiddle使用视差插件jQuery Parallax v1.1.3以及修改后的 demo，修改了额外的振动运动鞋对象。

这个振动插件的好处是它与鼠标交互，当鼠标悬停在任何文本上时，当与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 回答