Feuilles qui tombent du haut du forum
On peut cliquer dessus...

Toutes versions sauf Modern BB
Ce premier script dans gestion des codes javascript

Code:

(function(k) { for (var d, f, l = document.getElementsByTagName("head")[0].style, h = ["transformProperty", "WebkitTransform", "OTransform", "msTransform", "MozTransform"], g = 0;g < h.length;g++) { void 0 !== l[h[g]] && (d = h[g]); } d && (f = d.replace(/[tT]ransform/, "TransformOrigin"), "T" == f[0] && (f[0] = "t")); eval('IE = "v"=="\v"'); jQuery.fn.extend({rotate:function(a) { if (0 !== this.length && "undefined" != typeof a) { "number" == typeof a && (a = {angle:a}); for (var b = [], c = 0, d = this.length;c < d;c++) { var e = this.get(c); if (e.Wilq32 && e.Wilq32.PhotoEffect) { e.Wilq32.PhotoEffect._handleRotation(a); } else { var f = k.extend(!0, {}, a), e = (new Wilq32.PhotoEffect(e, f))._rootObj; b.push(k(e)); } } return b; } }, getRotateAngle:function() { for (var a = [], b = 0, c = this.length;b < c;b++) { var d = this.get(b); d.Wilq32 && d.Wilq32.PhotoEffect && (a[b] = d.Wilq32.PhotoEffect._angle); } return a; }, stopRotate:function() { for (var a = 0, b = this.length;a < b;a++) { var c = this.get(a); c.Wilq32 && c.Wilq32.PhotoEffect && clearTimeout(c.Wilq32.PhotoEffect._timer); } }}); Wilq32 = window.Wilq32 || {}; Wilq32.PhotoEffect = function() { return d ? function(a, b) { a.Wilq32 = {PhotoEffect:this}; this._img = this._rootObj = this._eventObj = a; this._handleRotation(b); } : function(a, b) { this._img = a; this._onLoadDelegate = [b]; this._rootObj = document.createElement("span"); this._rootObj.style.display = "inline-block"; this._rootObj.Wilq32 = {PhotoEffect:this}; a.parentNode.insertBefore(this._rootObj, a); if (a.complete) { this._Loader(); } else { var c = this; jQuery(this._img).bind("load", function() { c._Loader(); }); } }; }(); Wilq32.PhotoEffect.prototype = {_setupParameters:function(a) { this._parameters = this._parameters || {}; "number" !== typeof this._angle && (this._angle = 0); "number" === typeof a.angle && (this._angle = a.angle); this._parameters.animateTo = "number" === typeof a.animateTo ? a.animateTo : this._angle; this._parameters.step = a.step || this._parameters.step || null; this._parameters.easing = a.easing || this._parameters.easing || this._defaultEasing; this._parameters.duration = a.duration || this._parameters.duration || 1E3; this._parameters.callback = a.callback || this._parameters.callback || this._emptyFunction; this._parameters.center = a.center || this._parameters.center || ["50%", "50%"]; this._rotationCenterX = "string" == typeof this._parameters.center[0] ? parseInt(this._parameters.center[0], 10) / 100 * this._imgWidth * this._aspectW : this._parameters.center[0]; this._rotationCenterY = "string" == typeof this._parameters.center[1] ? parseInt(this._parameters.center[1], 10) / 100 * this._imgHeight * this._aspectH : this._parameters.center[1]; a.bind && a.bind != this._parameters.bind && this._BindEvents(a.bind); }, _emptyFunction:function() { }, _defaultEasing:function(a, b, c, d, e) { return-d * ((b = b / e - 1) * b * b * b - 1) + c; }, _handleRotation:function(a, b) { d || this._img.complete || b ? (this._setupParameters(a), this._angle == this._parameters.animateTo ? this._rotate(this._angle) : this._animateStart()) : this._onLoadDelegate.push(a); }, _BindEvents:function(a) { if (a && this._eventObj) { if (this._parameters.bind) { var b = this._parameters.bind, c; for (c in b) { b.hasOwnProperty(c) && jQuery(this._eventObj).unbind(c, b[c]); } } this._parameters.bind = a; for (c in a) { a.hasOwnProperty(c) && jQuery(this._eventObj).bind(c, a[c]); } } }, _Loader:function() { return IE ? function() { var a = this._img.width, b = this._img.height; this._imgWidth = a; this._imgHeight = b; this._img.parentNode.removeChild(this._img); this._vimage = this.createVMLNode("image"); this._vimage.src = this._img.src; this._vimage.style.height = b + "px"; this._vimage.style.width = a + "px"; this._vimage.style.position = "absolute"; this._vimage.style.top = "0px"; this._vimage.style.left = "0px"; this._aspectW = this._aspectH = 1; this._container = this.createVMLNode("group"); this._container.style.width = a; this._container.style.height = b; this._container.style.position = "absolute"; this._container.style.top = "0px"; this._container.style.left = "0px"; this._container.setAttribute("coordsize", a - 1 + "," + (b - 1)); this._container.appendChild(this._vimage); this._rootObj.appendChild(this._container); this._rootObj.style.position = "relative"; this._rootObj.style.width = a + "px"; this._rootObj.style.height = b + "px"; this._rootObj.setAttribute("id", this._img.getAttribute("id")); this._rootObj.className = this._img.className; for (this._eventObj = this._rootObj;a = this._onLoadDelegate.shift();) { this._handleRotation(a, !0); } } : function() { this._rootObj.setAttribute("id", this._img.getAttribute("id")); this._rootObj.className = this._img.className; this._imgWidth = this._img.naturalWidth; this._imgHeight = this._img.naturalHeight; var a = Math.sqrt(this._imgHeight * this._imgHeight + this._imgWidth * this._imgWidth); this._width = 3 * a; this._height = 3 * a; this._aspectW = this._img.offsetWidth / this._img.naturalWidth; this._aspectH = this._img.offsetHeight / this._img.naturalHeight; this._img.parentNode.removeChild(this._img); this._canvas = document.createElement("canvas"); this._canvas.setAttribute("width", this._width); this._canvas.style.position = "relative"; this._canvas.style.left = -this._img.height * this._aspectW + "px"; this._canvas.style.top = -this._img.width * this._aspectH + "px"; this._canvas.Wilq32 = this._rootObj.Wilq32; this._rootObj.appendChild(this._canvas); this._rootObj.style.width = this._img.width * this._aspectW + "px"; this._rootObj.style.height = this._img.height * this._aspectH + "px"; this._eventObj = this._canvas; for (this._cnv = this._canvas.getContext("2d");a = this._onLoadDelegate.shift();) { this._handleRotation(a, !0); } }; }(), _animateStart:function() { this._timer && clearTimeout(this._timer); this._animateStartTime = +new Date; this._animateStartAngle = this._angle; this._animate(); }, _animate:function() { var a = +new Date, b = a - this._animateStartTime > this._parameters.duration; if (b && !this._parameters.animatedGif) { clearTimeout(this._timer); } else { if (this._canvas || this._vimage || this._img) { a = this._parameters.easing(0, a - this._animateStartTime, this._animateStartAngle, this._parameters.animateTo - this._animateStartAngle, this._parameters.duration), this._rotate(~~(10 * a) / 10); } this._parameters.step && this._parameters.step(this._angle); var c = this; this._timer = setTimeout(function() { c._animate.call(c); }, 10); } this._parameters.callback && b && (this._angle = this._parameters.animateTo, this._rotate(this._angle), this._parameters.callback.call(this._rootObj)); }, _rotate:function() { var a = Math.PI / 180; return IE ? function(a) { this._angle = a; this._container.style.rotation = a % 360 + "deg"; this._vimage.style.top = -(this._rotationCenterY - this._imgHeight / 2) + "px"; this._vimage.style.left = -(this._rotationCenterX - this._imgWidth / 2) + "px"; this._container.style.top = this._rotationCenterY - this._imgHeight / 2 + "px"; this._container.style.left = this._rotationCenterX - this._imgWidth / 2 + "px"; } : d ? function(a) { this._angle = a; this._img.style[d] = "rotate(" + a % 360 + "deg)"; this._img.style[f] = this._parameters.center.join(" "); } : function(b) { this._angle = b; b = b % 360 * a; this._canvas.width = this._width; this._canvas.height = this._height; this._cnv.translate(this._imgWidth * this._aspectW, this._imgHeight * this._aspectH); this._cnv.translate(this._rotationCenterX, this._rotationCenterY); this._cnv.rotate(b); this._cnv.translate(-this._rotationCenterX, -this._rotationCenterY); this._cnv.scale(this._aspectW, this._aspectH); this._cnv.drawImage(this._img, 0, 0); }; }()}; IE && (Wilq32.PhotoEffect.prototype.createVMLNode = function() { document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)"); try { return!document.namespaces.rvml && document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml"), function(a) { return document.createElement("<rvml:" + a + ' class="rvml">'); }; } catch (a) { return function(a) { return document.createElement("<" + a + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">'); }; } }()); })(jQuery);
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:"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); };


Puis celui ci avec les réglages

Code:

$(function() {
          $.getScript('https://sd-1.archive-host.com/membres/up/37821634957680146/hal/LEAVES.js');
    });

$(document).ready(function() {
   var tree = new ClassyLeaves({
                                leaves: 40,
         maxY: 20,
         multiplyOnClick:true,
         multiply: 3,
    
         infinite: true,
  speed: 5000,
                                numImages: 8,
 folder:'http://perso.numericable.fr/antonywar/aut/'
                              });
  $('body').on('click', '.addLeaf', function() {          
    console.log('8');                                                                                  
         tree.add(8);                                            
             return false;
          });
      });


Vous pouvez changez le lien dans le code pour avoir d'autres images
http://perso.numericable.fr/antonywar/aut/
http://perso.numericable.fr/antonywar/aut1/
http://perso.numericable.fr/antonywar/aut2/
http://perso.numericable.fr/antonywar/aut3/

http://perso.numericable.fr/antonywar/aut9/
http://perso.numericable.fr/antonywar/aut10/

Et le CSS à mettre dans la partie CSS de votre forum

Code:

.ClassyLeaf,.ClassyLeafFalling
{
  cursor:pointer;
  position:fixed;
  top:-160;
  left:0;
  opacity:0;
  z-index:1000}
.x1
{width:35px;height:35px}
.x2
{width:50px;height:50px}
.x3
{width:75px;height:75px}
.x4
{width:100px;height:100px}


Dernière édition par Admin le Mer 29 Jan - 22:54, édité 4 fois