Created
October 23, 2014 19:07
-
-
Save nrrb/5b61332f8b477a4dcc2d to your computer and use it in GitHub Desktop.
Inject jQuery and animate.css, then animate img elements
This file contains 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
/* | |
Inject jQuery and animate.css into the current page and make the images bounce. | |
jQuery: http://jquery.com/ | |
animate.css: https://daneden.github.io/animate.css/ | |
Using https://cdnjs.com/ to source scripts. | |
*/ | |
var jq = document.createElement('script'); | |
jq.src = '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js'; | |
document.getElementsByTagName('head')[0].appendChild(jq); | |
setTimeout(function() { | |
jQuery.noConflict(); | |
}, 5000); | |
link = document.createElement('link'); | |
link.type = 'text/css'; | |
link.rel = 'stylesheet'; | |
link.href = '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css'; | |
link.media = "all" | |
document.getElementsByTagName('head')[0].appendChild(link); | |
// This code borrowed from the animate.css demo page at https://daneden.github.io/animate.css/ | |
function animate(selector, animation_name) { | |
var classes = animation_name + ' animated'; | |
jQuery(selector) | |
.removeClass(classes) | |
.addClass(classes) | |
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() { | |
jQuery(this).removeClass(classes); | |
}); | |
}; | |
animate('img', 'hinge'); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment