css parallax - sinsunsan/archiref_wiki GitHub Wiki

Paralax directives for angular.js

Parallax explained

• a difference of scroll speed between elements of the page. for exemple without parallax an element has 1px scrolled = 1 pixel offset in the scroll direction

With a parallax ratio : we set the difference related to normal deplacement 0.5 ratio mean 0,5x the normal deplacement 300 pixel scrolled = 150 pixel deplacement

• mean the direction, a negative number mean scrolling in the inverse direction as the main scroll

Hide / reveal

In the following example http://oblador.github.io/angular-parallax/

The image has a negative margin, that allow to hide some of it. The translate 3D move the image relative to it's normal position, up to 150px maximum and 150 pixel minimum

Exemples of paralax scroll site :

• https://medium.com/@branded07/the-troublesome-misconception-of-parallax-in-web-design-2a55ad1459f7
• http://www.creativebloq.com/web-design/parallax-scrolling-1131762
• http://discover.store.sony.com/be-moved/

Explanation of what is parallax :

• https://www.unleashed-technologies.com/blog/2013/08/15/what-parallax-web-design-%E2%80%93-definitions-tips-considerations

Advantages of parallax :

Parallax design gives websites a great opportunity to:

• Wow viewers with page depth and animation
• Take a story-telling approach to guide visitors through the site
• Make page visits last longer by encouraging visitors to scroll through the entire page
• Provoke curiosity
• Direct visitors to calls to action
• Reenforce website credibility with innovative interactive viewing