Webtips 02 - parallax 01. Create a Parallax Website Header. This tutorial will show you how to create a cool Parallax Website Header using jQuery and the jParallax jQuery plugin.
This is quite a simple experiment and you won’t need any javascript knowledge, just plain old HTML and CSS. However this has the potential to create some really stunning effects. The Files So first of all we will need some javascript files: There I told you this was simple. The Images Before we do anymore its a good idea to create the images we will use in our header. SkySunGrassTree If you don’t know what I’m on about (or you don’t know what the Parallax effect is) have a look at this wikipedia article and you’ll see what I mean. The HTML The HTML is where most of the work is done. <! Pretty simple yeh? First off we include our javascript files that we downloaded. And that’s that really.
The CSS The CSS is almost too simple to mention but I will anyway. Important things to remeber about the CSS are: Conclusion So there you have it. View the Demo Download the ZIP file More? Create a Funky Parallax Background Effect using jQuery. In this tutorial, we’ll be using JQuery to take a horizontally scrolling website and add a parallax scrolling background effect reminiscent of old-school 2D platform games like Sonic the Hedgehog. Tutorial Details Last year, the Silverback App site, designed by Carsonified, created some chatter amongst the design community for its clever use of a parallax scrolling effect seen when resizing the browser window. Like in old 2D platformers like Sonic the Hedgehog, this parallax effect could really come into its own alongside some horizontally scrolling content.
This can be easily achieved using a little jQuery magic! Step 1 – The Skeleton HTML First, we need to create the basic HTML structure we’ll be using. <div id="header"><h1 id="logo">Scrolling Clouds</h1><ul id="menu"><li><a href="#box1" class="link">Home</a></li><li><a href="#box2" class="link">Box 2</a></li><li><a href="#box3" class="link">Box 3</a></li><li><a href="#box4" class="link">Box 4</a></li></ul></div><! Step 2 – Some CSS. Spritely.net. jQuery Parallax 0.2 – Minor updates. 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. Therefore, the simplest way to use jParallax is to make the layers different sizes using CSS. Options Layer Options Events Tips. Using jQuery To Create Parallax Scrolling Backgrounds « Stephen McIntyre.
How to recreate Silverback’s parallax effect. When I was a lad, I remember being wowed by an effect in Sonic the Hedgehog known as parallax scrolling.
Moving my little spiky friend to the right caused the foreground to move past the camera to the left faster than the background, creating a faux-3D view of Green Hill Zone. We can create a similar effect on a web page by fixing semi-transparent background images to different sides of the browser viewport, and at different horizontal percentage positions. In addition to this, blurring some of those images will emulate focus and depth-of-field. The effect can only be seen as the browser window is resized, but I really like the subtlety of this — not everybody will notice it, but it’s like a hidden Easter egg for those who do.
I used this effect with great success on the holding page for Clearleft’s latest project, Silverback. Upfront about IE6 Frankly, this just ain’t gonna happen in IE6. Choosing a suitable scene Creating your layers Creating the parallax Nothing fancy for IE6.