Jun 18 2016

How to create a Css3 Parallax Effect

What is Parallax?

Different platforms, online and offline are competing to give users rich user experience and visual media is one which has seen tremendous revolution in achieving this. Creativity is unleashed in designing and developing this experience, be it in movies, games or web platforms.

The term ‘parallax’ derived from the Greek word ‘parallaxis’ meaning alteration refers to the difference or deviation in the apparent position of an object when it is viewed from different angles or different lines of sight. In web design it is a special effect to give the impression of depth to objects on the web page through optical illusion. This is achieved by animating multiple layers of background and foreground images at different speeds. From the user's perspective, the feel they get as they scroll past these images is what we call the “parallax scrolling effect”.

Parallax design is simple to implement. A three dimensional element is added to a website and it is made to reveal itself at a slower pace than the foreground when user scrolls down a page. It gives a feel as if the text and images are floating on top of the background, adding an element of interactivity that’s not present on a standard text-on-flat-background site.

Examples of the Parallax Effect in Action.

CSS3 Styles

<p><code>&lt;style&gt; html {height: 100%;overflow: hidden;}body { margin: 0; padding: 0; perspective: 1px; transform-style: preserve-3d; height: 100%; overflow-y: scroll; overflow-x: hidden; font-family: Nunito;}h1 { <br /> font-size: 250%}p { <br /> font-size: 140%; line-height: 150%; color: #333;}.slide { position: relative; padding: 25vh 10%; min-height: 100vh; width: 100vw; box-sizing: border-box; box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); transform-style: inherit;}img {position: absolute; <br /> top: 50%; left: 35%; width: 320px; height: 240px; transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg); padding: 10px; border-radius: 5px; background: rgba(240, 230, 220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}img:last-of-type { <br /> transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);}.slide:before { content: &quot;&quot;; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}.title { width: 50%; padding: 5%; border-radius: 5px; background: rgba(240, 230, 220, .7); box-shadow: 0 0 8px rgba(0, 0, 0, .7);}.slide:nth-child(2n) .title { margin-left: 0; margin-right: auto;}.slide:nth-child(2n+1) .title { margin-left: auto; margin-right: 0;}.slide,.slide:before { background: 50% 50% / cover;}.header { text-align: center; font-size: 175%; color: #fff; text-shadow: 0 2px 2px #000;}#title { background-image: url(&quot;http://materializecss.com/images/parallax1.jpg&quot;); background-attachment: fixed;}#section-1:before { background-image: url(&quot;http://materializecss.com/images/parallax2.jpg&quot;); transform: translateZ(-1px) scale(2); z-index: -1;}#section-1:before { background-image: url(&quot;http://materializecss.com/images/parallax2.jpg&quot;); transform: translateZ(-1px) scale(2); z-index: -1;}#section-3:before { background-image: url(&quot;http://materializecss.com/images/parallax2.jpg&quot;); transform: translateZ(-1px) scale(2); z-index: -1;}#section-4 { background: #5280DC;}.parallax img{display:block;}&lt;/style&gt;</code></p><p>Html <br /> <div id="title" class="slide header"><h1>CSS3 Parallax</h1></div><div id="section-1" class="slide"> <div class="title"><h1>Slide 1</h1><p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset.Labores perpetua cum at. Id viris docendi denique vim.</p></div></div><div id="section-2" class="slide"><div id="section-3" class="slide"><div class="title"><h1>section 3</h1>
<p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id viris docendi denique vim.</p></div></div><div id="section-4" class="slide header">
<h1>The End</h1></div>

Conclusion

Parallax, liked or disliked, is here to stay. But the way it is utilised now will definitely change. Instead of having it for the sake of including it, we will see some tasteful instances of parallax, used in conjunction with other design techniques, to achieve a rich user experience.

Loading Disqus Comments ...