Mon cahier d’exercices sur jQuery & Co
Ce que je crois savoir. Ce que je pense devoir faire. Si je ne me trompe pas !

Plugin dvjhDrop

"Auteur : Hagnoul Daniel"

Laisser tomber ce qu'il vous plaît

Texte : v1.3.0 2012-12-20
Texte : v1.0.0 2010-06-23

Exemple n° 1 : Bonne fête

Exemple n° 2 : Joyeux Noël

Exemple n° 3 : Il neige !

L'affichage sera plus ou moins fluide en fonction de la puissance de votre ordinateur et de la version de votre navigateur. Internet Explorer 8 affichant les images PNG à sa façon.

Téléchargement ftp : dvjhDrop-1.2.0.zip

Téléchargement http : dvjhDrop-1.2.0.zip

/*
 * plugin dvjhDrop
 * Daniel Hagnoul
 * 
 * Code v2.0.0 2012-12-20
 * 
 * Dessine dans un canvas et utilise requestAnimationFrame.
 *
 * Code v1.2.0 2011-06-30
 * Code v1.1.0 2010-06-25
 * Code v1.0.0 2010-06-12
 *
 * Inspiré par Flocon (v1.0.2 2009-12-16 Daniel Hagnoul)
 * Flocon étant la version jQuery de :
 * ---------------------------
 * 	Titre: De la neige !!!
 *  Réécrit par Spacefrog
 *  Date: 12/2009
 * "http://www.developpez.net/forums/d846042/webmasters-developpement-web/contribuez/decoration-noel-simulateur-chute-neige/"
 * 	L'auteur décline toutes responsabilités !
 * ---------------------------
 * 
 * dvjhDrop() utilise le générateur de nombre aléatoire
 * Alea de Johannes Baagøe -- baagoe@baagoe.com, 2010
 * http://baagoe.com/en/RandomMusings/javascript/
 * --------------------------
 * 
 * Usage, exemple fleur.html :
 * 
 * <!doctype html>
 * <html lang="fr">
 * <head>
 * 	<meta charset="utf-8"/>
 *	<base href="http://danielhagnoul.developpez.com/">
 * 	<style>
 * 		html, body {
 * 			height: 100%;
 * 			width: 100%;
 * 			overflow: hidden;
 * 			padding: 0px;
 * 			margin: 0px;
 * 		}
 * 	</style>
 *	<script charset="utf-8" src="lib/random/alea.js"></script>
 *	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
 *	<script charset="utf-8" src="lib/plugin-dvjh/jquery.dvjhDrop-2.0.0.min.js"></script>
 *	<script>
 *		$(function(){
 *			$.dvjhDrop({
 *				bgImage: "images/ciel_bleu.jpg",
 *				objetPNG: [
 *					"images/fleur1.png",
 *					"images/fleur2.png",
 *					"images/fleur3.png",
 *					"images/fleur4.png",
 *					"images/fleur5.png",
 *					"images/fleur6.png",
 *					"images/fleur7.png",
 *					"images/fleur8.png"
 *				],
 *				txtFinal: "Bonne fête"
 *			});
 *		});
 *	</script>
 * </head>
 * <body>
 * </body>
 * </html>
 *
 * --------------------------
 * Options disponibles
 *		bgImage: "http://danielhagnoul.developpez.com/fondations/evenement/paysage_neige.jpg",
 *		objetPNG: [], // array des URL des images PNG qui tomberont.
 *		objetTailleMax: 133, // PNG height 133
 *		objetTailleMin: 30,
 *		vXMax: 0.09, // vitesse de déplacement max sur axe X
 *		vXMin: 0.06,
 *		vYMax: 0.22, // vitesse de déplacement max sur axe Y
 *		vYMin: 0.08,
 *		nbObjet: 60, // nombre d'objets
 *		dropDelay: 20000, // 20s
 *		txtFinal: "Joyeux Noël",
 *		txtFinalCss:{
 *			position: "fixed",
 *			bottom: "12px",
 *			right: "12px",
 *			color: "blue",
 *			fontFamily: "cursive",
 *			fontSize: "8em",
 *			fontWeight: "bold",
 *			zIndex: "9999"
 *		}
*/
"use strict";

