Posts Tagged ‘parallax design’

All about Parallax Websites – Plus Pro Tips to Increase Performance

January 9th, 2015

Parallax websites the hottest thing in Internet website design these days. If done right, it can deliver the much needed punch and when done wrong, it can backfire heavily. Parallax websites first came in around 2012 but initial examples were just plain scrolling websites. With more advances in CSS3 and HTML5, these websites are ready to take over the web. The newer versions offer smoother scrolling and remarkable effects.

So, here is all you need to know about Parallax websites and then some.

Parallax Websites Take User Experience to a Whole New Level

Parallax websites are all about getting the right user experience. The smooth scrolling experience makes even the lengthy pages look impressive. It’s the perfect ingredient for a memorable website user experience. No wonder that these websites are often very good at conversion.

In parallax, the background of a page moves slower compared to the foreground image. The relatively slower movement of the background image results in a 3D effect on the screen as you browse or scroll down the webpage. In heavy pages, it can add a subtle depth to the whole content. JavaScript plays a major role in the parallax website’s performance. Initially, there were reports that parallax websites are not good for SEO. But it is well taken care of now.

7 Pro Tips for Parallax Websites

  • Depth Correction – Parallax websites are all about creating the right depth using the 3D effect. When an element is represented on the screen using the Z axis, the size effectively changes as the viewpoint shifts closer or farther from the axis. To take care of this effect, a Scale() is applied to the element so that the image can be rendered clearly. At every viewpoint, the image is always visible from the original size. To calculate the Scale() factor, use 1 + (translateZ * -1) / perspective.
  • Layer Speed Control – Z translation values and perspective are used to control the speed of the layers. Elements that scroll slower have a negative Z value and faster scrolling elements have a positive Z value. The parallax effect can be increased by taking the Z value further from the 0.
  • Parallax Sections – This is an advanced concept that has recently seen great success. The same page can have different parallax effects. The page is broken into distinct sections and different effects can be applied as per the requirements. Different Z values can be set for every group and a new style/effect can be achieved for the various sections. But there’s a catch! When the elements are grouped, the content of a group cannot be clipped. If you try to set Overflow: hidden, the parallax effect will be broken by the group. This unclipped content will lead to descendant elements to overflow. This has to be done very carefully by being cautious with the Z index value groups to make sure that right content is hidden and revealed to the user scrolling through the webpage.
  • Mobile Optimized or Responsive – You have to take an approach in this case. For example whether you want mobile optimized or want to turn off the scrolling animations for smartphones. A developer must first ensure that the scrolling library and effects are implemented after the site is made responsive. Videos from parallax websites are not played automatically on mobiles. So, there should be a fall back image in place for such situations. For effective smartphone optimization, it is recommended to disable scrolling effects.
  • Simple Do’s for Parallax – Your stylesheets should always be super organized besides the JavaScript and data attributes. Relative and absolute CSS should be well positioned since they will make the UI cleaner. Horizontal code editor windows help with faster style tweaking.
  • Dont’s for Parallax – Before you implement scrolling animations, it is recommended that you ensure your website is working well in all browsers and its responsive part is performing up to the mark. Be very careful when you implement the data attributes and JavaScript codes from unauthorized sources.

Parallax websites are all about savoring the experience. But it has to be done correctly to take advantage of the impressive features. Follow these pro tips and you will be doing good in no time. For one thing is sure that parallax websites are here to stay. So make the most of this amazing design trend.