CSSAnimate With jQuery Animated DOM Elements In CSS3 Transitions

File Size:101.4 KB
Views Total:222
Last Update:December 31, 2017
Publish Date:December 28, 2017
Official Website:Go to website
License:MIT

A jQuery plugin that is helped with the animated DOM Elements by using the CSS3 transition instead of using the jQuery animated method. As it completely provides the fallback and qualitative response to the default animate method if CSS3 is not supported in the browser and it is known as the jQuery.mb.CSSAnimate.

1. Include jQuery library and jQuery CSSAnimate :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="inc/jquery.mb.CSSAnimate.js"></script>

2. Create the html :

<div class="test">
<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>

<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>

<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>

<div class="test one"></div>
<div class="test two"></div>
<div class="test three"></div>
</div>

3. The CSS :

.test {
top: 0;
left: 0;
position: absolute;
width: 10px;
height: 10px;
background: #fff;
box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
border-radius: 10px;
box-sizing: border-box;
-webkit-backface-visibility: hidden; /* Chrome and Safari */
-moz-backface-visibility: hidden; /* Firefox */
-ms-backface-visibility: hidden; /* Internet Explorer */
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

4. The javascript :

$.fn.test = function() {
var cH = $(window).height();
var cW = $(window).width();
return this.each(function() {
var el = $(this);
var w = 30 * (Math.random() * 15);
var h = 30 * (Math.random() * 15);
var t = Math.floor(Math.random() * (cH-h));
var l = Math.floor(Math.random() * (cW-w));
var r = Math.floor(Math.random() * 360);
var duration = 1000 + (Math.random() * 3000);

//here is the CSSAnimate 🙂
el.CSSAnimate({
top: t,
left: l,
width: w,
height: h,
"border-radius":Math.floor(Math.random() * 100),
"transform":"rotate("+r+"deg)",
"transform-origin":"50% 50%",
"background":"rgba("+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+Math.floor(Math.random() * 255)+","+(.6+Math.random()*.4)+")"
}, duration, "ease-out", function() {
el.test();
})
})
};

$(".test").test();

Done 🙂

Change Log

2017-11-30

  • various fix

2016-12-17

  • various fix

2014-09-24

  • better CSS3 interpreter

2014-03-27

  • better CSS3 interpreter

2014-02-19

  • various fixes.