News

Build background transitions with CSS and JS

Discover how to create smooth background transitions on rollover

Build-background-transitions-with-CSS-and-JS

Build background transitions with CSS and JS

inspirationhttp://series.canalsat.fr

Navigation is a subject that fascinates many web designers and here at Web Designer HQ we are obsessed with discovering unique uses of navigation.

Canalsat has released a micro site to show off the series’ that it has aired on its channels. The site is really just a giant list of links, but it’s what Canalsat has done with this that makes it so interesting.

The background of the site is an image but it’s subtly faded so that it remains in the background. When the user rolls over one of the links for the series, the background changes by fading in a new background image and making it scale down in size. The effect works very nicely and makes full use of the background without taking over or distracting from the links in the foreground.

DOWNLOAD TUTORIAL FILES

Get started

We are going to create background transitions between images just like on the Canalsat Series website. In the body section of your page add the following tags. Here we are creating a <div> that holds the images and the links in an unordered list.

001    <div id=”bg”>
002            <img id=”bg-one” src=”images/wsi2.jpg” />
003            <img id=”bg-two” class=”hidden” src=”images/wsi3.jpg” />
004            <img id=”bg-three” class=”hidden” src=”images/wsi.jpg” />
005            <ul>
006            <a href=”#”><li id=”one”>Link One</li></a>
007            <a href=”#”><li id=”two”>Link Two</li></a>
008            <a href=”#”><li id=”three”>Link Three</li></a>
009            </ul>
010        </div> 

Style the content

We need to style the content correctly to make it work, so add these tags to the head section of the page. Here we position the background element, which could easily be 100% the size of the browser. We also position the images and hide all of them but one.

001    <style>
002        #bg {
003            position:relative;
004            height:281px; width:450px;
005            margin:0 auto;
006            background: #000;
007        }
008        img {position:absolute;left:0;}
009        .hidden {display: none;}

Position the menu

Over the top of the images we add the menu, which is the unordered list. Here we position it centrally with a white border underneath it. We’ve added a simple rollover to the actual list but you could also make use of CSS transitions in here too.

001    #bg ul{ 
002                width:450px;
003                position:absolute;
004                list-style: none; text-align: center; 
005                left:0; margin: 0; padding: 0;  
006            }
007            a {text-decoration: none; color: #fff;}
008            li {padding: 20px; border-bottom: 1px solid #fff;}
009            li:hover {background: #000;}    
010        </style>
011    

Start the JavaScript code

Before the closing body tag, let’s link up to jQuery and then we’ll run a ‘document ready’ function to ensure the document has loaded. Here we are grabbing the first background as that is currently displayed – when we rollover other menu items this will fade out.

001    <script src=”js/jquery.min.js”></script>
002        <script>
003            $(function() {
004                var lastOver = $(“#bg-one”);
005                var over;
006    

Add the <div> tags

Now we detect if the mouse has rolled over any of the list elements. If so, we grab the current one and fade in the appropriate background while fading out the last background on display. Save this and test in the browser to see it working properly.

001    $( “li” ).mouseover(function() {
002                    over = “#bg-”+this.id;
003                    $(over).fadeIn(“slow”);
004                    lastOver.fadeOut(“slow”);
005                    lastOver = $(over);
006                });
007            });
008        </script>
009    
×