By,
Gauri
In web designing we come across websites with the so called "parallax" effect. Parallax comes from the Greek word (parallaxes) meaning, “alteration”. Parallax effect have been really popular basically includes different layers of images that are moving in different directions or with different speed. This leads to a nice optical effect and keeps the attention of the visitor. Parallax has existed since 1980’s and was used in video game titles and later was used on websites. Today, it is one of the most widely-used designs on the modern Web.
The most common way to add a parallax effect is by simply adding a jQuery plug-in to a website. Doing this unfortunately has a few disadvantages.
This plug-ins attaches an event handler to the scroll event of the window object. Thus it leads to a large number of events being handled via JavaScript (handling the scroll event can easily cause performance issues and should be considered carefully). To move the mentioned layers, background positions of images get calculated and set to the depending elements, which then additionally causes a lot of DOM manipulations.
Thus we can conclude that parallax done with JavaScript can decrease the scrolling performance of a website quite quickly.
CSS (Cascading Style Sheet) is the other best way to create the parallax effect in the websites. Deferring the parallax effect to CSS removes all these issues and allows the browser to leverage hardware acceleration resulting in almost everything being handled by the compositor. The result is consistent frame rates and perfectly smooths scrolling. You can also combine the effect with other CSS features such as media queries or supports.
Thus Parallax has got that wow factor for sure that will allow us to implement the effect with different new styles in our websites and make them look attractive.
Gauri
In web designing we come across websites with the so called "parallax" effect. Parallax comes from the Greek word (parallaxes) meaning, “alteration”. Parallax effect have been really popular basically includes different layers of images that are moving in different directions or with different speed. This leads to a nice optical effect and keeps the attention of the visitor. Parallax has existed since 1980’s and was used in video game titles and later was used on websites. Today, it is one of the most widely-used designs on the modern Web.
The most common way to add a parallax effect is by simply adding a jQuery plug-in to a website. Doing this unfortunately has a few disadvantages.
This plug-ins attaches an event handler to the scroll event of the window object. Thus it leads to a large number of events being handled via JavaScript (handling the scroll event can easily cause performance issues and should be considered carefully). To move the mentioned layers, background positions of images get calculated and set to the depending elements, which then additionally causes a lot of DOM manipulations.
Thus we can conclude that parallax done with JavaScript can decrease the scrolling performance of a website quite quickly.
CSS (Cascading Style Sheet) is the other best way to create the parallax effect in the websites. Deferring the parallax effect to CSS removes all these issues and allows the browser to leverage hardware acceleration resulting in almost everything being handled by the compositor. The result is consistent frame rates and perfectly smooths scrolling. You can also combine the effect with other CSS features such as media queries or supports.
Thus Parallax has got that wow factor for sure that will allow us to implement the effect with different new styles in our websites and make them look attractive.
No comments:
Post a Comment