Parallax and vibrate background image with scroll

Question

I need background image parallax and vibrate little bit when scrolling with mouse.

Background position is working with jQuery's css() function but not vibrating.

When ii firebug it result is

<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">

I am using jQuery's code for this, and testing in 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; }
}

DEMO:
jsFiddle

I need as in link https://victoriabeckham.landrover.com/INT

sir i got solution with your code.. please close.. thanx for your support.. — Naresh
– Naresh, Commented Dec 31, 2012 at 9:23

arttronics · Accepted Answer · 2012-12-21 22:35:19Z

jsFiddle DEMO

(Tip: Remove /show/ in URL to access jsFiddle Edit Page).

Consider using the jQuery Vibrate plugin in your Parallax website. The parallax website you mentioned in comments is using a custom written parallax script for that site, so no plugin is available.

The above jsFiddle uses parallax plugin jQuery Parallax v1.1.3 along with it's revised demo, modified with an extra vibrating trainers footwear object.

The benefit of this vibrate plugin is that it has interaction with the mouse, to stop vibrating when the mouse is over any text when used with reverse option. That is useful so visitors can ready message clearly.

Side note: In the jsFiddle, the vibrating object is in between 2 other elements, so the mouseover will not apply in that case due to DOM layout order.

$('#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!)
});

Collectives™ on Stack Overflow

Parallax and vibrate background image with scroll

I am using jQuery's code for this, and testing in Mozilla.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

I am using jQuery's code for this, and testing in Mozilla.

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related