It's always those Sunday afternoons when you are totally bored and have stupid ideas.
This time, I've created a smiley face with its
eyes popping out when you put your mouse over
it.
The head, eyes, black eyes and mouth are all made of div elements. The mouth is made of a circle which is covered by a yellow rectangle creating its moon-like shape.
By changing the width of the eye div elements ("lefteye38", "righteye38") the pop out effect is created. Here is the code for it:
@keyframes name of the animation
{
from{width:20px;}
to{width:50px;left:-40px;}
}
Note that not only the width is changed but also the left property to create the protruding effect. The "mouseenter" event invokes the keyframe animation. You have to write
addEventListener and attachEventListener in order to make the event in all browsers work including IE. Don't forget to write "mouseenter" for addEventListener and "onmouseenter" for attachEvent. The code gets longer and longer because we also want to make the event touchscreen-compatible so we add "touchstart"for "mouseenter" and "touchend" for "mouseleave".
By putting the mouse over the smiley head the animation should be invoked. Here is the code for it:
function name of the function (){
id of the element.style.animation="your animation 1s normal forwards";
}
Always put the addEventListener and attachEvent in the body element otherwise nothing will fire!
The head, eyes, black eyes and mouth are all made of div elements. The mouth is made of a circle which is covered by a yellow rectangle creating its moon-like shape.
By changing the width of the eye div elements ("lefteye38", "righteye38") the pop out effect is created. Here is the code for it:
@keyframes name of the animation
{
from{width:20px;}
to{width:50px;left:-40px;}
}
Note that not only the width is changed but also the left property to create the protruding effect. The "mouseenter" event invokes the keyframe animation. You have to write
addEventListener and attachEventListener in order to make the event in all browsers work including IE. Don't forget to write "mouseenter" for addEventListener and "onmouseenter" for attachEvent. The code gets longer and longer because we also want to make the event touchscreen-compatible so we add "touchstart"for "mouseenter" and "touchend" for "mouseleave".
By putting the mouse over the smiley head the animation should be invoked. Here is the code for it:
function name of the function (){
id of the element.style.animation="your animation 1s normal forwards";
}
Always put the addEventListener and attachEvent in the body element otherwise nothing will fire!
No comments:
Post a Comment