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:
© 2022 carlessanagustin.com | Legal Note | Developed by Carles San Agustin from original theme
Gridly
I really like reading through an article that will make people think.
Also, thanks for allowing me to comment!