News

Create expanding fullscreen backgrounds with jQuery

Recreate the expanding image technique found on the Toyota Dreams web site

toyotadreams

toyotadreams

INSPIRATION: www.toyota-insidedreams.com

Toyota has recently created an excellent online art competition that brings children’s work to life through the power of Vine. The project is a beautiful full-browser experience, which puts the content right at the forefront of this interface.

Once the content has loaded, the user can click on the ‘Project of the day’ – if nothing happens for a few seconds this is presented to them automatically. This takes place through a lovely expanding image that fills the entire screen while the interface is overlaid on top of this image.  Because of the seamless display of the content, this has placed the user experience right in the centre of the design.

GET THE CODE

CREATE THE CLICKABLE EXPANDING IMAGE

We are going to show how to create an image that will animate when clicked and expand to fill the size of the browser, with content appearing over the top. To do this, we need the following HTML structure in the body tag of the code. You can place anything you like in the inner section.

001    <div id=”content”>
002            <img id=”imgFill” src=”img/bg.jpg”>
003            <div id=”inner”><h3>An overlay 
which can be an interface goes 
here</h3></div>
004        </div>

Style the content

In the head section of the document, add the following code for the CSS styles. Here we set the body to take the full size of the page; the image will be set to take the full width of the holding container. The inner section is positioned absolutely to the top corner.

001    <style>
002        body{ font-family: sans-serif; 
margin: 0; width: 100%; height:
100%; background: #b9e0fd;}
003         #imgFill{ width: 100%; height: 
auto;}
004        #inner{ position: absolute; top: 
10px; left: 10px; color: #fff; 
display: none;}

Expand the image

Now we set the position of the <div> that holds the image so that it is in the centre of the display. To do this we position it absolutely, placing it halfway down and across the screen. Then we take off half of its width and height in the margin so it sits in the middle.

001    #content {
002            position: absolute;
003            top: 50%; left: 50%;
004            width: 400px; height: 400px;
005            margin-top: -200px; margin-left:
-200px; 
006            overflow: hidden;     
007        }  
008    </style>

Click the image

We need to enable the image to be clicked, so we add the jQuery library and then open a script tag. We check if the document is ready and then detect if the image has been clicked. If it has, we grab the current width and height of the browser.

001    <script src=”js/jquery.js”></script>
002    <script>
003        $(document).ready(function(){
004            $(“#content”).click(function(){
005                var windowWidth = $(window).
width(); 
006                var windowHeight = $(window).
height();

Animate the change

Now we take the content and animate its height, top position, margin top, left position, margin left and the width of the content. Once this has finished animating, we fade in the ‘inner’ content, which is our overlay.

001                $(‘#content’).animate({
002                    height: windowHeight+’px’,
003                    top: ‘0%’,
004                    marginTop: ‘0px’,
005                    width: windowWidth+’px’,
006                    left: ‘0%’,
007                    marginLeft: ‘0px’
008                }, 1000, function() {
009                    $(‘#inner’).fadeIn(500);
010                });    
011            });
012        });
013    </script>

LEARN MORE NOW WITH WEB DESIGNER. FOR MORE TUTORIALS, INTERVIEWS, RECOMMENDATIONS & EXPERT ADVICE SUBSCRIBE TO WEB DESIGNER AND SAVE 30%.

×