Swimming Diver CSS3 Effect – animation

Ready to add another great CSS3 effect to your website? Remember that CSS3 properties are not yet W3C standards and implementation of them in the main browsers are far from finished. The best browser to view this effect is Google Chrome (I have version 21) but truth be told it should be viewed amazingly in all browsers (they just have different pace in improving their browsers engines). This tutorial demo looks also great in the browser software  provided by my smartphone (HTC).  

DEMO: http://yokowebdesign.co.uk/demo/diver_tutorial/

DOWNLOAD the files: http://yokowebdesign.co.uk/demo/diver_tutorial.rar

———————————————————————————– 

EXPLANATION:

The effect consists of three separate images of the diver ( torso and two legs), HTML markup and CSS(3) properties. Below is the HTML code that constructs the diver: 

HTML – Diver

<div id="swimming_diver_area">
	<div class='diver'>
		<div class="left leg1">
			<div class="left foot"></div>
		</div> <!-- left arm -->

		<div class="right leg2">
			<div class="right foot"></div>
		</div> <!-- right leg -->

		<div class="torso_diver"></div> <!-- torso -->
	</div>
</div>

The resource css code contains vendor prefixes (e.g. -moz-, -o-) before almost each CSS3 property, because the implementation of the new CSS3 properties are done individually by main browsers. Hopefully all this nonsense ( prefixes) will be soon all behind us and we will be able to enjoy using simple property names. In this tutorial to shorten the code below I adhere just to the -webkit- prefix.

Here is the area that the diver moves on:

CSS – Diver area

div#swimming_diver_area
{
    /*border: 1px solid green; */
    float: left;
    margin: -180px 0 500px 340px;
    height: 150px;
    position: relative;

    animation-name: moving_green_box_diver;
    animation-duration: 45s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    -webkit-animation-name: moving_green_box_diver;
    -webkit-animation-duration: 45s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
 }

CSS3 Animation-Timing-Function – property specifies the speed curve of the animation ( in other words it defines the time an animation uses to change from one set of css styles to another). Value linear  –   sets the animation to play with the same speed from beginning to end. There are other values that you may want to implement for your animation (http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp).

CSS – Diver

.diver
{
    top: 50px; left: 350px;
    animation-name: animation_diver;
    -webkit-animation-name: animation_diver;
}
.diver, .diver div
{
    background-repeat: no-repeat;

    animation-duration: 1750ms;
    animation-iteration-count: infinite; 

    -webkit-animation-duration: 1750ms;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes animation_diver
{
   0%   { transform: rotate(5deg) translate( 3px,   0px);
          -webkit-transform: rotate(5deg) translate( 3px, 0px);}
   25%  { transform:  rotate(5deg) translate(-3px, -2px);
          -webkit-transform: rotate(5deg) translate(-3px, -2px);}
   50%  { transform:  rotate(5deg) translate( 3px,   0px);
          -webkit-transform: rotate(5deg) translate( 3px,  0px);}
   75%  { transform:  rotate(5deg) translate(-3px, -2px);
          -webkit-transform: rotate(5deg) translate(-3px, -2px);}
   100% { transform: rotate(5deg) translate( 3px,   0px);
          -webkit-transform: rotate(5deg) translate( 3px,  0px);}
}
@-webkit-keyframes moving_green_box_diver
{
    0%   {  -webkit-transform: translateX(500px);}
    100% {  -webkit-transform: translateX(-800px);}
}

The images that construct a diver are set as a background image (in css) to the particular body part (in html).

.torso_diver
{
    /*border: 1px solid violet; */
    position: relative;
    margin: -162px 0 0 20px;
    width: 150px;
    height: 150px;
    background-image: url(images/diver_torso.png);
}

/*=============  LEGS  ======================*/
.leg1, .leg2
{
    /*border: 1px solid orange; */
    top: -10px;
    left: 60px;
    transform-origin: 20px 10px;
    -webkit-transform-origin: 20px 10px;    
}
.right.leg2
{
    /*border: 1px solid black;*/
    position: relative;
    margin: -8px 0 0 5px;
    animation-name: animation_right_foot;
    -webkit-animation-name: animation_right_foot;
}
.left.leg1
{
    /*border: 1px solid yellow; */
    position: relative;
    top: 87px;
    left: 65px;
    animation-name: animation_left_foot;
    -webkit-animation-name: animation_left_foot;
}
.foot
{
    /*border: 1px solid blue;*/
    height: 105px;
    width: 57px;
}
.right.foot
{
    /*border: 1px solid purple; */
    background-image: url(images/leg_right2.png);
    position:relative;
    margin: 0 0 0 15px;
}
.left.foot
{
    /*border: 1px solid pink; */
    background-image: url(images/leg_left2.png);
    position:relative;
    margin: 0 0 0 15px;
 }

/* setting proper z-indexes so that legs show up correctly */

div.right.leg2 { z-index: 6; }
div.torso_diver { z-index: 0; }
div.left.leg1 { z-index: -3; }

 CSS z-index property specifies the stack order of an element. In this case right leg is in front then there is the torso and in the bottom is left leg. Below is the final animation for the legs.

@-webkit-keyframes animation_right_foot
{
    0%   { -webkit-transform: rotate(16deg);}
    50%  { -webkit-transform: rotate(-15deg);}
    100% { -webkit-transform: rotate(16deg);}
}

 

@-webkit-keyframes animation_left_foot
{
    0%   { -webkit-transform:  rotate(-15deg);}
    50%  { -webkit-transform:  rotate(26deg);}
    100% { -webkit-transform:  rotate(-15deg);}
}

 Do you think you would use this CSS3 effect? Feel free to comment on it. Toodeloo! Yoko

Psssss … The next entry will focus on jQuery.

———————————————————————

Inspirational resources: http://andrew-hoyer.com/experiments/walking/

5 thoughts on “Swimming Diver CSS3 Effect – animation

  1. You’re actually a good webmaster. The website loading velocity is incredible. It sort of feels that you’re doing any distinctive trick. Furthermore, The contents are masterwork. you have performed a wonderful process on this matter!

  2. Hello you have a fantastic website over here! Thanks for posting this interesting stuff for us! If you keep up the good work I’ll visit your website again. Thanks!

  3. I think this is a powerfull weblog with a lot interesting topics. And i just wanna say thnx for this. I’ll follow your blog to see if you post more stuff like these!

Leave a Reply

Your email address will not be published. Required fields are marked *