T
I
T
L
E
Click on the characters !
When you click on the text above it will dissolve.
This animation is created with JavaScript and the CSS animation property. We change the blur value of the text-shadow property from 0px to 50px creating the effect above. Here is the syntax:
@keyframes your animation{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;}
}
The animation shouldn't start yet therefore this property doesn't contain anything at the beginning. To invoke the animation with the JavaScript onclick event we assign a certain value to it with the following syntax:
function function name(){
document.getElementById("ID of the element").style.WebkitAnimation ="details about the animation";
document.getElementById("ID of the element").style.animation="details about the animation";
}
Pretty easy, huh? Let`s start clicking on the text!
This animation is created with JavaScript and the CSS animation property. We change the blur value of the text-shadow property from 0px to 50px creating the effect above. Here is the syntax:
@keyframes your animation{
from{text-shadow:0px 0px 0px;}
to{text-shadow:0px 0px 50px;}
}
The animation shouldn't start yet therefore this property doesn't contain anything at the beginning. To invoke the animation with the JavaScript onclick event we assign a certain value to it with the following syntax:
function function name(){
document.getElementById("ID of the element").style.WebkitAnimation ="details about the animation";
document.getElementById("ID of the element").style.animation="details about the animation";
}
Pretty easy, huh? Let`s start clicking on the text!
No comments:
Post a Comment