First entry to codevember. It uses my lib slightly changed to handle full text support.
A Pen by coderitual on CodePen.
Created
November 22, 2016 03:40
-
-
Save CodeMyUI/6645049922a196f37a5dd0b1d35b7a5a to your computer and use it in GitHub Desktop.
#codevember 01 - svg motion
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
| <div class="js-odoo"></div> |
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
| odoo.default({ el:'.js-odoo', from: 'NOVEMBER16', to: 'CODEVEMBER', animationDelay: 1000 }); |
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://cdn.rawgit.com/coderitual/odoo/feature/codevember16/lib/odoo.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
| @import url('https://fonts.googleapis.com/css?family=Inconsolata'); | |
| html, body { | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| body { | |
| background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF); | |
| font-family: 'Inconsolata'; | |
| font-weight: bold; | |
| font-size: 16vmin; | |
| text-shadow: 1px 1px 5px rgba(0,0,0,0.5); | |
| fill: #fff; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } |
got the solution to increase it.
In its JS file where n=t.duration set it to n=1000 to limit the spin to 1 second and Set the animationDelay to 0
this is awesome, thanks.
Is there any way to disable the blink on each character at the end of the animation?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How can i increase its spin time?