Download - 3D & Animation Effects Using CSS3 & jQuery
![Page 1: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/1.jpg)
3D & animation effectsimplementing animation & 3D using CSS3 & jQuery
presented by Vu Tran LamSaturday, March 9, 13
![Page 2: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/2.jpg)
the web is less than
9000 days old
http://wwwflickr.com/photos/psd/3149878971
Saturday, March 9, 13
![Page 3: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/3.jpg)
1/3
2012 estimates put the population at about 7 billion inhabitants...
Internet
ofpeople
onplanet
using
Saturday, March 9, 13
![Page 4: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/4.jpg)
1/3 people has a smartphone
of
Saturday, March 9, 13
![Page 5: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/5.jpg)
the smartphone era begins...
Saturday, March 9, 13
![Page 6: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/6.jpg)
brings touch, gestures
iPhone 3Gweb
touch
and the real web...
iPhone
2007 2008
Saturday, March 9, 13
![Page 7: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/7.jpg)
20082007 2009
3GiPhoneiPhone 3GS
native apps and
android apps
the rise of Android...
Saturday, March 9, 13
![Page 8: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/8.jpg)
2008 2009
3G
2010
3GS
2011
4
blackberry kindle nook
devices go mainstream
iPhone 5...
with great expectations...
samsungmotorola
htcLG
Saturday, March 9, 13
![Page 9: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/9.jpg)
web evaluation...
Saturday, March 9, 13
![Page 10: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/10.jpg)
Saturday, March 9, 13
![Page 11: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/11.jpg)
Saturday, March 9, 13
![Page 12: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/12.jpg)
Saturday, March 9, 13
![Page 13: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/13.jpg)
yesterday
“go to the computer”to use the web/Internet
Saturday, March 9, 13
![Page 14: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/14.jpg)
yesterday
“go to the computer”to use the web/Internet
today
“use the mobile”to use the web/Internet
Saturday, March 9, 13
![Page 15: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/15.jpg)
14
small + medium + large
Saturday, March 9, 13
![Page 16: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/16.jpg)
15
one standard for every devices
Saturday, March 9, 13
![Page 17: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/17.jpg)
Saturday, March 9, 13
![Page 18: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/18.jpg)
http://www.flickr.com/photos/aubergene/970367879
...view flash &video on iDevice?
Saturday, March 9, 13
![Page 19: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/19.jpg)
http://www.flickr.com/photos/aubergene/970367879
no flash or video but need to find a key...
Saturday, March 9, 13
![Page 20: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/20.jpg)
...in the old days
Saturday, March 9, 13
![Page 21: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/21.jpg)
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
![Page 22: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/22.jpg)
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
![Page 23: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/23.jpg)
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
![Page 24: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/24.jpg)
you could not design graphic
http://www.flickr.com/photos/handwrite/3460075040
IMPOSSIBLE
& animation on website...
Saturday, March 9, 13
![Page 25: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/25.jpg)
http://www.flickr.com/photos/vauvau/3466024918
animation & 3D effects
really bloody difficult...this technique is
Saturday, March 9, 13
![Page 26: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/26.jpg)
http://www.flickr.com/photos/clairity/1449248189
...we can not find asuitable tree in the forest
Saturday, March 9, 13
![Page 27: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/27.jpg)
http://www.flickr.com/photos/seatbelt67/502255276
hmm...
Saturday, March 9, 13
![Page 28: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/28.jpg)
25
ways...?
Saturday, March 9, 13
![Page 29: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/29.jpg)
26
...need a team
Saturday, March 9, 13
![Page 30: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/30.jpg)
http://www.flickr.com/photos/farleyj/2768941171
Eureka!
HMTL5 & CSS3
Saturday, March 9, 13
![Page 31: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/31.jpg)
welcome to w3c...
Saturday, March 9, 13
![Page 32: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/32.jpg)
29
the next Web Standards
Saturday, March 9, 13
![Page 33: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/33.jpg)
Saturday, March 9, 13
![Page 34: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/34.jpg)
semantic layout
Web forms 2.0
audio & video
2D & 3D drawing
Saturday, March 9, 13
![Page 35: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/35.jpg)
rounded corners
gradient fill
transition & animation
depth content
Saturday, March 9, 13
![Page 36: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/36.jpg)
q
http://www.flickr.com/photos/sporst/3999795549
...let's first deal withHTML5 Canvas & Video
graphic
Saturday, March 9, 13
![Page 37: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/37.jpg)
...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
![Page 38: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/38.jpg)
HTML5 video suitable for each browser
...screen size?
...available bandwidth?
for each browser...media format
a couple
c.2000...
fsdfffSaturday, March 9, 13
![Page 39: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/39.jpg)
Saturday, March 9, 13
![Page 40: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/40.jpg)
Saturday, March 9, 13
![Page 41: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/41.jpg)
Saturday, March 9, 13
![Page 42: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/42.jpg)
HTML5 Canvas
Saturday, March 9, 13
![Page 43: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/43.jpg)
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 doeiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed do
Saturday, March 9, 13
![Page 44: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/44.jpg)
What is the difference between 2 logos?
Canvas logo PNG logo
Saturday, March 9, 13
![Page 45: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/45.jpg)
...and demo
Saturday, March 9, 13
![Page 46: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/46.jpg)
q
http://www.flickr.com/photos/sporst/3999795549
...let's continue with 3D effect using CSS3
Saturday, March 9, 13
![Page 47: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/47.jpg)
conveying depth with CSS3
Saturday, March 9, 13
![Page 48: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/48.jpg)
transforms
-‐webkit-‐transform:translateY(200px);
Saturday, March 9, 13
![Page 49: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/49.jpg)
transforms
-‐webkit-‐transform:translateY(200px) rotate(45deg);
Saturday, March 9, 13
![Page 50: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/50.jpg)
building a Box
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class=“package”>
Saturday, March 9, 13
![Page 51: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/51.jpg)
x5
building a Box
Saturday, March 9, 13
![Page 52: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/52.jpg)
building a Box with 3DTransforms
z
x
y
Saturday, March 9, 13
![Page 53: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/53.jpg)
z
x
y
.package > div:nth-‐child(1) {-‐webkit-‐transform:translateZ(200px);
}
building a Box with 3DTransforms
Saturday, March 9, 13
![Page 54: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/54.jpg)
building a Box with 3DTransforms
x
z
y
.package > div:nth-‐child(1) {-‐webkit-‐transform:translateZ(200px);
}
Saturday, March 9, 13
![Page 55: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/55.jpg)
x
z
y
.package > div:nth-‐child(2) {-‐webkit-‐transform:rotateY(90deg);
}
building a Box with 3DTransforms
Saturday, March 9, 13
![Page 56: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/56.jpg)
x
z
y
-‐webkit-‐transform:rotateY(90deg) translateZ(200px);
.package > div:nth-‐child(2) {
}
building a Box with 3DTransforms
Saturday, March 9, 13
![Page 57: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/57.jpg)
x
z
y
-‐webkit-‐transform:rotateY(90deg) translateZ(200px);
.package > div:nth-‐child(2) {
}
building a Box with 3DTransforms
Saturday, March 9, 13
![Page 58: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/58.jpg)
52
building a Box with 3DTransforms
Saturday, March 9, 13
![Page 59: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/59.jpg)
a 3D Box?
Saturday, March 9, 13
![Page 60: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/60.jpg)
perspective
Saturday, March 9, 13
![Page 61: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/61.jpg)
-webkit-perspective:400px;
Saturday, March 9, 13
![Page 62: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/62.jpg)
-webkit-perspective:800px;
Saturday, March 9, 13
![Page 63: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/63.jpg)
-webkit-perspective:8000px;
Saturday, March 9, 13
![Page 64: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/64.jpg)
adding perspective
-‐webkit-‐perspective:800px;
.package {
}
Saturday, March 9, 13
![Page 65: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/65.jpg)
3D Box with perspective
Saturday, March 9, 13
![Page 66: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/66.jpg)
...and demo
Saturday, March 9, 13
![Page 67: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/67.jpg)
q
http://www.flickr.com/photos/sporst/3999795549
...let's continue with transition effect using CSS3
Saturday, March 9, 13
![Page 68: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/68.jpg)
rotating a Box
<div class=“package”> <div></div> <div></div> <div></div> <div></div> <div></div>
</div>
Saturday, March 9, 13
![Page 69: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/69.jpg)
<div></div><div></div><div></div><div></div><div></div>
</div></div>
<div class=“package_container”> <div class=“package”>
rotating a Box
Saturday, March 9, 13
![Page 70: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/70.jpg)
.package {-‐webkit-‐perspective:800px;
}
rotating a Box
Saturday, March 9, 13
![Page 71: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/71.jpg)
.package {
}
.package_container {-‐webkit-‐perspective:800px;
}
rotating a Box
Saturday, March 9, 13
![Page 72: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/72.jpg)
.package {-‐webkit-‐transform-‐style:preserve-‐3d;
}
.package_container {-‐webkit-‐perspective:800px;
}
rotating a Box
Saturday, March 9, 13
![Page 73: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/73.jpg)
.package {}
rotating a Box
Saturday, March 9, 13
![Page 74: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/74.jpg)
.package {}
.package.right_side {-‐webkit-‐transform:rotateY(-‐90deg);
}
class=“package right_side”
rotating a Box
Saturday, March 9, 13
![Page 75: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/75.jpg)
rotating a Box
.package { -‐webkit-‐transition:-‐webkit-‐transform 1s;}
.package.right_side {-‐webkit-‐transform:rotateY(-‐90deg);
}
class=“package right_side”
Saturday, March 9, 13
![Page 76: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/76.jpg)
rotating a Box
.package { -‐webkit-‐transition:-‐webkit-‐transform 1s;}
.package.right_side {-‐webkit-‐transform:rotateX(-‐90deg);
}
class=“package”
Saturday, March 9, 13
![Page 77: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/77.jpg)
rotating a Box
.package { -‐webkit-‐transition:-‐webkit-‐transform 1s;}
.package.inside {-‐webkit-‐transform:rotateX(-‐90deg);
}
class=“package inside”
Saturday, March 9, 13
![Page 78: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/78.jpg)
applying a Transition without javascript
Saturday, March 9, 13
![Page 79: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/79.jpg)
.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
Saturday, March 9, 13
![Page 80: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/80.jpg)
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:
Saturday, March 9, 13
![Page 81: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/81.jpg)
stamp keyframe animation
0%
middle
flat
small
100%
top right
rotated
small
25%
flipped
50%
flipped
big
Saturday, March 9, 13
![Page 82: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/82.jpg)
@-‐webkit-‐keyframes
stamp keyframe animation
Saturday, March 9, 13
![Page 83: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/83.jpg)
@-‐webkit-‐keyframes stamp-‐it {
}
Animation name
stamp keyframe animation
Saturday, March 9, 13
![Page 84: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/84.jpg)
25% {
}50% {
}100% {
}
}
@-‐webkit-‐keyframes stamp-‐it {
stamp keyframe animation
Saturday, March 9, 13
![Page 85: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/85.jpg)
25% {
}50% {
}100% {
top:30px;right:30px;
}
}
@-‐webkit-‐keyframes stamp-‐it {
stamp keyframe animation
Saturday, March 9, 13
![Page 86: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/86.jpg)
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
![Page 87: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/87.jpg)
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
![Page 88: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/88.jpg)
@-‐webkit-‐keyframes stamp-‐it {...}
</style>
<style>
stamp keyframe animation
Saturday, March 9, 13
![Page 89: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/89.jpg)
@-‐webkit-‐keyframes stamp-‐it {...}
</style>
<style>
stamp keyframe animation
<script>function onClickHandler(event) {
var stampElement = /* get the element */;var stampElement.style.webkitAnimation = “stamp-‐it 0.5s”;
}</script>
Saturday, March 9, 13
![Page 90: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/90.jpg)
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
![Page 91: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/91.jpg)
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
![Page 92: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/92.jpg)
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
![Page 93: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/93.jpg)
@-‐webkit-‐keyframes stamp-‐it {...}
<script>function onClickHandler(event) {
var stampElement = /* code to get the element */;var stampElement.style.webkitAnimation = “stamp-‐it 0.5s forwards”;
}</script
<style>
animation fill mode
</style>
Saturday, March 9, 13
![Page 94: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/94.jpg)
progress indicator
0% {-‐webkit-‐transform:rotate(0);
100% {-‐webkit-‐transform:rotate(360deg);
}
@-‐webkit-‐keyframes outer {
Saturday, March 9, 13
![Page 95: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/95.jpg)
progress indicator
0% {-‐webkit-‐transform:rotate(5);
100% {-‐webkit-‐transform:rotate(365deg);
}
@-‐webkit-‐keyframes inner {
Saturday, March 9, 13
![Page 96: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/96.jpg)
.outer_paw{
-‐webkit-‐animation:outer 5s infinite;}
.inner_paw{
-‐webkit-‐animation:inner 5s 0.4s infinite;}
progress indicator
Saturday, March 9, 13
![Page 97: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/97.jpg)
.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
Saturday, March 9, 13
![Page 98: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/98.jpg)
applying a transition
.box{
background-‐color:white;-‐webkit-‐transition:opacity 1s;
}
.box:hover{
background-‐color:orange;}
Saturday, March 9, 13
![Page 99: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/99.jpg)
.box{
background-‐color:white;-‐webkit-‐animation:fade 1s;
}
@-‐webkit-‐keyframes fade{
from { background-‐color:white; }from { background-‐color:orange; }
}
applying a keyframe animation
Saturday, March 9, 13
![Page 100: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/100.jpg)
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
![Page 101: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/101.jpg)
repeating keyframe animation
.box{
background-‐color:white;-‐webkit-‐animation:fade 1s;-‐webkit-‐animation-‐iteration-‐count:infinite;
}
@-‐webkit-‐keyframes fade{
from { background-‐color:white; }50% { background-‐color: cyan }to { background-‐color:orange; }
}
Saturday, March 9, 13
![Page 102: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/102.jpg)
...and demo
Saturday, March 9, 13
![Page 103: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/103.jpg)
http://www.flickr.com/photos/aturkus/4040454167
Saturday, March 9, 13
![Page 104: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/104.jpg)
... and in the real life
Saturday, March 9, 13
![Page 105: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/105.jpg)
web showcases
Saturday, March 9, 13
![Page 106: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/106.jpg)
...and demo
Saturday, March 9, 13
![Page 107: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/107.jpg)
Saturday, March 9, 13
![Page 108: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/108.jpg)
responsive websitessuitable for any device
Saturday, March 9, 13
![Page 109: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/109.jpg)
...and demo
Saturday, March 9, 13
![Page 110: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/110.jpg)
jQuery frameworks
Saturday, March 9, 13
![Page 111: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/111.jpg)
jQueryUI frameworks
Saturday, March 9, 13
![Page 112: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/112.jpg)
Saturday, March 9, 13
![Page 113: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/113.jpg)
Jaws HTML5 Javascript Game Lib
web game frameworks
Saturday, March 9, 13
![Page 114: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/114.jpg)
Saturday, March 9, 13
![Page 115: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/115.jpg)
...and demo
Saturday, March 9, 13
![Page 116: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/116.jpg)
go to the heaven...
Saturday, March 9, 13
![Page 117: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/117.jpg)
mobile development
Saturday, March 9, 13
![Page 118: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/118.jpg)
references
Apple Safari Developerhttps://developer.apple.com/devcenter/
safari/index.action
Smashing MagazineGraphic, CSS and Web design
http://www.smashingmagazine.com
Ben FrainEverything 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
Saturday, March 9, 13
![Page 119: 3D & Animation Effects Using CSS3 & jQuery](https://reader038.vdocuments.us/reader038/viewer/2022103000/55521514b4c905852b8b537a/html5/thumbnails/119.jpg)
many thanks to
thank you
pleasesay
tutsplushttps://developer.apple.com
developer
https://tutsplus.com
xin chào
http://www.smashingmagazine.comsmashingmagazine
Saturday, March 9, 13