Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut [décoration de Noël] Simulateur de Chute de Neige

    Bonjour,

    Je vous propose une petit script de saison inspiré d'une source trouvée sur le net, je l'ai réécrit pour créer les éléments avec le DOM:
    J'ai également intégré des paramètres supplémentaires.

    on peut paramétrer:
    le nombre de flocons
    leur vitesse verticale
    la vitesse horizontale ainsi que leur amplitude de balancement
    un vent de travers


    Il est d'après mes tests crossbrowser, et le rendu est assez réaliste pour peu que l'on mette des images de flocon réalistes...

    L'effet est visible sur cette page de Démo

    Personnalisez le avec vos flocons ! (ou coeurs pour la saint valentin, chauves souris pour Halloween ...)
    Postez juste les liens vers vos sites décorés ci dessous. On pourra juger des plus beaux flocons

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
     
    /****************************************** 
    * Titre:	De la neige !!!
    * Réécrit par Spacefrog	
    * Date: 	12/2009
    ******************************************/ 
    var IsIE6 = !!document.all && !window.XMLHttpRequest
     
    var ext=(IsIE6)?'gif':'png';	
     
    var IsIE=!!document.all; 
     
    	  var snowsrc=new Image();
    	  snowsrc.src="images/snowflake."+ext 
    	  var snowsrc1= new Image;
    	  snowsrc1.src="images/snowflake1." +ext	  
     
      // Configure below to change number of snow to render 
    var densite = 50; 
     
     
     
    var dx, xp, yp;    // coordinate and position variables 
    var am, vx, vy;  // amplitude and step variables 
    var i, doc_width , doc_height ; 
    var vitesseH = 1 //coefficient de vitesse de balancement
    var changevent=true // pour ajouter la variation du sens et de l'intensité du vent
    var vent =new Array(10,0,-10,-20,0,-5,-10,-5,-3,0,2,3,5,10,20,30,50,60,80,70,50,30,10,0,-1,-5,-10,-20);//Vent de travers  positif=> G à D _ négatif => D à G.
    var forceH=0;
    var drift=10; 
     
    var changechute=true
    var chute= new Array(1,2,3,2,1,1,2,3,4,5,4,3,5,4,6,4,2,3,2,1,1,1,1,1,1) //Vitesse de chute des flocons de 1 à 10
    var forceV=0 
    var vitesseV = 1 //coefficient de vitesse de chute
     
    var dx = new Array(); 
    var xp = new Array(); 
    var yp = new Array(); 
    var am = new Array(); 
    var vx = new Array(); 
    var vy = new Array(); 
     
    function init(){
     
    	//Densité de flocons:
    	doc_width = document.body.offsetWidth; 
        doc_height = document.body.offsetHeight;   
    	densite=Math.floor(doc_width/10);
     
     
    	var flake= document.createElement('img');
    	flake.style.border='0';
    	flake.style.width="auto";
    	flake.style.height="auto";
     
    	var flakediv=document.createElement('div');
    	    flakediv.style.position='absolute';
    		flakediv.style.top='15px';
    		flakediv.style.left='15px';
    		flakediv.style.display="none";
     
    	//Position des flocons
    	for (i = 0; i < densite;  i++) {  
    		dx[i] = 0;                        // set coordonnés variables 
    		xp[i] = Math.random()*(doc_width-50);  // positions variables 
    		yp[i] = Math.random()*doc_height; 
    		am[i] = Math.random()*40;         // amplitude de balancement 
    		vx[i] = 0.02 + Math.random()/10 * vitesseH; // vitesse horizontale variable 
    		vy[i] = 0.9 + Math.random() * vitesseV;     // vitesse verticale variable 
     
     
    		var opacite=Math.random()*100;
    		var newflake=flakediv.cloneNode(true);
    		newflake.id="flocon"+i;
    		newflake.zIndex=i+1;
    		newpic=flake.cloneNode(true);
    		newpic.src=(i % 2==0)?snowsrc.src:snowsrc1.src;
    		newflake.appendChild(newpic);
    		IsIE?newflake.style.filter="alpha(opacity="+opacite+")":newflake.style.opacity=opacite/100;
    		document.body.appendChild(newflake);
    	}
    	var neige=setInterval(function(){snow()},30);  
    	if (changevent==true){ var girouette=setInterval(function(){wind()},4250);
    		}
    	if (changechute==true){ var intesite=setInterval(function(){fall()},7130);
    		}
    	}	
     
    function wind(){
    	drift = vent[forceH]
    	forceH++	
    	forceH=(forceH>vent.length)?0:forceH;
    }
     
    function fall()	{
    	vitesseV = chute[forceV]
    	forceV++	
    	forceV=(forceV>chute.length-1)?0:forceV;
    }  
     
      function snow() {  
     
    	doc_width = document.body.offsetWidth; 
        doc_height = document.body.offsetHeight;  
     
        for (i = 0; i < densite; i++) {  
          yp[i] += vy[i]; 
          if (yp[i] > doc_height-20) { 
            xp[i] = (Math.random()*(doc_width-am[i]-30)); 
            yp[i] = 0; 
            vx[i] = (0.02 + Math.random()/10)*vitesseH; 
            vy[i] = (0.7 + Math.random())*vitesseV; 
          } 
     
          dx[i] += vx[i]; 
    	  document.getElementById("flocon"+i).style.display="block"
          document.getElementById("flocon"+i).style.top = yp[i]+"px"; 
    	  if (drift>0){
    					xp[i]=((xp[i]+drift/10)>doc_width)?0:xp[i]+drift/10;
    				}
    	  if (drift<0){
    					xp[i]=((xp[i]+drift/10)<0)?doc_width:xp[i]+drift/10;
    	  }
          document.getElementById("flocon"+i).style.left = xp[i] + am[i]*Math.sin(dx[i])+"px"; 
        } 
      }
    Mise en Oeuvre:
    les flocons se placent dans un répertoire images.
    Il suffit de lancer la fonction dans le onload ou domReady de la page ...

    Pour eviter l'apparition impromptue de scrollbars il faut le css suivant sur le body:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    html, body {	height: 100%;
    				width: 100%;
    				overflow:hidden;
    				margin:0;
    				padding:0;
    				}
    et de préférence un doctype :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html>

    limitations:
    • Ce script est prévu pour fonctionner sur une page sans scrollbars.
      il faudra adapter pour recupérer les scrollheight et scrollwidth ...
    • Certains hebergeur encapsulent les pages perso dans un framset
      un frame-buster ou un redirection sera alors nécessaire (cf http://www.developpez.net/forums/d84...ameset-parent/)
      il suffira en general de faire une redirection dans le href proposé dans la balise noframes:
      Code : Sélectionner tout - Visualiser dans une fenêtre à part
      if(top!=self){self.location.href='lienvers la page non framée'





    [edit] Nouvelle version avec vent changeant
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var changevent=true // pour ajouter la variation du sens et de l'intesité du vent
    var vent =new Array(10,0,-10,-20,0,-10,-1,10,20,30,80,50,30,-10,-20);
    mettre vent à false pour conserver un vent constant,
    modifier l'array vent en valeurs et nombre d'éléments pour l'enchainement des directions et intensités
    [/edit]


    Je vais rajouter une variation aléatoire du vent de travers
    [edit] La variation du vent latéral et de la vitesse de chute son intégrés au moyen de deux array de longueur différentes et de deux setInterval d'interval différent.
    Modifier l'array chute en valeurs et longueur pour varier les enchainements
    [edit]

    [edit]
    Petit rectification pour modifier l'extension des images à .gif pour IE6 et inférieur.
    Seconde modif pour integrer le sniffer de Bovino
    [/EDIT]

    [edit]
    on peut faire varier la taille des flocon en ajoutant cette ligne dans le init àprès le cloneNode
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    		newpic.style.width=20-(Math.floor((Math.random()*8)))+"px"
    [\edit]
    Images attachées Images attachées     
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  2. #2
    Expert éminent
    Avatar de Auteur
    Profil pro
    Inscrit en
    avril 2004
    Messages
    7 094
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2004
    Messages : 7 094
    Points : 9 866
    Points
    9 866

    Par défaut

    génial

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 127
    Points : 22 199
    Points
    22 199
    Billets dans le blog
    63

    Par défaut

    Bonsoir.

    Joli

    Chrome 3.0.195.33 : parfois la démo ne démarre qu'après un rafraîchissement de la page.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    Chrome 3.0.195.33 : parfois la démo ne démarre qu'après un rafraîchissement de la page.
    Curieux ... surtout le parfois ...

    J'ai la version 4.0.249.25 et je ne rencontre pas ce souci ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Responsable Jeux-Concours

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    6 292
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 6 292
    Points : 72 774
    Points
    72 774

    Par défaut \o/

    Ha ben ça c'est bien sympathique. Merci.
    Me reste plus qu'à trouver des flocons, et puis de créer... un site.


  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 648
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 648
    Points : 91 580
    Points
    91 580
    Billets dans le blog
    20

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    /*@cc_on
    @if (@_jscript_version <= 5.6)
      IsIE6 =true
    /*@end @*/
    Intéressante la compilation conditionnelle, je connaissais pas

    En revanche, apparemment, les dernières versions de IE6 sont passées à la version 5.7 de jscript... ce qui rend le test erroné
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    arf parceque j'avais fait une regExp avec MSIE 6 mais comme les version supérieures comportent "compatible; MSIE 6" ça fout le bronx
    faut que je trouve un autre sniffer IE6
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    A prioir les premiers flocons ne sont pas ceux de la démo, voici donc la collection de la démo:
    Images attachées Images attachées     
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  9. #9
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 648
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 648
    Points : 91 580
    Points
    91 580
    Billets dans le blog
    20

    Par défaut

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var isIE6 = !!document.all && !window.XMLHttpRequest
    par exemple ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    je ne sais pas si tu le dis ... je te fais confiance je l'intègre ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  11. #11
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 648
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 648
    Points : 91 580
    Points
    91 580
    Billets dans le blog
    20

    Par défaut

    Ben en fait, le !!document.all est peut-être pas si utile que ça parce que à part IE6, les navigateurs qui n'acceptent pas l'objet XMLHttpRequest, il doit pas y en avoir des masses...
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  12. #12
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    Mieux vaut deux sécurités qu'une seule...


    J'ai également intégré la variation de taille des flocons qui donne une impression de profondeur ...

    [edit]
    Bon sous IE, comme il gère le png comme une truelle... les image diminuées en taille dynamiquement se retrouvent entourées par un liseret noir
    DU coup l'effet n'est pas de plus joli, pour IE il faudrait prévoir plusieurs tailles d'images ..
    Pour les autre navigateurs pas de souci les images sont bien gérées avec leur transparence et sans lisret noir !
    [edit]

    Voici donc une version qui n'applique la variation de taille que pour les NON IE!
    j'ai aussi supprimé les divs conteneurs pour ne conserver que les objets image...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
     
    /****************************************** 
    * Titre:	De la neige !!!
    * Réécrit par Spacefrog	
    * Date: 	12/2009
    ******************************************/ 
    var IsIE6 = (!!document.all && !window.XMLHttpRequest ) 
    //var ext= (/(?!=compatible;\s)MSIE\s6/i.test(navigator.userAgent))?'gif':'png';
    var ext=(IsIE6)?'gif':'png';	
     
    var IsIE=!!document.all; 
     
    	  var snowsrc=new Image();
    	  snowsrc.src="images/snowflake."+ext 
    	  var snowsrc1= new Image;
    	  snowsrc1.src="images/snowflake1." +ext	  
     
      // Configure below to change number of snow to render 
    var densite = 50; 
     
     
     
    var dx, xp, yp;    // coordinate and position variables 
    var am, vx, vy;  // amplitude and step variables 
    var i, doc_width , doc_height ; 
    var vitesseH = 1 //coefficient de vitesse de balancement
    var changevent=true // pour ajouter la variation du sens et de l'intesité du vent
    var vent =new Array(10,0,-10,-20,0,-5,-10,-5,-3,0,2,3,5,10,20,30,50,60,80,70,50,30,10,0,-1,-5,-10,-20);//Vent de travers  positif=> G à D _ négatif => D à G.
    var forceH=0;
    var drift=10; 
     
    var changechute=true
    var chute= new Array(1,2,3,2,1,1,2,3,4,5,4,3,5,4,6,4,2,3,2,1,1,1,1,1,1) //Vitesse de chute des flocons de 1 à 10
    var forceV=0 
    var vitesseV = 1 //coefficient de vitesse de chute
     
    var dx = new Array(); 
    var xp = new Array(); 
    var yp = new Array(); 
    var am = new Array(); 
    var vx = new Array(); 
    var vy = new Array(); 
     
    function init(){
     
    	//Densité de flocons:
    	doc_width = document.body.offsetWidth; 
        doc_height = document.body.offsetHeight;   
    	densite=Math.floor(doc_width/12);
     
     
    	var flake= document.createElement('img');
    	flake.style.border='0';
    	flake.style.width="auto";
    	flake.style.height="auto";
    	flake.style.position='absolute';
    	flake.style.top='15px';
    	flake.style.left='15px';
    	flake.style.display="none";
     
    	//Position des flocons
    	for (i = 0; i < densite;  i++) {  
    		dx[i] = 0;                        // set coordonnés variables 
    		xp[i] = Math.random()*(doc_width-50);  // positions variables 
    		yp[i] = Math.random()*doc_height; 
    		am[i] = Math.random()*40;         // amplitude de balancement 
    		vx[i] = 0.02 + Math.random()/10 * vitesseH; // vitesse horizontale variable 
    		vy[i] = 0.9 + Math.random() * vitesseV;     // vitesse verticale variable 
     
     
    		var opacite=Math.random()*100;
    		var newflake=flake.cloneNode(true);
    		newflake.id="flocon"+i;
    		newflake.zIndex=i+1;
     
     
    		newflake.src=(i % 2==0)?snowsrc.src:snowsrc1.src;
    		if(!document.all){newflake.style.height=20-(Math.floor((Math.random()*8)))+"px"}
    		IsIE?newflake.style.filter="alpha(opacity="+opacite+")":newflake.style.opacity=opacite/100;
    		document.body.appendChild(newflake);
    	}
    	var neige=setInterval(function(){snow()},30);  
    	if (changevent==true){ var girouette=setInterval(function(){wind()},4250);
    		}
    	if (changechute==true){ var intesite=setInterval(function(){fall()},7130);
    		}
    	}	
     
    function wind(){
    	drift = vent[forceH]
    	forceH++	
    	forceH=(forceH>vent.length)?0:forceH;
    }
     
    function fall()	{
    	vitesseV = chute[forceV]
    	forceV++	
    	forceV=(forceV>chute.length-1)?0:forceV;
    }  
     
      function snow() {  
     
    	doc_width = document.body.offsetWidth; 
        doc_height = document.body.offsetHeight;  
     
        for (i = 0; i < densite; i++) {  
          yp[i] += vy[i]; 
          if (yp[i] > doc_height-20) { 
            xp[i] = (Math.random()*(doc_width-am[i]-30)); 
            yp[i] = 0; 
            vx[i] = (0.02 + Math.random()/10)*vitesseH; 
            vy[i] = (0.7 + Math.random())*vitesseV; 
          } 
     
          dx[i] += vx[i]; 
    	  document.getElementById("flocon"+i).style.display="block"
          document.getElementById("flocon"+i).style.top = yp[i]+"px"; 
    	  if (drift>0){
    					xp[i]=((xp[i]+drift/10)>doc_width)?0:xp[i]+drift/10;
    				}
    	  if (drift<0){
    					xp[i]=((xp[i]+drift/10)<0)?doc_width:xp[i]+drift/10;
    	  }
          document.getElementById("flocon"+i).style.left = xp[i] + am[i]*Math.sin(dx[i])+"px"; 
        } 
     
      }
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  13. #13
    Futur Membre du Club
    Profil pro
    Inscrit en
    décembre 2009
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2009
    Messages : 9
    Points : 7
    Points
    7

    Par défaut

    Il y a ce code intéressant sur Wikipedia ([ame="http://en.wikipedia.org/wiki/Conditional_comment"]lien[/ame]) :

    /*@cc_on

    @if (@_jscript_version > 5.7)
    document.write("You are using IE 8+");

    @elif (@_jscript_version == 5.7 && window.XMLHttpRequest)
    document.write("You are using IE 7");

    @elif (@_jscript_version == 5.6 || (@_jscript_version == 5.7 && !window.XMLHttpRequest))
    document.write("You are using IE 6");

    @elif (@_jscript_version == 5.5)
    document.write("You are using IE 5.5");

    @else
    document.write("You are using IE 5 or older");

    @end
    @*/
    Mais attention à un point important : les compacteurs de code JS suppriment les commentaires...

    Sinon j'ai voulu ajouter ce script sur une de mes pages, mais les performances s'en ressentent énormément, par exemple :
    - l'animation des flocons n'est pas aussi fluide que sur la démo de SpaceFrog
    - dans Firebug, le clic droit dans l'éditeur de propriétés CSS ne fonctionne plus (le menu est figé)

    La page est simple mais utilise du CSS3 : border-radius, box-shadow...
    (je n'ai pas testé si les perfs étaient meilleures en le désactivant)

  14. #14
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    Pour ce qui est des performances tu peux diminuer le nombre de flocons.
    Dans la démo il est calculé par une division de la largeur de la fenetre par 12

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    	densite=Math.floor(doc_width/12);
    il suffit de d'augmenter le diviseur ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  15. #15
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 127
    Points : 22 199
    Points
    22 199
    Billets dans le blog
    63

    Par défaut

    Bonsoir.

    Ce n'est pas parfait.

    Sur mon XP Pentium 4 ça « rame » un peu, il n'y a plus moyen d'optimiser ?

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  16. #16
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    Si je puis me permettre, c'est plus zoli avec des flocons détourés

    ci dessous les images modifiées.

    pour ce qui est de l'optimisation à part diminuer le nombre de flocons
    je vais modifier les boucles for en while ... on va voir

    [edit]
    A tester...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
     
    /****************************************** 
    * Titre:	De la neige !!!
    * Réécrit par Spacefrog	
    * Date: 	12/2009
    ******************************************/ 
     
    var IsIE6 = (!!document.all && !window.XMLHttpRequest ) 
    //var ext= (/(?!=compatible;\s)MSIE\s6/i.test(navigator.userAgent))?'gif':'png';
    var ext=(IsIE6)?'gif':'png';	
     
    var IsIE=!!document.all; 
     
    	  var snowsrc=new Image();
    	  snowsrc.src="images/snowflake."+ext 
    	  var snowsrc1= new Image;
    	  snowsrc1.src="images/snowflake1." +ext	  
     
      // Configure below to change number of snow to render 
    var densite = 50; 
     
     
     
    var dx, xp, yp;    // coordinate and position variables 
    var am, vx, vy;  // amplitude and step variables 
    var i, doc_width , doc_height ; 
    var vitesseH = 1 //coefficient de vitesse de balancement
    var changevent=true // pour ajouter la variation du sens et de l'intesité du vent
    var vent =new Array(10,0,-10,-20,0,-5,-10,-5,-3,0,2,3,5,10,20,30,50,60,80,70,50,30,10,0,-1,-5,-10,-20);//Vent de travers  positif=> G à D _ négatif => D à G.
    var forceH=0;
    var drift=10; 
     
    var changechute=true
    var chute= new Array(1,2,3,2,1,1,2,3,4,5,4,3,5,4,6,4,2,3,2,1,1,1,1,1,1) //Vitesse de chute des flocons de 1 à 10
    var forceV=0 
    var vitesseV = 1 //coefficient de vitesse de chute
     
    var dx = new Array(); 
    var xp = new Array(); 
    var yp = new Array(); 
    var am = new Array(); 
    var vx = new Array(); 
    var vy = new Array(); 
     
    function init(){
    	  if (self!=parent){
    	 document.body.parentNode.parentNode.firstChild.nodeValue = 'doctype HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"'; 
      	}
     
     
     
     
    	doc_width =(self!=top)?top.frames[0].document.body.offsetWidth:self.document.body.offsetWidth; 
        doc_height =(self!=top)?top.frames[0].document.body.offsetHeight:self.document.body.offsetHeight;   
     
    	densite=Math.floor(doc_width/12);
     
     
    	var flake= document.createElement('img');
    	flake.style.border='0';
    	flake.style.width="auto";
    	flake.style.height="auto";
    	flake.style.position='absolute';
    	flake.style.top='15px';
    	flake.style.left='15px';
    	flake.style.display="none";
     
    	//Position des flocons
    	var i=0;
    	while (i < densite) {  
    		dx[i] = 0;                        // set coordonnés variables 
    		xp[i] = Math.random()*(doc_width-50);  // positions variables 
    		yp[i] = Math.random()*doc_height; 
    		am[i] = Math.random()*40;         // amplitude de balancement 
    		vx[i] = 0.02 + Math.random()/10 * vitesseH; // vitesse horizontale variable 
    		vy[i] = 0.9 + Math.random() * vitesseV;     // vitesse verticale variable 
     
     
    		var opacite=Math.random()*100;
    		var newflake=flake.cloneNode(true);
    		newflake.id="flocon"+i;
    		newflake.zIndex=i+1;
     
     
    		newflake.src=(i % 2==0)?snowsrc.src:snowsrc1.src;
    		if(!document.all){newflake.style.height=20-(Math.floor((Math.random()*8)))+"px"}
    		IsIE?newflake.style.filter="alpha(opacity="+opacite+")":newflake.style.opacity=opacite/100;
    		document.body.appendChild(newflake);
    	i++
    	}
    	var neige=setInterval(function(){snow()},30);
    	if (changevent==true){ var girouette=setInterval(function(){wind()},4250);
    		}
    	if (changechute==true){ var intesite=setInterval(function(){fall()},7130);
    		}
    	}	
     
    function wind(){
    	drift = vent[forceH]
    	forceH++	
    	forceH=(forceH>vent.length)?0:forceH;
    }
     
    function fall()	{
    	vitesseV = chute[forceV]
    	forceV++	
    	forceV=(forceV>chute.length-1)?0:forceV;
    }  
     
      function snow() {  
     
    	//doc_width = document.body.offsetWidth; 
        //doc_height = document.body.offsetHeight;  
    	doc_width =(self!=top)?top.frames[0].document.body.offsetWidth:self.document.body.offsetWidth; 
        doc_height =(self!=top)?top.frames[0].document.body.offsetHeight:self.document.body.offsetHeight;   	  
     
    	var i=0;
        while (i < densite) {  
          yp[i] += vy[i]; 
          if (yp[i] > doc_height-20) { 
            xp[i] = (Math.random()*(doc_width-am[i]-30)); 
            yp[i] = 0; 
            vx[i] = (0.02 + Math.random()/10)*vitesseH; 
            vy[i] = (0.7 + Math.random())*vitesseV; 
          } 
     
          dx[i] += vx[i]; 
    	  document.getElementById("flocon"+i).style.display="block"
          document.getElementById("flocon"+i).style.top = yp[i]+"px"; 
    	  if (drift>0){
    					xp[i]=((xp[i]+drift/10)>doc_width)?-40:xp[i]+drift/10;
    				}
    	  if (drift<0){
    					xp[i]=((xp[i]+drift/10)<-40)?doc_width:xp[i]+drift/10;
    	  }
          document.getElementById("flocon"+i).style.left = xp[i] + am[i]*Math.sin(dx[i])+"px"; 
    	  i++
        } 
     
      }
    [/edit]
    Images attachées Images attachées   
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  17. #17
    Futur Membre du Club
    Profil pro
    Inscrit en
    décembre 2009
    Messages
    9
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : décembre 2009
    Messages : 9
    Points : 7
    Points
    7

    Par défaut

    toujours à propos des performances, je me demande si le redimensionnement des images, bien que très joli pour l'effet de relief, ne serait consommateur de beaucoup de ressources

    faudrait que je me lance dans le benchmarking JS, ça ne serait pas superflu car les perfs sont souvent un soucis... existe-t'il des outils pour ça ? ou un truc pour avoir le temps avec précision, comme le microtime() de PHP ?

  18. #18
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 127
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 127
    Points : 22 199
    Points
    22 199
    Billets dans le blog
    63

    Par défaut

    Si je puis me permettre, c'est plus zoli avec des flocons détourés
    C'est évident ! J'avais prévenu que ce n'était pas parfait.
    Merci SpaceFrog.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  19. #19
    Invité(e)
    Invité(e)

    Par défaut

    Je voulais essayer pour mon forum mais je ne sais pas du tout comment faire pour l'histoire des scrollbar :s

    Quelq'un saurait m'aider s'il vous plait ?

  20. #20
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 290
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 290
    Points : 65 585
    Points
    65 585
    Billets dans le blog
    1

    Par défaut

    il suffit de recupérer le scrollHeight et scrollWidth et de le mettre dans doc_height et doc_width
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

Discussions similaires

  1. Arrêter chute de neige
    Par elsydeons dans le forum ActionScript 1 & ActionScript 2
    Réponses: 9
    Dernier message: 13/11/2013, 17h41
  2. Simulateur réseau
    Par ipeteivince dans le forum Développement
    Réponses: 4
    Dernier message: 07/04/2008, 03h23
  3. Remédier aux décorations sous Dev C++
    Par AnteManoclis dans le forum Dev-C++
    Réponses: 9
    Dernier message: 13/12/2004, 16h50
  4. Simulateur fortran
    Par kaczmarek dans le forum Linux
    Réponses: 1
    Dernier message: 28/07/2004, 17h55
  5. Simulateur téléphonique
    Par vassilux dans le forum Autres Logiciels
    Réponses: 6
    Dernier message: 04/11/2003, 16h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo