News

Use JS to create interactive panning environments

Combine HTML, CSS and JS to add personal Facebook images to interactive web experience

Panning environments

Combine HTML, CSS and JS to add personal Facebook images to interactive web experience

Panning environments


inspiration: thebuildingofmemories.com | Get the code

Coca-Cola and Legwork Studio have built a wonderful site that enables the user to connect their own images from Facebook. This rich interactive world pans as the user moves around and through the environment.

The user’s Facebook images are mapped into the rich environment and presented as photos on the walls in rooms of the buildings, highlighting their Facebook moments. The user then guides a red balloon by moving the mouse and they start to move through this beautifully illustrated environment until they reach the top of the building. Each floor represents a different section of the user’s past year.


TECHNIQUE

Link to libraries

In the head section of the page link up to the jQuery library and then link up to the Motio plugin for this. You can download the plugin from http://darsa.in/motio. Place the plugin in a JS folder in your site root.

001 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
002 <script src="js/motio.min.js"></    script>

Style section

We now want to set the style for the elements we will use. First, we will set the width and height of the container for the image, then we set the image frame that will have the background image within it.

001 <style>
002     #panning{
003         width: 850px; height: 500px;
004         margin: 0 auto;
005 }
006 .frame{
007     width:100%; height: 100%;
008     background-image: url(img/bg.jpg);
009     }
010 </style>

Body elements

Now we move into the body section of the page and add the two div tags that we created the style for. These will hold the image that we will pan around.

001 <div id="panning">
002 <div class="frame"></div>
003 </div>

Motio settings

Just below the div in the body section add the following script tag. This finds the panning div and the frame, then sets up the movement speed. You can specify the image width and height here as well.

001 <script type="text/javascript">
002     var $example = $('#panning');
003     var frame = $example.find('.    frame')[0];
004     var offset = $example.offset();
005     var motio = new Motio(frame, {
006     fps: 60,
007     bgWidth: 1024,
008     bgHeight: 1024
009 });

Mouse movement

Now add the mouse movement to the image. We set Motio to play if the mouse is inside or pause if out. When the mouse moves we set the image to scroll based on the speed of the mouse movement.

001 $example.on('mouseenter         mouseleave', function (event) {
002     if (event.type === 'mouseenter') {
003     motio.play(); 
004  } else {
005  motio.pause();
006  }
007 });
008     $example.on('mousemove',     function (event) {
009     motio.set('speedX', event.pageX -     offset.left - motio.width / 2);
010     motio.set('speedY', event.pageY - offset.top - motio.height / 2);
011  });  </script>

 

×