3D & Animation Effects Using CSS3 & jQuery

3D & animation eﬀects
implementing animation & 3D using CSS3 & jQuery
presented by Vu Tran Lam
Saturday, March 9, 13

the web is less than
9000 days old
http://wwwﬂickr.com/photos/psd/3149878971

1/3
2012 estimates put the population at about 7 billion inhabitants...
Internet
of
people
on
planet
using

1/3 people has
a smartphone
of

the smartphone era
begins...

brings touch, gestures
iPhone 3G
web
touch
and the real web...
iPhone
2007 2008

20082007 2009
3GiPhone
iPhone 3GS
native apps and
android
apps
the rise of Android...

2008 2009
3G
2010
3GS
2011
4
blackberry
kindle
nook
devices go mainstream
iPhone 5...
with great expectations...
samsung
motorola
htc
LG

web evaluation...

yesterday
“go to the computer”
to use the web/Internet

yesterday
“go to the computer”
today
“use the mobile”

14
small + medium + large

15
one standard for every devices

http://www.ﬂickr.com/photos/aubergene/970367879
...view ﬂash &
video on iDevice?

http://www.flickr.com/photos/aubergene/970367879
no flash or video
but need to find a key...

...in the old days

you could not design graphic
http://www.ﬂickr.com/photos/handwrite/3460075040
IMPOSSIBLE
& animation on website...

http://www.flickr.com/photos/vauvau/3466024918
animation & 3D effects
really bloody difficult...
this technique is

http://www.ﬂickr.com/photos/clairity/1449248189
...we can not ﬁnd a
suitable tree in the forest

http://www.ﬂickr.com/photos/seatbelt67/502255276
hmm...

25
ways...?

26
...need a team

http://www.ﬂickr.com/photos/farleyj/2768941171
Eureka!
HMTL5 & CSS3

welcome to w3c...

29
the next Web Standards

semantic layout
Web forms 2.0
audio & video
2D & 3D drawing

rounded corners
gradient ﬁll
transition & animation
depth content

q
http://www.ﬂickr.com/photos/sporst/3999795549
...let's ﬁrst deal with
HTML5 Canvas & Video
graphic

...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...

HTML5 video suitable for
each browser
...screen size?
...available bandwidth?
for each browser...
media format
a couple
c.2000...
fsdﬀfSaturday, March 9, 13

HTML5 Canvas

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

What is the diﬀerence between 2 logos?
Canvas logo PNG logo

...and demo

q
...let's continue with
3D eﬀect using CSS3

conveying depth with CSS3

transforms
-‐webkit-‐transform:translateY(200px);

transforms
-‐webkit-‐transform:translateY(200px)
rotate(45deg);

building a Box
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div
class=“package”>

x5
building a Box

building a Box with 3DTransforms
z
x
y

z
x
y
.package
>
div:nth-‐child(1)
{
-‐webkit-‐transform:translateZ(200px);
}


x
z

y

.package
>
div:nth-‐child(1)
{
-‐webkit-‐transform:translateZ(200px);
}

x
z
y
.package
>
div:nth-‐child(2)
{
-‐webkit-‐transform:rotateY(90deg);
}

x

z
y
-‐webkit-‐transform:
rotateY(90deg)
translateZ(200px);
.package
>
div:nth-‐child(2)
{
}

52

a 3D Box?

perspective

-webkit-perspective:400px;

adding perspective
-‐webkit-‐perspective:800px;
.package
{
}

3D Box with perspective

q
...let's continue with
transition eﬀect using CSS3

rotating a Box
<div

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>
</div>

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

</div>
</div>
<div
class=“package_container”>

<div
rotating a Box

.package
{
}
rotating a Box

.package
{
}
.package_container
{
}
rotating a Box

.package
{
-‐webkit-‐transform-‐style:preserve-‐3d;
}
.package_container
{
}
rotating a Box

.package
{
}
rotating a Box

.package
{
}
.package.right_side
{
-‐webkit-‐transform:rotateY(-‐90deg);
}
class=“package
right_side”
rotating a Box

rotating a Box
.package
{

-‐webkit-‐transition:-‐webkit-‐transform
1s;
}
.package.right_side
{
-‐webkit-‐transform:rotateY(-‐90deg);
}
class=“package
right_side”

rotating a Box
.package
{

1s;
}
.package.right_side
{
-‐webkit-‐transform:rotateX(-‐90deg);
}
class=“package”

rotating a Box
.package
{

1s;
}
.package.inside
{
-‐webkit-‐transform:rotateX(-‐90deg);
}
class=“package
inside”

applying a Transition without javascript

.sticker
{
background-‐position:-‐30px;
border-‐radius:5px;
}
.sticker:hover
{
background-‐position:0;
border-‐bottom-‐left-‐radius:50%
20px;
box-‐shadow:-‐5px
10px
15px
rgba(0,0,0,0.25);
}
applying a Transition without javascript

