[contact-form-7 id="24078" title="Feedback EN"]

Featured templates

Magento. How to manage Parallax blocks

This tutorial will show you how to manage Parallax blocks in Magento template.

Magento. How to manage Parallax blocks

In order to add parallax-effect for certain content block, you need:

  1. To add any class for parallax-effect block (e.g: parallax) and add attribute:

    data-source-url="{{skin url='images/your_image.jpg'}}"

    E.g:

    <div class="parallax" data-source-url="{{skin url='images/your_image.jpg'}}"> </div>

    Magento_How_to_manage_Parallax_blocks_1

  2. To add image into images folder skin/frontend/default/themeXXX/images/.

  3. To add styles into the skin/frontend/default/themeXXX/css/style.css file:

    			.parallax {
    			background-image: url(../images/your_image.jpg);
    			background-position: 50% 0%;
    			background-repeat: no-repeat;
    			background-size: cover;
    			left: 50%;
    			margin-left: -225px;
    			height: 250px;
    			}
    		
  4. Add the following code into skin/frontend/default/themeXXX/js/scripts.js file :

    			jQuery(window).load(function(){
    			var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEmobile|Windows Phone|WPDesktop/i.test(navigator.userAgent);
    			if(!isMobile) {  
    			if(jQuery(".parallax").length){  jQuery(".parallax").cherryFixedParallax({  invert: true, 
    			offset: 300 
    			}); 
    			}; 		
    			};	
    			});
    		

Variable invert: true chooses the direction of the parallax effect, and offset: 300 its density:

Magento_How_to_manage_Parallax_blocks_2

This is the end of the tutorial. Now you know how to manage Parallax blocks in Magento template.

Feel free to check the detailed video tutorial below:

Magento. How to manage Parallax blocks