A Pen by David van den Bor on CodePen.
Last active
April 30, 2020 15:19
-
-
Save davidvandenbor/43edc806069c4fb6e86a6ec90a9fd967 to your computer and use it in GitHub Desktop.
CSS animaties bibliotheekje
This file contains hidden or 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 lang="en"> | |
| <head> | |
| <link rel="stylesheet" href="style.css" /> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>Document</title> | |
| </head> | |
| <p>CSS animaties maken en die "plakken" aan HTML objecten met jQuery<strong> .addClass() </strong>is veel intuitiever (en soms ook flexibeler) dan javascript animaties maken. </p> | |
| <button class="stop">stop alles</button> | |
| <!-- hier volgen nu de vier vlakjes --> | |
| <div class="voorbeeldje" id="1"><h3>fade In Left!</h3>Je kunt gemakkelijk handmatig CSS animaties maken door ze te "plakken" aan HTML objecten met jQuery .addClass(). Of je kan ze aan en uit "toggelen" met jQuery .toggleClass()</div> | |
| <div class="voorbeeldje" id="2"><h3>fade In Up Big!</h3>Je kan gemakkelijk handmatig CSS animaties maken door ze te "plakken" aan HTML objecten met jQuery .addClass(). Of je kan ze aan en uit "toggelen" met jQuery .toggleClass()</div> | |
| <div class="voorbeeldje" id="3"><h3>fade In Right!</h3>Je kan gemakkelijk handmatig CSS animaties maken door ze te "plakken" aan HTML objecten met jQuery .addClass(). Of je kan ze aan en uit "toggelen" met jQuery .toggleClass()</div> | |
| <div class="voorbeeldje" id="4"><h3>Go Crazy!</h3> Je kan gemakkelijk handmatig CSS animaties maken door ze te "plakken" aan HTML objecten met jQuery .addClass(). Of je kan ze aan en uit "toggelen" met jQuery .toggleClass()</div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| // Soms is .on('click') te prefereren over .click() omdat je soms te maken hebt met dynamische html elementen, d.w.z. elementen die dynamisch werden toegevoegd aan de pagina NADAT de pagina geladen was!! | |
| $('body').on('click',function() { | |
| $('#1').toggleClass('animated fadeInLeft'); | |
| }); | |
| // OF ZO KAN OOK: | |
| // $("#1").click( function() { | |
| // $('#1').toggleClass('animated fadeInLeft'); | |
| // }); | |
| $("#2").click( function() { | |
| $('#2').toggleClass('animated fadeInUpBig'); | |
| }); | |
| $("#3").click( function() { | |
| $('#3').toggleClass('animated fadeInRight'); | |
| }); | |
| $("#4").click( function() { | |
| $('#4').toggleClass('animated goCrazy'); | |
| }); | |
| $(".stop").click( function() { | |
| $('.voorbeeldje').removeClass().addClass("voorbeeldje"); | |
| }); | |
| // Je kan ook rechtstreeks CSS eigenschappen animeren regelrecht op geslecteerde elementen!! | |
| // $( ".voorbeeldje" ).animate({ | |
| // marginTop: "toggle", | |
| // opacity: "toggle" | |
| // }, 500 ); |
This file contains hidden or 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
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains hidden or 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
| * { | |
| font-family: sans-serif; | |
| } | |
| [class*="voorbeeldje"] /* d.w.z. elke clas waar op zijn minst het woord/lettercombinatie "voorbeeldje in voorkomt, dus dan zou die ook ".voorbeeldjetwee" pakken als die bestond!! */ | |
| { | |
| background:grey; | |
| cursor:pointer; | |
| display:inline-block; | |
| color:white; | |
| padding:0em 2em 3em 2em; | |
| width: 210px; | |
| height:210px; | |
| margin:2em; | |
| } | |
| /* Hieronder volgt het standaard bibliotheekje dat ik heb aangemaakt met animatievoorbeeldjes! */ | |
| /*=== Trigger ===*/ | |
| .animated { | |
| background:blue; | |
| animation-duration: 1s; | |
| animation-fill-mode: both; | |
| animation-iteration-count: infinite; | |
| animation-direction:alternate | |
| } | |
| /*=== Optional Delays, change values here ===*/ | |
| .one {animation-delay: 0.4s;} | |
| .two {animation-delay: 1.7s;} | |
| .three {animation-delay: 2.3s;} | |
| .four {animation-delay: 3.3s;} | |
| /*=== Animations start here ===*/ | |
| /*=== FADE IN ===*/ | |
| @keyframes fadeIn { | |
| from { opacity: 0;} | |
| to {opacity: 1;} | |
| } | |
| .fadeIn {animation-name: fadeIn;} | |
| /*=== FADE IN DOWN ===*/ | |
| @keyframes fadeInDown { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(0, -100%, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| .fadeInDown { | |
| animation-name: fadeInDown; | |
| } | |
| /*==== FADE IN UP ===*/ | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(0, 20px, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| .fadeInUp { | |
| animation-name: fadeInUp; | |
| } | |
| /*==== FADE IN UP BIG ===*/ | |
| @keyframes fadeInUpBig { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(0, 100px, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| .fadeInUpBig { | |
| animation-name: fadeInUpBig; | |
| } | |
| /*=== FADE IN LEFT ===*/ | |
| @keyframes fadeInLeft { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(-50px, 0, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| .fadeInLeft { | |
| animation-name: fadeInLeft; | |
| } | |
| /*==== FADE IN RIGHT ===*/ | |
| @keyframes fadeInRight { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(100%, 0, 0); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: none; | |
| } | |
| } | |
| .fadeInRight { | |
| animation-name: fadeInRight; | |
| } | |
| /*==== Go Crazy ===*/ | |
| @keyframes goCrazy { | |
| from { | |
| opacity: 0; | |
| transform: translate3d(500%, -80%, 0) rotate(360deg); | |
| } | |
| to { | |
| opacity: 1; | |
| background:red; | |
| } | |
| } | |
| .goCrazy { | |
| animation-name: goCrazy; | |
| } | |
| /* ANIMATION PROPERTY VALUES CHEATSHEET!! | |
| ANIMATION-NAME | |
| Specifies the name of the keyframe you want to bind to the selector | |
| keyframename|none|initial|inherit; | |
| ANIMATION-TIMING-FUNCTION | |
| Specifies the speed curve of the animation | |
| ANIMATION-DURATION | |
| Specifies how many seconds or milliseconds an animation takes to complete | |
| time|initial|inherit; | |
| ANIMATION-DIRECTION | |
| Specifies whether or not the animation should play in reverse on alternate cycles | |
| normal|reverse|alternate|alternate-reverse|initial|inherit; | |
| ANIMATION-FILL-MODE | |
| Specifies what values are applied by the animation outside the time it is executing | |
| none|forwards|backwards|both|initial|inherit; | |
| ANIMATION-ITERATION-COUNT: | |
| Specifies how many times an animation should be played | |
| number|infinite|initial|inherit; | |
| ANIMATION-PLAY-STATE | |
| Specifies whether the animation is running or paused | |
| paused|running|initial|inherit; | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment