Just another WordPress site

Parallax image scroll

Parallax image scroll effect with simple jquery code

Its very easy with jquery to make a image scroll with parallax. Copy the below jquery code to get parallax image scroll effect.


jQuery(document).ready(function(){

    // Cache the Window object
    $window = jQuery(window);
                
   // $('div[data-type="background"]').each(function(){
     var $bgobj = jQuery(".element_class"); // assigning the object
                    
      jQuery(window).scroll(function() {
                    
        // Scroll the background at var speed
        // the yPos is a negative value because we're scrolling it UP!                              
        var yPos = -($window.scrollTop() / $bgobj.data('speed')) + 200; 
        
        // Put together our final background position
        var coords = '50% '+ yPos + 'px';

        // Move the background
        $bgobj.css({ backgroundPosition: coords });
        
      }); // window scroll Ends

 // });    

}); 

The post Parallax image scroll appeared first on Santosh Shah.


Leave a Reply

Your email address will not be published. Required fields are marked *