First entry to codevember. It uses my lib slightly changed to handle full text support.
A Pen by coderitual on CodePen.
First entry to codevember. It uses my lib slightly changed to handle full text support.
A Pen by coderitual on CodePen.
<div class="js-odoo"></div> |
odoo.default({ el:'.js-odoo', from: 'NOVEMBER16', to: 'CODEVEMBER', animationDelay: 1000 }); |
<script src="https://cdn.rawgit.com/coderitual/odoo/feature/codevember16/lib/odoo.js"></script> |
@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; | |
} |
when i create:
odoo.default({
el: '.js-odoo',
from: 'foo bar', // space are ok nothing will be replaced
to: 'foo bar', // space will be replaced with this letter 'y' and the letter 'z' will be replaced with a number '0'
animationDelay: 1000
})
is that what you want or is it a bug? I would need a space in the 'to' area
would you want to change that would be great!
How can i increase its spin time?
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?
this is super nice, but you might wanna add to the readme that a script tag should be added to the html header