Posted 17th October 2014 | By ExtraMile

I’m renaming this edition of Technology Hour, “Whizzy Hour”, in honour of what you’re about to see. This month, I’ve worked on an enhancement to one of our recently live projects that we’ve had in mind for quite some time.

The Donna Louise Children’s Hospice, a charity close to our hearts, have been given a lovely new website by us, featuring a complete brand overhaul. The design is very family and child-oriented featuring clouds across the top of the screen and in the background.

During the initial design meeting with the client, some creative thoughts were thrown around. “Wouldn’t it be great if the clouds moved?”. Following this, the design and development team had some of their own ideas. We could bring this to life a little more if the movement involved some user interaction.

We don’t call ourselves ExtraMile for just any reason, so I set out to do some research on how we could achieve this.

Before I delve into the technicals, let’s take a look at the final product >> http://www.donnalouisetrust.org

Bouncy clouds controlled by the user’s mouse movement along with some gently floating clouds in the background!

The clouds sitting at the top of the page use an effect that you may have seen on iOS devices when tilting your smartphone or tablet. This parallax/gryroscope effect creates an illusion as if you’re looking around in that view and adds some dimension too.

To produce this on the web, I’ve enlisted the help of a nifty jQuery plugin, Parallaxify. By Including this script in the site and running .parallaxify(), I can enable this effect for elements on screen.

The static background image featuring the top clouds and background clouds have been replaced with a set of individual elements to sit on top of the blue sky, done by adding some HTML divs containing background images and positioned using CSS.

I then set the distance that I’d like the top clouds to move by adding some data attributes.

Here’s what my final HTML for that particular element looks like:

<div data-parallaxify-background-range-x="50" data-parallaxify-background-range-y="10" class="top-clouds-gyro"></div>

Moving on to the floating clouds in the background, this was done using some CSS3 animation and transforms.

I created two separate float animations (so that the clouds could move at slightly different paces and distances) and applied them individually to my two cloud elements.

Here’s are some CSS snippets for one of my cloud elements and float animations.

.cloud-left {

background:url(../images/cloud-left.png) no-repeat;

width:298px;

height:176px;

position:absolute;

top:70%;

left:15%;

}

 

.float{

animation-name: float;

-webkit-animation-name: float;

animation-duration: 30s;

-webkit-animation-duration: 30s;

animation-iteration-count: infinite;

}

 

@keyframes float {

  from {

   transform: translateX(0%);

  }

  to {

   transform: translateX(100%);

  }

}

 

The code above indicates that the animation above will last for 30 seconds and run on an infinite loop. The translateX property tells the element to move horizontally across the screen from its original position on screen (0%) to the other end of the screen (100%). I experimented with a variety of durations and X percentages for both animations to produce a natural looking effect for the movement of the clouds.

And that’s the basics of the steps I followed for adding some whizziness for the DLT website!

Here it is in action again, in case you missed the link the first time round >> http://www.donnalouisetrust.org

(Best viewed on modern desktop browsers including IE10+)


Written by Anita Mander, Studio Manager and Web Developer at ExtraMile Communications.

At ExtraMile we try to take an hour out each week to look around us at what others do and to gain inspiration and to admire people's creativity. Each post in this series is one staff member's take on the world of web, design and things online. We hope you enjoy it.

extramile

About ExtraMile

A digital marketing agency with international capabilities