Animation, by definition, is the process of creating a continuous motion over a period of time.
Last active
August 29, 2015 14:25
-
-
Save anonymoussc/6710e4e0f8d76f7f1796 to your computer and use it in GitHub Desktop.
The definition of animation and the web context
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Animation</title> | |
| <link href="style.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div> | |
| <h1>Animation with JavaScript</h1> | |
| <!--There is a click listener for this button --> | |
| <button id="jsBtn">Click here to move the element below with JS</button> | |
| <div id="jsanimation"> | |
| This block will be moved by JavaScript | |
| </div> | |
| <h1>Animation with jQuery</h1> | |
| <!--There is a click listener for this button --> | |
| <button id="jQBtn">Click here to move the element below with jQuery</button> | |
| <div id="jQanimation"> | |
| This block will be moved by jQuery | |
| </div> | |
| <h1>Animation with CSS3 transition</h1> | |
| <!--There is a click listener for this button --> | |
| <button id="cssBtn">Click here to move the element below with CSS3 transition</button> | |
| <div id="csstransition"> | |
| This block will be moved by CSS3 transition | |
| </div> | |
| <h1>Animation with CSS3 animation</h1> | |
| <!--There is a click listener for this button --> | |
| <button id="cssAnimationBtn">Click here to move the element below with CSS3 animation</button> | |
| <div id="cssanimation"> | |
| This block will be moved by CSS3 animation | |
| </div> | |
| </div> | |
| <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Code used by JavaScript animation sample */ | |
| var jsAnimationElement = document.getElementById('jsanimation'); | |
| var jsAnimationBtn = document.getElementById('jsBtn'); | |
| /** | |
| * Listener of the "Click here to move the element below with JS" button | |
| */ | |
| jsAnimationBtn.addEventListener('click', function moveBtnClickListener() { | |
| //This variable holds the position left of the div | |
| var positionLeft = 0; | |
| /** | |
| * function that moves jsAnimationElement 10px more to right until the positionLeft is 100 | |
| */ | |
| function moveToRight() { | |
| positionLeft += 10; | |
| /* Set position left of the jsanimation div */ | |
| jsAnimationElement.style.left = positionLeft + 'px'; | |
| if (positionLeft < 100) { | |
| /* This recursive function calls itself until the object is 100px from the left, every 100 milliseconds */ | |
| setTimeout(moveToRight, 100); | |
| } | |
| } | |
| moveToRight(); | |
| }, false); | |
| /* Code used by jQuery Animation sample */ | |
| /** | |
| * Listener of the "Click here to move the element below with jQuery" button | |
| */ | |
| $("#jQBtn").click(function () { | |
| /** Use the jQuery animate function to send the element to more 100px to right in 1s */ | |
| $("#jQanimation").animate({ | |
| left : "+=100" | |
| }, 1000); | |
| }); | |
| /* Code used by CSS transition animation sample */ | |
| var cssTransitionElement = document.getElementById('csstransition'); | |
| var cssTransitionBtn = document.getElementById('cssBtn'); | |
| /** | |
| * Listener of the "Click here to move the element below with CSS3" button | |
| */ | |
| cssTransitionBtn.addEventListener('click', function moveCssBtnClickListener() { | |
| /* Add class "move-to-right" to the block on button click */ | |
| cssTransitionElement.classList.add('move-to-right'); | |
| }); | |
| /* Code used by CSS Animation sample */ | |
| var cssAnimationElement = document.getElementById('cssanimation'); | |
| var cssAnimationBtn = document.getElementById('cssAnimationBtn'); | |
| /** | |
| * Listener of the "Click here to move the element below with CSS3" button | |
| */ | |
| cssAnimationBtn.addEventListener('click', function moveCssAnimationBtnClickListener() { | |
| /* Add class "move-to-right" to the block on button click */ | |
| cssAnimationElement.classList.add('move-to-right-animation'); | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Code used by JavaScript animation sample */ | |
| #jsanimation { | |
| position : relative; | |
| } | |
| /* Code used by jQuery animation sample */ | |
| #jQanimation { | |
| position : relative; | |
| } | |
| /* Code used by CSS Transition animation sample */ | |
| #csstransition { | |
| position : relative; | |
| /* Here we should add -moz-transition, -webkit-transition, -o-transition for browsers compatibility, we will explain about vendor prefixes later */ | |
| transition : all 2s ease-in-out; | |
| } | |
| .move-to-right { | |
| /* Here we should add vendor prefixes too */ | |
| transform : translate(100px, 0); | |
| } | |
| /* Code used by CSS Animation sample */ | |
| #cssanimation { | |
| position : relative; | |
| } | |
| @-webkit-keyframes move-to-right-animation { | |
| from { | |
| left : 0px; | |
| } | |
| to { | |
| left : 100px; | |
| } | |
| } | |
| @keyframes move-to-right-animation { | |
| from { | |
| left : 0px; | |
| } | |
| to { | |
| left : 100px; | |
| } | |
| } | |
| .move-to-right-animation { | |
| position : relative; | |
| left : 100px; | |
| /* Here we should add -moz-animation, -o-animation for browsers compatibility*/ | |
| -webkit-animation : move-to-right-animation 1s ease-in-out; | |
| animation : move-to-right-animation 1s ease-in-out; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment