How to create simple parallax effect.

It is really simple to create parallax effect on your site. Add this script to your html head.

<script>        
    function onLoad() {
        window.onscroll = function() {
            var speed = 4.0;
            document.body.style.backgroundPosition = "center " + Math.round(-window.pageYOffset / speed) + "px";
        }
    }   
</script>

In your body tag add -> onload=”onLoad()”. This will automatically start the script on page load. Here is some css you will need for example to work:

body{background: url("/image/bg-texture-1200.png") repeat-x top center; width: 100%;  background-color: #E9F5FA; background-attachment: fixed;}

Leave a Reply

Your email address will not be published. Required fields are marked *