Spritely.net How To Build an Animated Header in jQuery Home > CSS, Front End Development, HTML, Javascript > How To Build an Animated Header in jQuery Why not give a little flair to your header. This tutorial will show you how to animate your header’s background image using jQuery to give your website that little extra something. What We Are Building We are going to build a header that animates it’s background. How it’s Going to Work The header background image is going to be super tall. Now that we have our background image, we will also need to create a shadow overlay image. After that it’s just a matter of animating the background image with jQuery so it scrolls. Getting Started The first thing we’re going to need is the HTML in place. Here is the HTML: The CSS We aren’t going to do anything too difficult here. Center the website Give the header a height and a background image Style and position the text within the header Create a shadow overlay Give basic style to the header and navigation bar. Here is the CSS: The jQuery Here is the jQuery:
webdev.stephband.info Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Code a Responsive Navigation Menu Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design. Follow along as we start from scratch and code a simple but effective responsive navigation menu that you can easily modify and reuse in your own projects. What We’re Building If you’re the kind of person who likes to skip ahead, here’s a sneak peek at what we’re building. Demo: Click here to see and tweak it on Dabblet. The HTML Let’s jump right into this project without a bunch of unnecessary fluff. The first step is to decide on some markup. Believe it or not, this one little piece of code had my head spinning when it came time to test. Fortunately, the fix is easy, just drop in the famous html5shiv and you’re good to go (place this in the head portion of your document). Add the List Add The Sub Tag Progress Check Starter Styles Container Styles Border Fix
jQuery Masonry TodoMVC