Menu
Is there anyway to make a div box shake on page load? Like maybe just once or twice?
Update: At this URL I have it still not working on page load, what am I doing wrong? http://tinyurl.com/79azbav
I think I'm stuck at the onpage load; that failure can be seen here: Get onpage to work correctly
I've also tried initiating the animation with my already implemented body onLoad:
<body onLoad="document.emvForm.EMAIL_FIELD.focus(); document.ready.entertext.shake();" >
But still failing like a champ.
887
CSS Code: In this section first we will design the text with some basic CSS and use @keyframes animation and then use the transitionX() function to produce the shaking effect when we hover over the text.
Simply replace . shake:hover with .
CSS Code: In this section, first we will design the button using CSS basic properties, then to create the shake effect or animation we will use the @keyframes rule, we will use the translateX() and rotate() functions to reposition the button element on x axis the create the desired effect when we hover over it.
Try something like this:
EDIT:
Changed Shake() to shake() for consistency with jQuery conventions.
jQuery.fn.shake = function() {
this.each(function(i) {
$(this).css({ "position": "relative" });
for (var x = 1; x <= 3; x++) {
$(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50);
}
});
return this;
}
EDIT:
In my example the left position is set to 25, but you can reduce this for a more subtle effect or increase it for a more pronounced effect.
Using the shake function:
$("#div").shake();
Here's a jsFiddle that demonstrates it: http://jsfiddle.net/JppPG/3/
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
