Created
February 23, 2020 19:59
-
-
Save brickbones/2cc0967dbf753c4ac78f88e427b03d19 to your computer and use it in GitHub Desktop.
HTML and JS code for anime.js tutorial
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" | |
| /> | |
| <title>anime</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <article> | |
| <svg | |
| class="youtube" | |
| xmlns="http://www.w3.org/2000/svg" | |
| height="100px" | |
| width="100px" | |
| viewBox="-10 0 600 500" | |
| > | |
| <path | |
| stroke="red" | |
| stroke-width="10" | |
| fill="#f1f1f1" | |
| d="M459 61.2C443.7 56.1 349.35 51 255 51S66.3 56.1 51 61.2C10.2 73.95 0 163.2 0 255s10.2 181.05 51 193.8c15.3 5.1 109.65 10.2 204 10.2s188.7-5.1 204-10.2c40.8-12.75 51-102 51-193.8S499.8 73.95 459 61.2zM204 369.75v-229.5L357 255 204 369.75z" | |
| /> | |
| </svg> | |
| <h2>My Cool Video</h2> | |
| <p> | |
| Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta vitae | |
| totam voluptatibus consequatur tempore, inventore ducimus corrupti eos | |
| nisi quae similique vero quasi nam magnam sequi quaerat. Sunt labore | |
| quae iste praesentium suscipit minus, repellendus maxime laborum eum | |
| doloribus, dolorum quia inventore quibusdam mollitia debitis nam. Quis | |
| facilis consectetur itaque? | |
| </p> | |
| <a href="#" class="button">Download</a> | |
| </article> | |
| </div> | |
| </body> | |
| <script src="anime.min.js"></script> | |
| <script> | |
| const button = document.querySelector('.button'); | |
| const mouseHoverAnimation = () => { | |
| anime({ | |
| targets: button, | |
| width: '100%', | |
| scale: { | |
| delay: 800, | |
| value: 1.5 | |
| }, | |
| duration: 1500 | |
| }) | |
| } | |
| const mouseOutAnimation = () => { | |
| anime({ | |
| targets: button, | |
| width: '50%', | |
| scale: { | |
| delay: 800, | |
| value: 1 | |
| }, | |
| duration: 1500 | |
| }) | |
| } | |
| anime({ | |
| targets: '.youtube path', | |
| strokeDashoffset: [anime.setDashoffset, 0], | |
| easing: 'easeInOutSine', | |
| duration: 1500, | |
| direction: 'alternate', | |
| loop: true | |
| }) | |
| button.addEventListener('mouseover', mouseHoverAnimation) | |
| button.addEventListener('mouseout', mouseOutAnimation) | |
| </script> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment