By
INSPIRATION: www.makeyourmoneymatter.org
New York-based digital agency Firstborn, were approached by PSCU who wanted to introduce community-minded people of the 21st Century to the benefits of credit unions over big banks.
In response to this, Firstborn launched the “Make Your Money Matter” campaign to highlight the positive social impact that joining a credit union can make. The heart of the campaign is the online hub, where an interactive narrative experience pushes the boundaries of digital storytelling. The illustrated story follows the journey of a typical deposit through big banks in comparison to a journey with credit unions. The story is one that is told through the use of web technology and fantastic illustrations.
Get started
In the body section of the page add the divs shown below. There is one for the preloader which will hide the site content while it loads, we will add some animated clouds inside of this later. Below we’ve added links to HD wallpapers to simulate a download.
001 <div class=’preloader’>. 002 <div class=”clouds”></div> 003 </div> 004 <div> 005 <img src=’http://www.hdwallpapersinn.com/wp-content/ uploads/2014/08/5TG794xTx.jpg’/> 006 <img src=’http://www. hdwallpapersinn.com/wp-content/uploads/2014/08/desktop-backgrounds-8124-8572-hd-wallpapers.jpg’/> 007 </div>
Add the CSS
In the head section of the page add the CSS shown which will set the page background colour. Then place the preloader above the rest of the page with a background colour so that it hides the loading.
001 <style>
002 html,body {
003 background: #e8e6c2;
004 padding: 0;
005 margin: 0;
006 text-align: center;
007 }
008 .preloader {
009 display: block;
010 position: fixed;
011 width: 100%; height: 100%;
012 z-index: 9999; top: 0;
013 background: #e8e6c2;
014 }
Animate the clouds
Now we will add some clouds inside of the preloader, we will animate this later from JavaScript by moving the background position of the image. Note how the image is set to repeat as this will continuously scroll the background. We make the corners of this round with the border-radius property.
001 .clouds{
002 background:url(img/clouds.
jpg) repeat 0 bottom;
003 width:300px; height:300px;
004 margin: 0 auto;
005 display: block;
006 border-radius: 50%;
007 position: relative;
008 top: 50%;
009 transform: translateY(-50%);
010 }
011 </style>
Start the JS
We now create a link to the jQuery library and then we set the properties for our scrolling. The function ‘bgscroll’ handles the movement of the background position by manipulating CSS properties.
001 <script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/
jquery/1.10.1/jquery.min.js”></script>
002 <script>
003 var scrollSpeed = 30;
004 var current = 0;
005 var direction = ‘h’;
006 function bgscroll(){
007 current -= 3;
008 $(‘div.clouds’).
css(“backgroundPosition”, (direction
== ‘h’) ? current+”px 0” : “0 “ +
current+”px”); }
Check the loading
We use the JavaScript command to setInterval to call the bgscroll function. Finally we detect if the window has finished loading, when it has we fade out the preloader so the rest of the page is fully visible in the browser window.
001 setInterval(bgscroll, scrollSpeed);
002 $(window).load(function(){
003 $(‘.preloader’).fadeOut();
004 });
005 </script>
006 setInterval(draw, 25);
007 </script>
