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 (https://www.developpez.net/forums/u285162/danielhagnoul/)"
Mon cahier d’exercices
"Auteur : Hagnoul Daniel"
Texte : v1.3.0 2012-12-20
Texte : v1.0.0 2010-06-23
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 https : 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
* "https://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
* https://baagoe.com/en/RandomMusings/javascript/
* --------------------------
*
* Usage, exemple fleur.html :
*
* <!doctype html>
* <html lang="fr">
* <head>
* <meta charset="utf-8"/>
* <base href="https://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="https://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: "https://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" : "https://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);
Veuillez poser vos questions
techniques sur les forums DVP,
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.
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 (https://www.developpez.net/forums/u285162/danielhagnoul/)"