Created
November 29, 2018 20:58
-
-
Save rochabianca/a2669f8150cb2767fb679cfd230979df to your computer and use it in GitHub Desktop.
jQuery icon animation on hover. You can get a better view here: https://codepen.io/rochabianca/pen/pQQmWd?editors=1111
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"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <svg class="icon__book" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 45.1"> | |
| <style> | |
| .st0{fill:none;stroke:#02a7ec;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} | |
| </style> | |
| <path class="st0" d="M20.5 13.5l20-10v31.1l-20 10-20-10V3.5z"/> | |
| <path class="st0" d="M36.5.5l-16 8.1L4.5.5"/> | |
| <path class="st0" d="M20.5 13.5v31.1"/> | |
| </svg> | |
| </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
| // important note here. Note that I'm animating the paths of the icon. This won't work (or wont work so well) on fill up icons. Be sure to get the right king of icon. | |
| $(document).on("mouseenter", ".icon__book", function() { | |
| var svg = $(this); | |
| $(svg).addClass("animate-svg"); | |
| $("svg.animate-svg path").each(function() { | |
| var comprimento = $(this) | |
| .get(0) | |
| .getTotalLength(); | |
| var comprimentoArredondado = Math.round(comprimento); | |
| $(this).attr("stroke-dasharray", comprimentoArredondado); | |
| $(this).attr("stroke-dashoffset", comprimentoArredondado); | |
| }); | |
| }); | |
| $(document).on("mouseleave", ".icon__book", function() { | |
| var svg = $(this); | |
| $("svg.animate-svg path").each(function() { | |
| $(this).attr("stroke-dasharray", 0); | |
| $(this).attr("stroke-dashoffset", 0); | |
| $(svg).removeClass("animate-svg"); | |
| }); | |
| }); |
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
| // this is the class I'm using to track the svg icon, you can change it for anything you want, just remember to change the js too. | |
| .icon__book { | |
| display: block; | |
| width: 100px; | |
| margin: 60px auto; | |
| &:hover { | |
| cursor: pointer; | |
| } | |
| } | |
| // Animation class | |
| svg.animate-svg path { | |
| animation: svg-animate 2s forwards infinite; | |
| } | |
| @keyframes svg-animate { | |
| from { | |
| } | |
| to { | |
| stroke-dashoffset: 0; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment