Skip to content

Instantly share code, notes, and snippets.

@ourmaninamsterdam

ourmaninamsterdam/index.html

Last active December 11, 2015 07:09
Show Gist options
  • Save ourmaninamsterdam/4564704 to your computer and use it in GitHub Desktop.
Save ourmaninamsterdam/4564704 to your computer and use it in GitHub Desktop.
Download ZIP
**BETA**. jQuery plugin to independently animate elements using their data attributes used for animation properties.
Raw
index.html
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Animator</title>
<meta charset="utf-8" />
<style>
.block{
background: #ccc;
box-sizing: border-box;
height: 100px;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100px;
}
</style>
</head>
<body>
<div class="block animate" data-anim-duration="200" data-anim="{'left':'100px','top':'200px','opacity': 1}" data-anim-delay="300" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim="{'left':'700px','top':'340px','opacity': 1}" data-anim-delay="400" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim="{'left':'60px','top':'1000px','opacity': 1}" data-anim-delay="500" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim-left="630" data-anim-top="40" data-anim-opacity="1" data-anim-delay="600" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim="{'left':'360px','top':'500px','opacity': 1}" data-anim-delay="700" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim="{'left':'940px','top':'100px','opacity': 1}" data-anim-delay="800" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim-left="140" data-anim-top="190" data-anim-opacity="1" data-anim-delay="900" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim-left="60" data-anim-top="750" data-anim-opacity="1" data-anim-delay="1000" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim="{'left':'760px','top':'1000px','opacity': 1}" data-anim-delay="1100" data-anim-easing="swing"></div>
<div class="block animate" data-anim-duration="200" data-anim="{'left':'160px','top':'600px','opacity': 1}" data-anim-delay="1200" data-anim-easing="swing"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery.janimator.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
$(".animate").jAnimator({
on_item_anim_complete: item_callback
});
function item_callback() {
console.log("item animated");
}
});
</script>
</body>
</html>
Raw
jquery.janimator.js
;(function ($, window, document, undefined) {
var plugin_name = "jAnimator",
defaults = {
on_item_animated: function(){},
on_complete: function(){}
};
function Plugin(element, options) {
this.element = element;
this._element = $(this.element);
this.options = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = plugin_name;
this.init();
}
Plugin.prototype = {
init: function(){
var self = this;
(function(self_copy) {
var self_copy = self,
anim_props = self_copy._element.data("anim")? $.parseJSON( self_copy._element.data("anim").replace(/\'/g, "\"") ) : {
"left": self_copy._element.data("anim-left"),
"top": self_copy._element.data("anim-top"),
"opacity": self_copy._element.data("anim-opacity")
};
setTimeout(function () {
self_copy._element.animate(anim_props,
self_copy._element.data("anim-duration"),
self_copy._element.data("anim-easing"),
function() {
self_copy.options.on_item_animated();
});
}, self_copy._element.data("anim-delay"));
})();
}
};
$.fn[plugin_name] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + plugin_name)) {
$.data(this, "plugin_" + plugin_name, new Plugin(this, options));
}
});
};
})(jQuery, window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment