News

Scrolling background parallax tricks

Discover how to to deliver parallax-style scrolling transitions that add 3D-like depth.

Parallaxanimation

inspiration http://andrevv.com

One of the more imitated design hallmarks in recent times is the background animation. Modern web pages are fusing CSS decoration with colour panels and graphics to deliver parallax-style scrolling transitions that add 3D-like depth.
While some utilise script to do weird and wonderful things, many, like Andrew McCarthy’s portfolio site at andrevv.com, innovate by keeping things simple.

So we’ve invited Andrew himself to exclusively explain the basic method he used for the site, purely using < div> frames and background images.

Like he says though, once you’ve sussed the fundamental concept you’ll want to experiment with your own graphics and colours to forge original variations. We’ll give you a head start by introducing a rapid JavaScript-based parallax trick based on the neat demo at http://parascroll.wwwtyro.net plus some inspiring related resources.

TECHNIQUE 01

This technique isn’t necessarily the most practical, but it works great when the objective is to make a memorable impact on the viewer. To achieve best results, a looping animation is recommended, but any animation that is 8–12 frames or more will do the trick. Each frame of the animation will need to be saved as a separate image file (choose the best format for small file sizes).

Frame size

For the effect to work, the height of the frame will need to be big enough to fit the image, but not too much more. The effect is enhanced if each frame can be distinguished by a background color or border.

Fixed background

The key factor of the technique is ‘background-position: fixed’. As the page scrolls, each frame is moving up, while each image is the revealed image in the same spot. The faster the user scrolls, the faster the image will animate.

001 HTML
002 < div class=”container”>
003 < div class=”frame f01”> 
004 < div class=”frame f02”> 
005 ...
006 < div class=”frame f10”>
007 < /div>
008
009 CSS
010 body, html {
011 height: 100%; }
012 .container {
013 height: 100%;
014 position: relative; }
015 .frame {
016 height: 50%;
017 background-position: center;
018 background-attachment: fixed; }
019 .f01 {
020 background-image: url(img/ frame1.gif);
021 background-color: #eee; }
022 .f02 {
023 background-image: url(img/ frame2.gif);
024 background-color: #ddd; }

Repeat and explore

If the animation is looping, just duplicate the ‘frame’ HTML elements many times and you’ll have a very entertaining repeating animation. More importantly, try to think of alternative ways to use this technique and create unique visual effects.

TECHNIQUE 02

Rapid parallax scroll trick

It may not be something andrevv.com uses, but if you want to bring a parallax scrolling feel to your site it needn’t be tough. There is a method using a few lines of JavaScript to change the page body background position as you scroll, utilising the pageYOffset property of the window. It can in fact be applied horizontally as well as vertically, but the effect ultimately makes the page content and background move against each other to form a parallax-style illusion.

Repeating background

Start a basic HTML page with a repeating background image (repeat-xy) that has texture or a distinguishable pattern. Set the CSS background attachment property to fixed and the page height to 150% so it scrolls.

Page content

You need some dummy elements on the page, so here we’ve added three panels containing sample text. Each has a repeating image background but crucially they have opacity properties set semi-transparent.

Scroll function

Add onload=”paraScroll()” to the body tag, open a pair of <script> tags just before the closing body tag. Add the paraScroll() function, itself containing a function called whenever the window is scrolled. Manipulate the document.body.style.backgroundPosition after dividing the window.pageYOffset value: The full code for this step is on the disc.

001 < script>
002 function paraScroll() {
003 window.onscroll = function() {
004 var moveSpeed = 25; // Increase to slow 
005 < /script>
×