Mengawali artikel mengenai tips n trik blogger,ane akan berbagi triks membuat animasi daun jatuh di blogger,tested dengan template classic.Cukup mudah dan g pake ribet,langsung saja,
pertama copy script di bawah dan paste ke wilayah <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.jqueryscript.net/demo/Create-Leaves-Falling-Rotating-Effects-with-jQuery-CSS3/js/jquery.rotate.js"></script>
<link rel="stylesheet" href="http://www.jqueryscript.net/demo/Create-Leaves-Falling-Rotating-Effects-with-jQuery-CSS3/css/jquery.classyleaves.min.css" />
<script type="text/javascript">
/*!
* jQuery ClassyLeaves
* www.class.pm
*
* Written by Marius Stanciu - Sergiu <marius@class.pm>
* Licensed under the MIT license www.class.pm/LICENSE-MIT
* Version 1.1.0
*
*/
var ClassyLeaves=function(l){this.numLeaves=this.widthWindow=this.heightWindow=0;this.started=!1;this.__constructor=function(c){var b=this,a=0;this.heightWindow=$(window).height();this.widthWindow=$(window).width();$(window).resize(function(){b.heightWindow=$(window).height();b.widthWindow=$(window).width()});this.settings=$.extend({leaves:50,maxY:100,speed:3E3,infinite:!0,multiplyOnClick:!0,multiply:1,folder:"http://www.jqueryscript.net/demo/Create-Leaves-Falling-Rotating-Effects-with-jQuery-CSS3/images/leaves/",numImages:8},c);if(!0===this.started)return 0;this.started=!0;for(c=0;c< this.settings.leaves;c++)switch(a=1+Math.floor(2*Math.random()),a){case 1:this._create("left");break;case 2:this._create("right")}$("body").on("click",".ClassyLeaf",function(){var a=$(this).attr("id");b._drop(a)});$("body").on("click",".ClassyLeafFalling",function(){var a=$(this).attr("id");b._touch(a)});if(!0===this.settings.multiplyOnClick)$("body").on("click",".ClassyLeafFalling",function(){var a=$(this).attr("id");b._multiply(a)});this.interval=setInterval(function(){var a=b._random(0,$(".ClassyLeaf").length), a=$(".ClassyLeaf").eq(a).attr("id");b._drop(a,!1);0===$(".ClassyLeaf").length&&clearInterval(b.interval)},this.settings.speed)};this.add=function(c){for(var b,a,d,f,e=0;e<c;e++)this.numLeaves+=1,d=1+Math.floor(Math.random()*this.settings.numImages),a=1+Math.floor(4*Math.random()),$("body").append('<img id="leaf'+this.numLeaves+'" class="ClassyLeaf x'+a+'" src="'+this.settings.folder+d+'.png" />'),a=$("#leaf"+this.numLeaves),d=this.widthWindow/2,b=this._random(1,2),2===b?(d=this._random(d,this.widthWindow), b=this._random(0,50)):(d=this._random(-50,d),b=this._random(0,-50)),f=this._random(500,8E3),a.rotate({animateTo:b,duration:f,center:["10%","110%"]}),a.animate({opacity:1},f-400),b=this._random(-100,this.maxY),a.css({left:d+"px",top:b+"px"});return this};this._multiply=function(c){c=$("#"+c);for(var b=c.position().top,a=c.position().left,d,f,e=0;e<=this.settings.multiply;e++)this.numLeaves+=1,d=1+Math.floor(Math.random()*this.settings.numImages),f=c.attr("class").replace("ClassyLeafFalling",""),$("body").append('<img id="leaf'+ this.numLeaves+'" class="ClassyLeaf '+f+'" src="'+this.settings.folder+d+'.png" />'),d=$("#leaf"+this.numLeaves),d.css({top:b+"px",left:a+"px"}).animate({opacity:1},300),this._drop("leaf"+this.numLeaves,!0),this._touch("leaf"+this.numLeaves)};this._touch=function(c){c=$("#"+c);var b=0,b=0<c.getRotateAngle()?720:-720;c.rotate({animateTo:b,duration:2E4})};this._drop=function(c,b){var a=$("#"+c),d,f=this,e,g=0,h,k;a.removeClass("ClassyLeaf").addClass("ClassyLeafFalling");a.animate({top:"+="+(this.heightWindow+ 150)},5E3,function(){a.clearQueue().animate({opacity:0},300,function(){a.remove();if(!0===f.settings.infinite)switch(d=1+Math.floor(2*Math.random()),d){case 1:!1===b&&f._create("left");break;case 2:!1===b&&f._create("right")}})});e=a.getRotateAngle();g=0<e?120:-120;!0===b?(g=this._random(200,600),g=0<e?420+g:-420-g,e=this._random(5,300),h=this._random(5,300),k=this._random(1E4,15E3),a.rotate({animateTo:g,center:[e+"%",h+"%"],duration:k})):a.rotate({animateTo:g,duration:1E4})};this._create=function(c){var b, a,d;this.numLeaves+=1;a=1+Math.floor(Math.random()*this.settings.numImages);b=1+Math.floor(4*Math.random());$("body").append('<img id="leaf'+this.numLeaves+'" class="ClassyLeaf x'+b+'" src="'+this.settings.folder+a+'.png" />');b=$("#leaf"+this.numLeaves);a=this.widthWindow/2;"right"===c?(c=this._random(a,this.widthWindow),a=this._random(0,50)):(c=this._random(-50,a),a=this._random(0,-50));d=this._random(500,8E3);b.rotate({animateTo:a,duration:d,center:["10%","110%"]});b.animate({opacity:1},d-400); a=this._random(-100,this.settings.maxY);b.css({left:c+"px",top:a+"px"})};this._random=function(c,b){return Math.floor(Math.random()*(b-c+1)+c)};return this.__constructor(l)};
</script>
Kemudian pada <body> paste scripts di bawah
<script>
$(document).ready(function() {
var tree = new ClassyLeaves({
leaves: 30,
maxY: -10,
multiplyOnClick: true,
multiply: 2,
infinite: true,
speed: 4000
});
$('body').on('click', '.addLeaf', function() {
console.log('8');
tree.add(8);
return false;
});
});
</script>
Oke kan?.
Lihat Demo Klik -> http://mister-aza.blogspot.co.id/
Tidak ada komentar:
Posting Komentar