More Related Content Similar to 3D & Animation Effects Using CSS3 & jQuery Similar to 3D & Animation Effects Using CSS3 & jQuery (13) More from Vu Tran Lam (8) 3D & Animation Effects Using CSS3 & jQuery1. 3D & animation effects
implementing animation & 3D using CSS3 & jQuery
presented by Vu Tran Lam
Saturday, March 9, 13
2. the web is less than
9000 days old
http://wwwflickr.com/photos/psd/3149878971
Saturday, March 9, 13
3. 1/3
2012 estimates put the population at about 7 billion inhabitants...
Internet
of
people
on
planet
using
Saturday, March 9, 13
14. yesterday
“go to the computer”
to use the web/Internet
today
“use the mobile”
to use the web/Internet
Saturday, March 9, 13
21. function
MM_timelinePlay(tmLnName,
myID)
{
//v1.2
//Copyright
1998,
1999,
2000,
2001,
2002,
2003,
2004
Macromedia,
Inc.
All
rights
reserved.
var
i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if
(document.MM_Time
==
null)
MM_initTimelines();
//if
*very*
1st
time
tmLn
=
document.MM_Time[tmLnName];
if
(myID
==
null)
{
myID
=
++tmLn.ID;
firstTime=true;}//if
new
call,
incr
ID
if
(myID
==
tmLn.ID)
{
//if
Im
newest
setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
fNew
=
++tmLn.curFrame;
for
(i=0;
i<tmLn.length;
i++)
{
sprite
=
tmLn[i];
if
(sprite.charAt(0)
==
's')
{
if
(sprite.obj)
{
numKeyFr
=
sprite.keyFrames.length;
firstKeyFr
=
sprite.keyFrames[0];
if
(fNew
>=
firstKeyFr
&&
fNew
<=
sprite.keyFrames[numKeyFr-‐1])
{//in
range
keyFrm=1;
for
(j=0;
j<sprite.values.length;
j++)
{
props
=
sprite.values[j];
if
(numKeyFr
!=
props.length)
{
if
(props.prop2
==
null)
sprite.obj[props.prop]
=
props[fNew-‐firstKeyFr];
else
sprite.obj[props.prop2][props.prop]
=
props[fNew-‐firstKeyFr];
}
else
{
while
(keyFrm<numKeyFr
&&
fNew>=sprite.keyFrames[keyFrm])
keyFrm++;
if
(firstTime
||
fNew==sprite.keyFrames[keyFrm-‐1])
{
if
(props.prop2
==
null)
sprite.obj[props.prop]
=
props[keyFrm-‐1];
else
sprite.obj[props.prop2][props.prop]
=
props[keyFrm-‐1];
}
}
}
}
}
}
else
if
(sprite.charAt(0)=='b'
&&
fNew
==
sprite.frame)
eval(sprite.value);
if
(fNew
>
tmLn.lastFrame)
tmLn.ID
=
0;
}
}
}
...in the old days
Saturday, March 9, 13
22. function
MM_timelinePlay(tmLnName,
myID)
{
//v1.2
//Copyright
1998,
1999,
2000,
2001,
2002,
2003,
2004
Macromedia,
Inc.
All
rights
reserved.
var
i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if
(document.MM_Time
==
null)
MM_initTimelines();
//if
*very*
1st
time
tmLn
=
document.MM_Time[tmLnName];
if
(myID
==
null)
{
myID
=
++tmLn.ID;
firstTime=true;}//if
new
call,
incr
ID
if
(myID
==
tmLn.ID)
{
//if
Im
newest
setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
fNew
=
++tmLn.curFrame;
for
(i=0;
i<tmLn.length;
i++)
{
sprite
=
tmLn[i];
if
(sprite.charAt(0)
==
's')
{
if
(sprite.obj)
{
numKeyFr
=
sprite.keyFrames.length;
firstKeyFr
=
sprite.keyFrames[0];
if
(fNew
>=
firstKeyFr
&&
fNew
<=
sprite.keyFrames[numKeyFr-‐1])
{//in
range
keyFrm=1;
for
(j=0;
j<sprite.values.length;
j++)
{
props
=
sprite.values[j];
if
(numKeyFr
!=
props.length)
{
if
(props.prop2
==
null)
sprite.obj[props.prop]
=
props[fNew-‐firstKeyFr];
else
sprite.obj[props.prop2][props.prop]
=
props[fNew-‐firstKeyFr];
}
else
{
while
(keyFrm<numKeyFr
&&
fNew>=sprite.keyFrames[keyFrm])
keyFrm++;
if
(firstTime
||
fNew==sprite.keyFrames[keyFrm-‐1])
{
if
(props.prop2
==
null)
sprite.obj[props.prop]
=
props[keyFrm-‐1];
else
sprite.obj[props.prop2][props.prop]
=
props[keyFrm-‐1];
}
}
}
}
}
}
else
if
(sprite.charAt(0)=='b'
&&
fNew
==
sprite.frame)
eval(sprite.value);
if
(fNew
>
tmLn.lastFrame)
tmLn.ID
=
0;
}
}
}
...in the old days
Saturday, March 9, 13
23. function
MM_timelinePlay(tmLnName,
myID)
{
//v1.2
//Copyright
1998,
1999,
2000,
2001,
2002,
2003,
2004
Macromedia,
Inc.
All
rights
reserved.
var
i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if
(document.MM_Time
==
null)
MM_initTimelines();
//if
*very*
1st
time
tmLn
=
document.MM_Time[tmLnName];
if
(myID
==
null)
{
myID
=
++tmLn.ID;
firstTime=true;}//if
new
call,
incr
ID
if
(myID
==
tmLn.ID)
{
//if
Im
newest
setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
fNew
=
++tmLn.curFrame;
for
(i=0;
i<tmLn.length;
i++)
{
sprite
=
tmLn[i];
if
(sprite.charAt(0)
==
's')
{
if
(sprite.obj)
{
numKeyFr
=
sprite.keyFrames.length;
firstKeyFr
=
sprite.keyFrames[0];
if
(fNew
>=
firstKeyFr
&&
fNew
<=
sprite.keyFrames[numKeyFr-‐1])
{//in
range
keyFrm=1;
for
(j=0;
j<sprite.values.length;
j++)
{
props
=
sprite.values[j];
if
(numKeyFr
!=
props.length)
{
if
(props.prop2
==
null)
sprite.obj[props.prop]
=
props[fNew-‐firstKeyFr];
else
sprite.obj[props.prop2][props.prop]
=
props[fNew-‐firstKeyFr];
}
else
{
while
(keyFrm<numKeyFr
&&
fNew>=sprite.keyFrames[keyFrm])
keyFrm++;
if
(firstTime
||
fNew==sprite.keyFrames[keyFrm-‐1])
{
if
(props.prop2
==
null)
sprite.obj[props.prop]
=
props[keyFrm-‐1];
else
sprite.obj[props.prop2][props.prop]
=
props[keyFrm-‐1];
}
}
}
}
}
}
else
if
(sprite.charAt(0)=='b'
&&
fNew
==
sprite.frame)
eval(sprite.value);
if
(fNew
>
tmLn.lastFrame)
tmLn.ID
=
0;
}
}
}
Ugh, terrible code
...in the old days
Saturday, March 9, 13
24. you could not design graphic
http://www.flickr.com/photos/handwrite/3460075040
IMPOSSIBLE
& animation on website...
Saturday, March 9, 13
37. ...too many HTTP requests
provide alternates?
unsupported...that's a lot of
JavaScript!
requests...
...is Flash even supported?
does every device support Flash?
...ah, that is Flash!
the right version of
media formats...
Saturday, March 9, 13
38. HTML5 video suitable for
each browser
...screen size?
...available bandwidth?
for each browser...
media format
a couple
c.2000...
fsdfffSaturday, March 9, 13
43. using Canvas
<html>
<head>...</head>
<body>
<h1>Page
Heading</h1>
<p>Lorem
ipsum...</p>
<canvas
id="picture1"
width="400"
height="300"/>
<p>Lorem
ipsum...</p>
</body>
</html>
Page Heading
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. orem
ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. orem
ipsum dolor sit amet, consectetur adipisicing elit, sed do
Saturday, March 9, 13
44. What is the difference between 2 logos?
Canvas logo PNG logo
Saturday, March 9, 13
54. building a Box with 3DTransforms
x
z
y
.package
>
div:nth-‐child(1)
{
-‐webkit-‐transform:translateZ(200px);
}
Saturday, March 9, 13
55.
x
z
y
.package
>
div:nth-‐child(2)
{
-‐webkit-‐transform:rotateY(90deg);
}
building a Box with 3DTransforms
Saturday, March 9, 13
56. x
z
y
-‐webkit-‐transform:
rotateY(90deg)
translateZ(200px);
.package
>
div:nth-‐child(2)
{
}
building a Box with 3DTransforms
Saturday, March 9, 13
57. x
z
y
-‐webkit-‐transform:
rotateY(90deg)
translateZ(200px);
.package
>
div:nth-‐child(2)
{
}
building a Box with 3DTransforms
Saturday, March 9, 13
68. rotating a Box
<div
class=“package”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Saturday, March 9, 13
75. rotating a Box
.package
{
-‐webkit-‐transition:-‐webkit-‐transform
1s;
}
.package.right_side
{
-‐webkit-‐transform:rotateY(-‐90deg);
}
class=“package
right_side”
Saturday, March 9, 13
76. rotating a Box
.package
{
-‐webkit-‐transition:-‐webkit-‐transform
1s;
}
.package.right_side
{
-‐webkit-‐transform:rotateX(-‐90deg);
}
class=“package”
Saturday, March 9, 13
77. rotating a Box
.package
{
-‐webkit-‐transition:-‐webkit-‐transform
1s;
}
.package.inside
{
-‐webkit-‐transform:rotateX(-‐90deg);
}
class=“package
inside”
Saturday, March 9, 13
84. 25%
{
}
50%
{
}
100%
{
}
}
@-‐webkit-‐keyframes
stamp-‐it
{
stamp keyframe animation
Saturday, March 9, 13
85. 25%
{
}
50%
{
}
100%
{
top:30px;
right:30px;
}
}
@-‐webkit-‐keyframes
stamp-‐it
{
stamp keyframe animation
Saturday, March 9, 13
86. 25%
{
-‐webkit-‐transform:translateZ(200px)
rotateY(-‐45deg)
rotateX(-‐30deg);
}
50%
{
-‐webkit-‐transform:translateZ(300px)
rotateY(-‐45deg)
rotateX(-‐30deg);
}
100%
{
top:30px;
right:30px;
-‐webkit-‐transform:rotate(-‐5deg);
@-‐webkit-‐keyframes
stamp-‐it
{
stamp keyframe animation
}
Saturday, March 9, 13
87. 25%
{
-‐webkit-‐transform:translateZ(200px)
rotateY(-‐45deg)
rotateX(-‐30deg);
}
50%
{
-‐webkit-‐transform:translateZ(300px)
rotateY(-‐45deg)
rotateX(-‐30deg)
scale(2);
}
100%
{
top:30px;
right:30px;
-‐webkit-‐transform:rotate(-‐5deg);
@-‐webkit-‐keyframes
stamp-‐it
{
stamp keyframe animation
}
Saturday, March 9, 13
90. animation fill mode
0%
{
background-‐color:
orange;
}
50%
{
background-‐color:
white;
}
100%
{
background-‐color:
orange;
}
}
div.square
{
width:100px;
height:100px;
-‐webkit-‐animation:pulse
2s;
-‐webkit-‐animation-‐delay:1s;
}
@-‐webkit-‐keyframes
pulse
{
Saturday, March 9, 13
91. 2 second pulse
1 second delay
animation fill mode
0%
{
background-‐color:
orange;
}
50%
{
background-‐color:
white;
}
100%
{
background-‐color:
orange;
}
}
div.square
{
width:100px;
height:100px;
-‐webkit-‐animation:pulse
2s;
-‐webkit-‐animation-‐delay:1s;
}
@-‐webkit-‐keyframes
pulse
{
Saturday, March 9, 13
92. 2 second pulse
1 second delay
animation fill mode
0%
{
background-‐color:
orange;
}
50%
{
background-‐color:
white;
}
100%
{
background-‐color:
orange;
}
}
div.square
{
width:100px;
height:100px;
-‐webkit-‐animation:pulse
2s;
-‐webkit-‐animation-‐delay:1s;
-‐webkit-‐animation-‐fill-‐mode:backwards;
}
@-‐webkit-‐keyframes
pulse
{
Saturday, March 9, 13
100. keyframe animation with multiple keyframes
.box
{
background-‐color:white;
-‐webkit-‐animation:fade
1s;
}
@-‐webkit-‐keyframes
fade
{
from
{
background-‐color:white;
}
50%
{
background-‐color:
cyan
}
to
{
background-‐color:orange;
}
}
Saturday, March 9, 13
104. ... and in the real life
Saturday, March 9, 13
116. go to the heaven...
Saturday, March 9, 13