CODEWITHSUNDEEP
javascriptjqueryhtmlcssparallax
Naresh
Naresh

Reputation: 2781

Parallax and vibrate background image with scroll

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

Upvotes: 3

Views: 1899

Answers (1)

arttronics
arttronics

Reputation: 9955

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!)
});

Upvotes: 2

Related Questions