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>

   

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:

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