Animated header background with jQuery

Today I’m gonna show you how to make an awesome animate header, using jQuery and CSS.
View it in action in the video below.

Watch in full screen for best results.

lets get started. The first things we have are the options for are background, the scrollSpeed for how fast the background image moves, the step is for the pixel movement per step, the current set to 0, the imageHeight this is the height of our background image, the HeaderHeight for how high we want our header to be.  
Now the CSS. We just set the height and background image that we want. Ok the HTML setup. Just one div is all we need. Now put it all together. So now you can use this awesome animated header in your project.

Tagged with:

View all contributions by


Related Articles


Stay connected with us

Add us on Google+

Follow us on Facebook

Follow us on Twitter

Get updates via RSS

Get email updates


Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">