Skip to content

Instantly share code, notes, and snippets.

@nrrb
Created October 23, 2014 19:07
Show Gist options
  • Save nrrb/5b61332f8b477a4dcc2d to your computer and use it in GitHub Desktop.
Save nrrb/5b61332f8b477a4dcc2d to your computer and use it in GitHub Desktop.
Inject jQuery and animate.css, then animate img elements
/*
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