carmafluxus.com

A small JavaScript animation (plus explanation)

Introduction

user

Max Maier

Max is working as a User Experience Designer at a web and e-learning agency in Stuttgart, Germany. The web has been a second home for him since his teenage years, and he loves to see it become more mature (as he does – somewhat).


LATEST POSTS

Was wir aus einem Lied darüber, wie die Gauchos gehen, lernen können. 16th July, 2014

Guess who’s back… 10th May, 2014

Coding

A small JavaScript animation (plus explanation)

Posted on .

Apart from the websites I have talked you through in my last post, I am of course still engaged in the ongoing work on ökoCheck, our nice wee iOS-App.
If you have checked out the app or if you have watched the walkthrough video (which you can find here), you will know that the app has this feature where you can place a sheet of paper on the screen to learn more about its characteristics.
I was working on something related to that topic and ended up with this little jQuery/JavaScript-based animation which I wanted to share.

The difficulty here was not the actual animation which simply makes use of jQuery’s .animate(), but getting the display to shine through the sheet of paper. An easier option clearly would have been to keep the sheet’s opacity property at something around 0.8. However in then the rest of the background (the iPad, in this case) would have shined through as well, which would have taken away from the general impression.

So I cut the div that acts as the white sheet of paper into four floating inner divs. One to go on the top and on the bottom where there is to be no shine-through at all, and two for the middle segment where there needs to be both a opaque and a transparent area. See the HTML (please note that the code in the fiddle still has German words for id):

HTML (excerpt)



 

 

The height of the boxes can be determined easily once you know the size and position of the iPad graphic below.
Then all that remains to do is to let .animate() scale #sheet-left and #sheet-right while the parent box is moving. Keep in mind that the values are all depending on the objects’ dimensions and need some fiddling to get right.

JavaScript (excerpt)


    $('#sheet-parent').show();
    $('#sheet-parent').animate({
        opacity: 1,
        left: "+=90"
    }, 2000);
    $('#sheet-left').animate({
        width: "25%"
    }, 2000);
    $('#sheet-right').animate({
        width: "75%"
    }, 2000);

I’d love to hear your thoughts on this, so leave a comment or tweet @maxmaier.

profile

Max Maier

Max is working as a User Experience Designer at a web and e-learning agency in Stuttgart, Germany. The web has been a second home for him since his teenage years, and he loves to see it become more mature (as he does – somewhat).

There are no comments.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

View Comments (0) ...
Navigation