In this experiment, I seen that by a mixture of the CSS1 properties background-attachment and background-position, 2nd displacement maps can be created and, by scrolling, the displacement map would be applied to completely different components of the feel (a background image).

With displacement maps several cool effects can be done, however thinking that the quality of the displacement map would directly have an effect on the CSS and markup size, selecting an honest example took Maine it slow. i assumed in ocean waves reflections, underwater distortions, light microscope, a rotating Earth… however the ultimate issue I did was good in my desktop: a Fanta will - my favorite drink.

Due the cilindrical form of a will, the displacement map is extremely easy with the parallel projection I did, that the code is extremely very little - below 5kb - and simple to grasp I hope.

Even if this impact is especially CSS1 and a few bits of CSS2 - for the scrolling div, overflow: automobile property -, it's not progressing to add IE6, as a result of it doesn’t support background-attachment: fastened. I’ve tested it and it works in IE8, Firefox 3.5, Chrome 3, hunting expedition four and Opera 10. Also, the code validates.

By Thirumani Raj posted on - 24th Jan 2016

Live Demo