3D & Animation Effects Using CSS3 & jQuery

3D & animation effectsimplementing animation & 3D using CSS3 & jQuery

presented by Vu Tran LamSaturday, March 9, 13

the web is less than

9000 days old

http://wwwflickr.com/photos/psd/3149878971

Saturday, March 9, 13

2012 estimates put the population at about 7 billion inhabitants...

Internet

ofpeople

onplanet

1/3 people has a smartphone

the smartphone era begins...

brings touch, gestures

iPhone 3Gweb

and the real web...

iPhone

2007 2008

20082007 2009

3GiPhoneiPhone 3GS

native apps and

android apps

the rise of Android...

2008 2009

blackberry kindle nook

devices go mainstream

iPhone 5...

with great expectations...

samsungmotorola

web evaluation...

yesterday

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

yesterday

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

“use the mobile”to use the web/Internet

small + medium + large

one standard for every devices

http://www.flickr.com/photos/aubergene/970367879

...view flash &video on iDevice?

http://www.flickr.com/photos/aubergene/970367879

no flash or video but need to find a key...

...in the old days

...in the old days

Ugh, terrible code

...in the old days

you could not design graphic

http://www.flickr.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.flickr.com/photos/clairity/1449248189

...we can not find asuitable tree in the forest

http://www.flickr.com/photos/seatbelt67/502255276

hmm...

ways...?

...need a team

http://www.flickr.com/photos/farleyj/2768941171

Eureka!

HMTL5 & CSS3

welcome to w3c...

the next Web Standards

semantic layout

Web forms 2.0

audio & video

2D & 3D drawing

rounded corners

gradient fill

transition & animation

depth content

http://www.flickr.com/photos/sporst/3999795549

...let's first deal withHTML5 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...

fsdfffSaturday, March 9, 13

HTML5 Canvas

using Canvas

<h1>Page Heading</h1>

<p>Lorem ipsum...</p>

<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

What is the difference between 2 logos?

Canvas logo PNG logo

...and demo

...let's continue with 3D effect using CSS3

conveying depth with CSS3

transforms

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

transforms

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

building a Box

</div>

building a Box

building a Box with 3DTransforms

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

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

-‐webkit-‐transform:rotateY(90deg) translateZ(200px);