transition on hover
background-‐position,
border-‐bottom-‐left-‐radius,
box-‐shadow;
-‐webkit-‐transition-‐duration:1s;
}
.sticker:hover
{
background-‐position:0;
border-‐bottom-‐left-‐radius:50%
20px;
}
.sticker
{
background-‐position:-‐30px;
border-‐radius:5px;
-‐webkit-‐transition-‐property:

stamp keyframe animation
0%
middle
flat
small
100%
top right
rotated
small
25%
flipped
50%
flipped
big

@-‐webkit-‐keyframes

stamp-‐it
{
}
Animation
name

25%
{
}
50%
{
}
100%
{
}
}
stamp-‐it
{

25%
{
}
50%
{
}
100%
{
top:30px;
right:30px;
}
}

stamp-‐it
{

25%
{
-‐webkit-‐transform:translateZ(200px)
rotateY(-‐45deg)
rotateX(-‐30deg);
}
50%
{
rotateY(-‐45deg)
rotateX(-‐30deg);
}
100%
{
top:30px;
right:30px;
-‐webkit-‐transform:rotate(-‐5deg);
stamp-‐it
{
}

25%
{
rotateY(-‐45deg)
rotateX(-‐30deg);
}
50%
{
rotateY(-‐45deg)
rotateX(-‐30deg)
scale(2);
}
100%
{
top:30px;
right:30px;
-‐webkit-‐transform:rotate(-‐5deg);
stamp-‐it
{
}

stamp-‐it
{...}
</style>
<style>

stamp-‐it
{...}
</style>
<style>
<script>
function
onClickHandler(event)
{
var
stampElement
=
/*
get
the
element
*/;
var
stampElement.style.webkitAnimation
=
“stamp-‐it
0.5s”;
}
</script>

animation ﬁll mode
0%
{
background-‐color:
orange;
}
50%
{
white;
}
100%
{
orange;
}
}
div.square
{
width:100px;
height:100px;
-‐webkit-‐animation:pulse
2s;
-‐webkit-‐animation-‐delay:1s;
}
pulse
{

2 second pulse
1 second delay
0%
{
orange;
}
50%
{
white;
}
100%
{
orange;
}
}
div.square
{
width:100px;
height:100px;
2s;
}
pulse
{

2 second pulse
1 second delay
0%
{
orange;
}
50%
{
white;
}
100%
{
orange;
}
}
div.square
{
width:100px;
height:100px;
2s;
-‐webkit-‐animation-‐fill-‐mode:backwards;
}
pulse
{

stamp-‐it
{...}
<script>
function

onClickHandler(event)

{
var
stampElement
=
/*
code
to
get
the
element
*/;
var
stampElement.style.webkitAnimation
=
“stamp-‐it
0.5s
forwards”;
}
</script
<style>
</style>

progress indicator
0%
{
-‐webkit-‐transform:rotate(0);
100%
{
-‐webkit-‐transform:rotate(360deg);
}
outer
{

progress indicator
0%
{
-‐webkit-‐transform:rotate(5);
100%
{
-‐webkit-‐transform:rotate(365deg);
}
inner
{

.outer_paw
{
-‐webkit-‐animation:outer
5s
infinite;
}
.inner_paw
{
-‐webkit-‐animation:inner
5s
0.4s
infinite;
}
progress indicator

.outer_paw
{
-‐webkit-‐animation:outer
5s
infinite;
-‐webkit-‐animation-‐timing-‐function:steps(10);
}
.inner_paw
{
-‐webkit-‐animation:inner
5s
0.4s
infinite;
-‐webkit-‐animation-‐timing-‐function:steps(10);
}
SteppedTiming function

applying a transition
.box
{
background-‐color:white;
-‐webkit-‐transition:opacity
1s;
}
.box:hover
{
background-‐color:orange;
}

.box
{
-‐webkit-‐animation:fade
1s;
}
fade
{
from
{
}
from
{
}
}
applying a keyframe animation

keyframe animation with multiple keyframes
.box
{
1s;
}
fade
{
from
{
}
50%
{
cyan
}
to
{
}
}

repeating keyframe animation
.box
{
1s;
-‐webkit-‐animation-‐iteration-‐count:infinite;
}
fade
{
from
{
}
50%
{
cyan
}
to
{
}
}

http://www.ﬂickr.com/photos/aturkus/4040454167

... and in the real life

web showcases

responsive websites
suitable for any device

jQuery frameworks

jQueryUI frameworks

Jaws HTML5 Javascript Game Lib
web game frameworks

go to the heaven...

mobile development

references
Apple Safari Developer
https://developer.apple.com/devcenter/
safari/index.action
Smashing Magazine
Graphic, CSS and Web design
http://www.smashingmagazine.com
Ben Frain
Everything needed to code websites
in HTML5 and CSS3 that are
responsive to every device
Tuts+
Great web design tutorials and articles
http://webdesign.tutsplus.com

many thanks
to
thank you
lamvt@fpt.com.vn
please
say
tutsplus
https://developer.apple.com
developer
https://tutsplus.com
xin
chào
http://www.smashingmagazine.com
smashingmagazine

3D & Animation Effects Using CSS3 & jQuery

Recommended

More Related Content

Viewers also liked (20)

Similar to 3D & Animation Effects Using CSS3 & jQuery (14)

More from Vu Tran Lam (8)

Recently uploaded (20)

3D & Animation Effects Using CSS3 & jQuery