By
Combine HTML, CSS and JS to add personal Facebook images to interactive web experience
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>