( function( $ ){
    $.dvjhDrop = function( options ){
        var opts = $.extend( true, {}, $.dvjhDrop.defaults, options ),
            requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || 
                                    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
            cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || 
                                    window.webkitCancelAnimationFrame || window.msCancelAnimationFrame,
            requestId = 0,
            objets = new Array( opts.nbObjet ),
            random = new Alea(),
            bgImg = new Image(),
            canvas = document.createElement( "canvas" ),
            ctx = canvas.getContext( "2d" ),
            docWidth = canvas.width = document.documentElement.clientWidth,
            docHeight = canvas.height = document.documentElement.clientHeight,
            animationStartTime;
        
        canvas.style.position = "fixed";
        canvas.style.top = 0;
        canvas.style.left = 0;
        canvas.style[ "pointerEvents" ] = "none";
        
        bgImg.src = opts.bgImage;
        ctx.drawImage( bgImg, 0, 0, docWidth - 1, docHeight - 1 );
        
        document.body.appendChild( canvas );
        
        function Drop( url, i ){
            // positionenement aléatoire de l'objet
            this.xp = random() * ( docWidth - opts.objetTailleMin );
            this.yp = random() * docHeight;
            
            // vitesse de déplacement
            this.vx = random() * ( opts.vXMax - opts.vXMin ) + opts.vXMin;
            this.vy = random() * ( opts.vYMax - opts.vYMin ) + opts.vYMin;
            
            // taille de l'objet, elle détermine son opacité et son zIndex
            this.height = random() * ( opts.objetTailleMax - opts.objetTailleMin ) + opts.objetTailleMin;
            
            // amplitude du déplacement sur X
            this.am = random() * this.height;
            
            this.dx = 0;
            this.dy = 0;
            
            this.objImage = new Image();
            this.objImage.src = url;
            
            ctx.drawImage( this.objImage, Math.floor( this.xp ), Math.floor( this.yp ) );
        }
        
        Drop.prototype.draw = function( deltaT ){
            this.dy = this.height * this.vy;
            this.yp += this.dy;
            
            if ( this.yp > docHeight - opts.objetTailleMin ){
                this.xp = random() * ( docWidth - opts.objetTailleMin );
                this.yp = 0;
                this.vx = random() * ( opts.vXMax - opts.vXMin ) + opts.vXMin;
                this.vy = random() * ( opts.vYMax - opts.vYMin ) + opts.vYMin;
            }
            
            this.dx += this.vx;
            
            ctx.drawImage( this.objImage, Math.floor( this.xp + this.am * Math.sin( this.dx ) ), Math.floor( this.yp ) );
        };
        
        for ( var i = 0; i < opts.nbObjet; i++ ){
            objets[ i ] = new Drop( opts.objetPNG[ Math.floor( random() * opts.objetPNG.length ) ], i );
        }
        
        function animate( time ){
            var deltaT = time - animationStartTime;
            
            if ( ( deltaT > opts.dropDelay ) && ( requestId != 0 ) ){
                cancelAnimationFrame( requestId );
                requestId = 0;
                
                $("<div/>",{
                    "html" : opts.txtFinal,
                    "css" : opts.txtFinalCss
                }).appendTo("body");
            } else {
                ctx.drawImage( bgImg, 0, 0, docWidth - 1, docHeight - 1 );
                
                for ( var i in objets ){
                    objets[ i ].draw( deltaT );
                }
                
                requestId = requestAnimationFrame( animate );
           }
        }
        
        animationStartTime = Date.now();
        requestId = requestAnimationFrame( animate );
    };
    
    $.dvjhDrop.defaults = {
        "bgImage" : "http://danielhagnoul.developpez.com/images/paysage_neige.jpg", // 1280 * 1024
        "objetPNG" : [], // array des URL des images PNG qui tomberont.
        "objetTailleMax" : 133, // PNG 133 * 100
        "objetTailleMin" : 30,
        "vXMax" : 0.09, // vitesse de déplacement max sur axe X
        "vXMin" : 0.06,
        "vYMax" : 0.22, // vitesse de déplacement max sur axe Y
        "vYMin" : 0.08,
        "nbObjet" : 60, // nombre d'objets
        "dropDelay" : 20000, // 20s
        "txtFinal" : "Joyeux Noël",
        "txtFinalCss" : {
            "position" : "fixed",
            "bottom" : "12px",
            "right" : "12px",
            "color" : "blue",
            "fontFamily" : "cursive",
            "fontSize" : "8em",
            "fontWeight" : "bold",
            "zIndex" : "9999"
        }
    };    
})(jQuery);

À bientôt !

 

Veuillez poser vos questions
techniques sur le forum jQuery
s'il vous plait.

Avertissement solennel

Autodidacte en informatique, l’auteur a tous les défauts de sa qualité. Si vous vous inspirez, copiez ou pire utilisez le contenu de cette page, vous êtes téméraire, inconscient du danger !

Reconnaissant avoir été dûment informé, vous déchargez l’auteur et à fortiori l’hébergeur du site de toute responsabilité dans les graves dégâts que vous causerez sûrement !

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.

Creative Commons License Attribution-Share Alike 2.0 Belgium Except where otherwise noted, content on this site is licensed under a Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (http://www.developpez.net/forums/u285162/danielhagnoul/)"