.package > div:nth-‐child(2) {

-‐webkit-‐transform:rotateY(90deg) translateZ(200px);

.package > div:nth-‐child(2) {

a 3D Box?

perspective

-webkit-perspective:400px;

adding perspective

-‐webkit-‐perspective:800px;

.package {

3D Box with perspective

...and demo

...let's continue with transition effect using CSS3

rotating a Box

</div>

</div></div>

rotating a Box

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

rotating a Box

.package {

.package_container {-‐webkit-‐perspective:800px;

rotating a Box

.package {-‐webkit-‐transform-‐style:preserve-‐3d;

.package_container {-‐webkit-‐perspective:800px;

rotating a Box

.package {}

rotating a Box

.package {}

.package.right_side {-‐webkit-‐transform:rotateY(-‐90deg);

class=“package right_side”

rotating a Box

.package { -‐webkit-‐transition:-‐webkit-‐transform 1s;}

.package.right_side {-‐webkit-‐transform:rotateY(-‐90deg);

class=“package right_side”

rotating a Box

.package.right_side {-‐webkit-‐transform:rotateX(-‐90deg);

class=“package”

rotating a Box

.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

middle

top right

rotated

flipped

@-‐webkit-‐keyframes

@-‐webkit-‐keyframes stamp-‐it {

Animation name

}50% {

}100% {

}50% {

}100% {

top:30px;right:30px;

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);

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

</style>

<style>

</style>

<style>

var stampElement = /* get the element */;var stampElement.style.webkitAnimation = “stamp-‐it 0.5s”;

}</script>

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 {

2 second pulse

1 second delay

animation fill mode

}div.square {

width:100px;height:100px;-‐webkit-‐animation:pulse 2s;-‐webkit-‐animation-‐delay:1s;

2 second pulse

1 second delay

animation fill mode

}div.square {

width:100px;height:100px;-‐webkit-‐animation:pulse 2s;-‐webkit-‐animation-‐delay:1s;-‐webkit-‐animation-‐fill-‐mode:backwards;

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

}</script

<style>

animation fill mode

</style>

progress indicator

0% {-‐webkit-‐transform:rotate(0);

100% {-‐webkit-‐transform:rotate(360deg);

@-‐webkit-‐keyframes outer {

progress indicator

0% {-‐webkit-‐transform:rotate(5);

100% {-‐webkit-‐transform:rotate(365deg);

@-‐webkit-‐keyframes 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

background-‐color:white;-‐webkit-‐transition:opacity 1s;

.box:hover{

background-‐color:orange;}

background-‐color:white;-‐webkit-‐animation:fade 1s;

@-‐webkit-‐keyframes fade{

from { background-‐color:white; }from { background-‐color:orange; }

applying a keyframe animation

keyframe animation with multiple keyframes

background-‐color:white;-‐webkit-‐animation:fade 1s;

from { background-‐color:white; }50% { background-‐color: cyan }to { background-‐color:orange; }

repeating keyframe animation

background-‐color:white;-‐webkit-‐animation:fade 1s;-‐webkit-‐animation-‐iteration-‐count:infinite;

from { background-‐color:white; }50% { background-‐color: cyan }to { background-‐color:orange; }

...and demo

http://www.flickr.com/photos/aturkus/4040454167

... and in the real life

web showcases

...and demo

responsive websitessuitable for any device

...and demo

jQuery frameworks

jQueryUI frameworks

Jaws HTML5 Javascript Game Lib

web game frameworks

...and demo

go to the heaven...

mobile development

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

many thanks to

thank you

lamvt@fpt.com.vn

pleasesay

tutsplushttps://developer.apple.com

developer

https://tutsplus.com

xin chào

http://www.smashingmagazine.comsmashingmagazine

3D & Animation Effects Using CSS3 & jQuery

Technology

Transcript of 3D & Animation Effects Using CSS3 & jQuery

CSS3 vs jQuery

CSS3 for Web Designers and Developers · technologies for the firm include PHP and Wordpress, JavaScript and jQuery, Ruby on Rails, and HTML5/CSS3. Previously, Brian served as Director

jQuery and CSS3 Navigation Menus

Web Animation using JavaScript - Programmer Books€¦ · CHAPTER 2 ANIMATING WITH VELOCITY.JS Types of JavaScript animation libraries Installing jQuery and Velocity Using Velocity:

Pro CSS3 Animation - 3.droppdf.com3.droppdf.com/files/wnDj7/pro-css3-animation.pdf · Now, we have the CSS3 Transforms, Transitions, and Animation Modules. These are extensions of

CSS3 and jQuery

Module 4 HTML5 / CSS3 / jQuery - 31 place Web · PDF fileModule 4 – HTML5-CSS3-jQuery -06/17 Section générique regroupant un même sujet, une même fonctionnalité, de préférence

Information Data - img3.oferia.pl · • knowledge of Visual Basic / Java, • knowledge of PHP / jQuery / HTML5 / CSS3, • knowledge of object-oriented programming techniques, •

2012 - HTML5, CSS3 and jQuery with SharePoint 2010

Pro CSS3 Animation - DropPDF2.droppdf.com/files/V55Pt/pro-css3-animation.pdf · Now, we have the CSS3 Transforms, Transitions, and Animation Modules. These are extensions of CSS syntax

CSS3 Animation and Artful Storytelling: Adding Value to Children’s Ebooks - ebookcraft 2016 - Kris Vetter

AngularJSakaunda.com/abigail-kaunda-resume.pdf · AngularJS Bootstrap CSS3 HTML5 Javascript (ES5/6) JQuery PHP ReactJS Responsive Web Design Adobe Acrobat Adobe Dreamweaver Adobe

Monday, December 1 st, 2014 Instructor: Craig Duckett cduckett@cascadia.edu Basic Animation: JavaScript and jQuery.

Straight-to-the-Point 2018©finitive.pdf · Web applications developement & integration : XHTML, HTML5, CSS3, Javascript, Ajax, jQuery, Dojo Mobile Development : Android, iOS, jQuery

CSS3 TTA (Transform Transition Animation)

0RXQW 5DLQLHU 'U $XVWLQ 7; …storage.googleapis.com/wzukusers/user-24304585/documents... · Microsoft Office HTML5 css3 SKILLS Learning. Jquery JavaScript ... Managing payroll and

BlueNote | - プログラミング学習...jQuery PHP Bootstrap Photoshop Wordpress Sass Web-7-":- HTML5&CSS3 Sass 2ffi WordPress HTML5 &CSS3 LESSON BOOK WordPress CD WordPress HTML5/CSS3

MOBILE DEVELOPMENT OPTIONS 2014 › mds › 2015 › ...MobileDevOptions... · TOPICS • Android, iOS, HTML5/CSS3, Phonegap, Titanium, and jQuery Mobile • native, cross-platform-to-native,

3 free responsive jQuery & CSS3 flipbook software

Html5, css3, js, jQuery