My first experience with Parallax

21 August, 2013

I tryed a new web design development trend: Parallax. It is based on the physics concept of a displacement or difference in the apparent position of an object viewed along two different lines of sight. Nowadays many websites are designed following this rule that creates the effect of movement in 3D when scrolling horizontally or vertically.

For the created example I used Stellar.js, jQuery Easing and YUI 3 CSS Reset libraries; Stellar does the Parallax effect, Easing to give jQuery advanced easing options and YUI3 does reset browser CSS.

Demo.

When scrolling the interface we can reach to different slides and experience the Parallax effect. In the HTML side we’ll find the data structured in static and slices. The static data is repeating contents as the menu list on the left and the logo on the middle of the page. While the slides are a group of 5 divs with movement objects and other static contents for each of the slides. Static data is out of any Stellar.js div. A general slide:

	
some text here
	title
	

		
		
		

1. div.slide: Contains the main contents of a slide.
2. div.slide span: Contains formated text.
3. div.slide div.wrapper: Contains Parallax elements like images and buttons.

HTML attributes are particular to Stellar.js. I suggest reading its documentation.

function goToByScroll(dataslide) {
	htmlbody.animate({
	scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
	}, 2000, 'easeInOutQuint');
}
links.click(function (e) {
	e.preventDefault();
	dataslide = $(this).attr('data-slide');
	goToByScroll(dataslide);
});

1. goToByScroll function: Easing animation effect general function.
2. click function: Click action for each of the cases. It sends the interface to the requested slide.

I used CSS for stying and positioning the elements.

As I liked the experience, I will continue studing the Parallax effect and hopefully will publish more posts.
Regards.

Tags: easing, jquery, parallax, stellarjs