Aquazus 12 Posté(e) le 17 décembre 2016 Partager Posté(e) le 17 décembre 2016 Voila un petit tuto très rapide vu que c'est noël, je vais vous apprendre à faire tomber de la neige sur votre site ;) (Tutoriel réservé aux personnes qui ont un minimum de connaissances en web) On va utiliser cette librairie: Pour avoir accès à ce lien, merci de vous connecter. <script src="https://github.com/downloads/kopipejst/jqSnow/jquery.snow.min.1.0.js"></script> Je vous conseille de mettre ce script dans votre header.php si vous en avez un, ou un global. Vérifiez que votre site utilise jQuery. si il ne l'utilise pas voici le script: <script src="https://code.jquery.com/jquery-latest.js"></script> La librairie snow doit être déclarée après jQuery. Si votre header possède déjà un $(document).ready, rajoutez simplement $.fn.snow(); à l'intérieur. Sinon, rajoutez ceci après jQuery et la librairie: <script type="text/javascript"> $(document).ready(function(e) { $.fn.snow(); }); </script> Voila l'installation basique. Vous pouvez configurer votre neige avec plusieurs arguments, exemple : $.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#0099FF' }); Voici la liste des options et leur description : minSize - Taille minimum des flocons, 10 par défaut maxSize - Taille maximum des flocons, 20 par défaut newOn - Fréquence (délai) en millisecondes (1000ms = 1s) entre deux flocons, 500 par défaut flakeColor - Couleur des flocons (format hex), #FFFFFF par défaut Pour la couleur des flocons, utilisez ce site : Pour avoir accès à ce lien, merci de vous connecter. Vous devez prendre le code "HEX" au dessus de la palette. Voila le résultat sans aucune option configurée, elle n'est pas trop visible et ne gêne pas tout en étant joli ;) Pour avoir accès à ce lien, merci de vous connecter. Si vous avez besoin d'aide pour configurer la librairie, MP moi ou ajoutez moi skype: aquazus Lien à poster Partager sur d’autres sites Plus d'options de partage...
Invité Posté(e) le 17 décembre 2016 Partager Posté(e) le 17 décembre 2016 Merci pour ton tutoriel, seul point négatif on ne les voit pas très bien sur ton screen! Lien à poster Partager sur d’autres sites Plus d'options de partage...
Aquazus 12 Posté(e) le 17 décembre 2016 Auteur Partager Posté(e) le 17 décembre 2016 il y a 3 minutes, xToz a dit : Merci pour ton tutoriel, seul point négatif on ne les voit pas très bien sur ton screen! La palette de couleur de mon site est pas adaptée au flocons, et j'utilise les paramètres par défaut qui créent une neige discrète. De plus, quand quelque chose est fixe, on ne le voit pas, je vais poster un gif à la place ca sera mieux ;) Lien à poster Partager sur d’autres sites Plus d'options de partage...
Invité Remi Posté(e) le 17 décembre 2016 Partager Posté(e) le 17 décembre 2016 Merci sa peut etre utile, mais les flocons ne sont pas tout à fait blanc si ? Lien à poster Partager sur d’autres sites Plus d'options de partage...
Aquazus 12 Posté(e) le 17 décembre 2016 Auteur Partager Posté(e) le 17 décembre 2016 à l’instant, MonsieurBanane a dit : Merci sa peut etre utile, mais les flocons ne sont pas tout à fait blanc si ? Si si, ils sont parfaitement blanc. Pour avoir accès à ce lien, merci de vous connecter. EDIT: De toute manière, la couleur est configurable. Lien à poster Partager sur d’autres sites Plus d'options de partage...
Invité Remi Posté(e) le 17 décembre 2016 Partager Posté(e) le 17 décembre 2016 à l’instant, Aquazus a dit : Si si, ils sont parfaitement blanc. Pour avoir accès à ce lien, merci de vous connecter. Ah oui c'est mieux en animé merci :) Lien à poster Partager sur d’autres sites Plus d'options de partage...
Aquazus 12 Posté(e) le 17 décembre 2016 Auteur Partager Posté(e) le 17 décembre 2016 il y a 7 minutes, xToz a dit : Merci pour ton tutoriel, seul point négatif on ne les voit pas très bien sur ton screen! Pour avoir accès à ce lien, merci de vous connecter. C'est mieux non? :) Lien à poster Partager sur d’autres sites Plus d'options de partage...
Invité Posté(e) le 17 décembre 2016 Partager Posté(e) le 17 décembre 2016 Effectivement, mais pourquoi il n'y en a pas à droite? Lien à poster Partager sur d’autres sites Plus d'options de partage...
Aquazus 12 Posté(e) le 18 décembre 2016 Auteur Partager Posté(e) le 18 décembre 2016 Il y a 4 heures, xToz a dit : Effectivement, mais pourquoi il n'y en a pas à droite? C'est juste l'aléatoire ^^ Lien à poster Partager sur d’autres sites Plus d'options de partage...
Karzing 3 Posté(e) le 18 décembre 2016 Partager Posté(e) le 18 décembre 2016 Merci du tutoriel, mais beaucoup trop compliqué. Tu rajoutes trop de codes et de lignes. Ca brouille les yeux.. Juste un code script a mettre, mettre ton propre js dans ton assets et voilà. Cordialement, Karzing Lien à poster Partager sur d’autres sites Plus d'options de partage...
Aquazus 12 Posté(e) le 18 décembre 2016 Auteur Partager Posté(e) le 18 décembre 2016 Il y a 1 heure, Karzing a dit : Merci du tutoriel, mais beaucoup trop compliqué. Tu rajoutes trop de codes et de lignes. Ca brouille les yeux.. Juste un code script a mettre, mettre ton propre js dans ton assets et voilà. T'es le seul à pas comprendre visiblement, tout est très clair. Si vous êtes pas capable de tirer les informations qui vous intéressent d'un résumé dans ce cas il faut retourner au lycée apprendre à lire une dissertation :) Lien à poster Partager sur d’autres sites Plus d'options de partage...
Karzing 3 Posté(e) le 18 décembre 2016 Partager Posté(e) le 18 décembre 2016 il y a 21 minutes, Aquazus a dit : T'es le seul à pas comprendre visiblement, tout est très clair. Si vous êtes pas capable de tirer les informations qui vous intéressent d'un résumé dans ce cas il faut retourner au lycée apprendre à lire une dissertation :) Euh pourquoi tu fais le mec ? Tu veux un truc moins compliqué ? Ok tiens : Citation <script src='../js/snowstorm.js' type='text/javascript'/> <script type='text/javascript'> snowStorm.snowColor = '#FFFFFF'; </script> Citation /* DHTML Snowstorm! OO-style Jascript-based Snow effect ---------------------------------------------------- Version 1.4.20091115 (Previous rev: v1.3.20081215) Code by Scott Schiller - Pour avoir accès à ce lien, merci de vous connecter. ---------------------------------------------------- Initializes after body onload() by default (via addEventHandler() call at bottom.) To customize properties, edit below or override configuration after this script has run (but before body.onload), eg. snowStorm.snowStick = false; */ var snowStorm = null; function SnowStorm() { // --- PROPERTIES --- this.flakesMax = 128; // Limit total amount of snow made (falling + sticking) this.flakesMaxActive = 64; // Limit amount of snow falling at once (less = lower CPU use) this.animationInterval = 33; // Theoretical "miliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower this.flakeBottom = null; // Integer for Y axis snow limit, 0 or null for "full-screen" snow effect this.targetElement = null; // element which snow will be appended to (document body if null/undefined) - can be an element ID string, or a DOM node reference this.followMouse = true; // Snow will change movement with the user's mouse this.snowColor = '#fff'; // Don't eat (or use?) yellow snow. this.snowCharacter = '•'; // • = bullet, · is square on some systems etc. this.snowStick = true; // Whether or not snow should "stick" at the bottom. When off, will never collect. this.useMeltEffect = true; // When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it this.useTwinkleEffect = false; // Allow snow to randomly "flicker" in and out of view while falling this.usePositionFixed = false; // true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported // --- less-used bits --- this.flakeLeftOffset = 0; // amount to subtract from edges of container this.flakeRightOffset = 0; // amount to subtract from edges of container this.flakeWidth = 8; // max pixel width for snow element this.flakeHeight = 8; // max pixel height for snow element this.vMaxX = 5; // Maximum X velocity range for snow this.vMaxY = 4; // Maximum Y velocity range this.zIndex = 0; // CSS stacking order applied to each snowflake // --- End of user section --- // jslint global declarations /*global window, document, navigator, clearInterval, setInterval */ var addEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) { return o.addEventListener(evtName,evtHandler,false); }:function(o,evtName,evtHandler) { return o.attachEvent('on'+evtName,evtHandler); }); var removeEvent = (typeof(window.attachEvent)=='undefined'?function(o,evtName,evtHandler) { return o.removeEventListener(evtName,evtHandler,false); }:function(o,evtName,evtHandler) { return o.detachEvent('on'+evtName,evtHandler); }); function rnd(n,min) { if (isNaN(min)) { min = 0; } return (Math.random()*n)+min; } function plusMinus(n) { return (parseInt(rnd(2),10)==1?n*-1:n); } var s = this; var storm = this; this.timers = []; this.flakes = []; this.disabled = false; this.active = false; var isIE = navigator.userAgent.match(/msie/i); var isIE6 = navigator.userAgent.match(/msie 6/i); var isOldIE = (isIE && (isIE6 || navigator.userAgent.match(/msie 5/i))); var isWin9X = navigator.appVersion.match(/windows 98/i); var isiPhone = navigator.userAgent.match(/iphone/i); var isBackCompatIE = (isIE && document.compatMode == 'BackCompat'); var noFixed = ((isBackCompatIE || isIE6 || isiPhone)?true:false); var screenX = null; var screenX2 = null; var screenY = null; var scrollY = null; var vRndX = null; var vRndY = null; var windOffset = 1; var windMultiplier = 2; var flakeTypes = 6; var fixedForEverything = false; var opacitySupported = (function(){ try { document.createElement('div').style.opacity = '0.5'; } catch (e) { return false; } return true; })(); var docFrag = document.createDocumentFragment(); if (s.flakeLeftOffset === null) { s.flakeLeftOffset = 0; } if (s.flakeRightOffset === null) { s.flakeRightOffset = 0; } this.meltFrameCount = 20; this.meltFrames = []; for (var i=0; i<this.meltFrameCount; i++) { this.meltFrames.push(1-(i/this.meltFrameCount)); } this.randomizeWind = function() { vRndX = plusMinus(rnd(s.vMaxX,0.2)); vRndY = rnd(s.vMaxY,0.2); if (this.flakes) { for (var i=0; i<this.flakes.length; i++) { if (this.flakes.active) { this.flakes.setVelocities(); } } } }; this.scrollHandler = function() { // "attach" snowflakes to bottom of window if no absolute bottom value was given scrollY = (s.flakeBottom?0:parseInt(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop,10)); if (isNaN(scrollY)) { scrollY = 0; // Netscape 6 scroll fix } if (!fixedForEverything && !s.flakeBottom && s.flakes) { for (var i=s.flakes.length; i--;) { if (s.flakes.active === 0) { s.flakes.stick(); } } } }; this.resizeHandler = function() { if (window.innerWidth || window.innerHeight) { screenX = window.innerWidth-(!isIE?16:2)-s.flakeRightOffset; screenY = (s.flakeBottom?s.flakeBottom:window.innerHeight); } else { screenX = (document.documentElement.clientWidth||document.body.clientWidth||document.body.scrollWidth)-(!isIE?8:0)-s.flakeRightOffset; screenY = s.flakeBottom?s.flakeBottom:(document.documentElement.clientHeight||document.body.clientHeight||document.body.scrollHeight); } screenX2 = parseInt(screenX/2,10); }; this.resizeHandlerAlt = function() { screenX = s.targetElement.offsetLeft+s.targetElement.offsetWidth-s.flakeRightOffset; screenY = s.flakeBottom?s.flakeBottom:s.targetElement.offsetTop+s.targetElement.offsetHeight; screenX2 = parseInt(screenX/2,10); }; this.freeze = function() { // pause animation if (!s.disabled) { s.disabled = 1; } else { return false; } for (var i=s.timers.length; i--;) { clearInterval(s.timers); } }; this.resume = function() { if (s.disabled) { s.disabled = 0; } else { return false; } s.timerInit(); }; this.toggleSnow = function() { if (!s.flakes.length) { // first run s.start(); } else { s.active = !s.active; if (s.active) { s.show(); s.resume(); } else { s.stop(); s.freeze(); } } }; this.stop = function() { this.freeze(); for (var i=this.flakes.length; i--;) { this.flakes.o.style.display = 'none'; } removeEvent(window,'scroll',s.scrollHandler); removeEvent(window,'resize',s.resizeHandler); if (!isOldIE) { removeEvent(window,'blur',s.freeze); removeEvent(window,'focus',s.resume); } }; this.show = function() { for (var i=this.flakes.length; i--;) { this.flakes.o.style.display = 'block'; } }; this.SnowFlake = function(parent,type,x,y) { var s = this; var storm = parent; this.type = type; this.x = x||parseInt(rnd(screenX-20),10); this.y = (!isNaN(y)?y:-rnd(screenY)-12); this.vX = null; this.vY = null; this.vAmpTypes = [1,1.2,1.4,1.6,1.8]; // "amplification" for vX/vY (based on flake size/type) this.vAmp = this.vAmpTypes[this.type]; this.melting = false; this.meltFrameCount = storm.meltFrameCount; this.meltFrames = storm.meltFrames; this.meltFrame = 0; this.twinkleFrame = 0; this.active = 1; this.fontSize = (10+(this.type/5)*10); this.o = document.createElement('div'); this.o.innerHTML = storm.snowCharacter; this.o.style.color = storm.snowColor; this.o.style.position = (fixedForEverything?'fixed':'absolute'); this.o.style.width = storm.flakeWidth+'px'; this.o.style.height = storm.flakeHeight+'px'; this.o.style.fontFamily = 'arial,verdana'; this.o.style.overflow = 'hidden'; this.o.style.fontWeight = 'normal'; this.o.style.zIndex = storm.zIndex; docFrag.appendChild(this.o); this.refresh = function() { if (isNaN(s.x) || isNaN(s.y)) { // safety check return false; } s.o.style.left = s.x+'px'; s.o.style.top = s.y+'px'; }; this.stick = function() { if (noFixed || (storm.targetElement != document.documentElement && storm.targetElement != document.body)) { s.o.style.top = (screenY+scrollY-storm.flakeHeight)+'px'; } else if (storm.flakeBottom) { s.o.style.top = storm.flakeBottom+'px'; } else { s.o.style.display = 'none'; s.o.style.top = 'auto'; s.o.style.bottom = '0px'; s.o.style.position = 'fixed'; s.o.style.display = 'block'; } }; this.vCheck = function() { if (s.vX>=0 && s.vX<0.2) { s.vX = 0.2; } else if (s.vX<0 && s.vX>-0.2) { s.vX = -0.2; } if (s.vY>=0 && s.vY<0.2) { s.vY = 0.2; } }; this.move = function() { var vX = s.vX*windOffset; s.x += vX; s.y += (s.vY*s.vAmp); if (s.x >= screenX || screenX-s.x < storm.flakeWidth) { // X-axis scroll check s.x = 0; } else if (vX < 0 && s.x-storm.flakeLeftOffset<0-storm.flakeWidth) { s.x = screenX-storm.flakeWidth-1; // flakeWidth; } s.refresh(); var yDiff = screenY+scrollY-s.y; if (yDiff<storm.flakeHeight) { s.active = 0; if (storm.snowStick) { s.stick(); } else { s.recycle(); } } else { if (storm.useMeltEffect && s.active && s.type < 3 && !s.melting && Math.random()>0.998) { // ~1/1000 chance of melting mid-air, with each frame s.melting = true; s.melt(); // only incrementally melt one frame // s.melting = false; } if (storm.useTwinkleEffect) { if (!s.twinkleFrame) { if (Math.random()>0.9) { s.twinkleFrame = parseInt(Math.random()*20,10); } } else { s.twinkleFrame--; s.o.style.visibility = (s.twinkleFrame && s.twinkleFrame%2===0?'hidden':'visible'); } } } }; this.animate = function() { // main animation loop // move, check status, die etc. s.move(); }; this.setVelocities = function() { s.vX = vRndX+rnd(storm.vMaxX*0.12,0.1); s.vY = vRndY+rnd(storm.vMaxY*0.12,0.1); }; this.setOpacity = function(o,opacity) { if (!opacitySupported) { return false; } o.style.opacity = opacity; }; this.melt = function() { if (!storm.useMeltEffect || !s.melting) { s.recycle(); } else { if (s.meltFrame < s.meltFrameCount) { s.meltFrame++; s.setOpacity(s.o,s.meltFrames[s.meltFrame]); s.o.style.fontSize = s.fontSize-(s.fontSize*(s.meltFrame/s.meltFrameCount))+'px'; s.o.style.lineHeight = storm.flakeHeight+2+(storm.flakeHeight*0.75*(s.meltFrame/s.meltFrameCount))+'px'; } else { s.recycle(); } } }; this.recycle = function() { s.o.style.display = 'none'; s.o.style.position = (fixedForEverything?'fixed':'absolute'); s.o.style.bottom = 'auto'; s.setVelocities(); s.vCheck(); s.meltFrame = 0; s.melting = false; s.setOpacity(s.o,1); s.o.style.padding = '0px'; s.o.style.margin = '0px'; s.o.style.fontSize = s.fontSize+'px'; s.o.style.lineHeight = (storm.flakeHeight+2)+'px'; s.o.style.textAlign = 'center'; s.o.style.verticalAlign = 'baseline'; s.x = parseInt(rnd(screenX-storm.flakeWidth-20),10); s.y = parseInt(rnd(screenY)*-1,10)-storm.flakeHeight; s.refresh(); s.o.style.display = 'block'; s.active = 1; }; this.recycle(); // set up x/y coords etc. this.refresh(); }; this.snow = function() { var active = 0; var used = 0; var waiting = 0; var flake = null; for (var i=s.flakes.length; i--;) { if (s.flakes.active == 1) { s.flakes.move(); active++; } else if (s.flakes.active === 0) { used++; } else { waiting++; } if (s.flakes.melting) { s.flakes.melt(); } } if (active<s.flakesMaxActive) { flake = s.flakes[parseInt(rnd(s.flakes.length),10)]; if (flake.active === 0) { flake.melting = true; } } }; this.mouseMove = function(e) { if (!s.followMouse) { return true; } var x = parseInt(e.clientX,10); if (x<screenX2) { windOffset = -windMultiplier+(x/screenX2*windMultiplier); } else { x -= screenX2; windOffset = (x/screenX2)*windMultiplier; } }; this.createSnow = function(limit,allowInactive) { for (var i=0; i<limit; i++) { s.flakes[s.flakes.length] = new s.SnowFlake(s,parseInt(rnd(flakeTypes),10)); if (allowInactive || i>s.flakesMaxActive) { s.flakes[s.flakes.length-1].active = -1; } } storm.targetElement.appendChild(docFrag); }; this.timerInit = function() { s.timers = (!isWin9X?[setInterval(s.snow,s.animationInterval)]:[setInterval(s.snow,s.animationInterval*3),setInterval(s.snow,s.animationInterval)]); }; this.init = function() { s.randomizeWind(); s.createSnow(s.flakesMax); // create initial batch addEvent(window,'resize',s.resizeHandler); addEvent(window,'scroll',s.scrollHandler); if (!isOldIE) { addEvent(window,'blur',s.freeze); addEvent(window,'focus',s.resume); } s.resizeHandler(); s.scrollHandler(); if (s.followMouse) { addEvent(document,'mousemove',s.mouseMove); } s.animationInterval = Math.max(20,s.animationInterval); s.timerInit(); }; var didInit = false; this.start = function(bFromOnLoad) { if (!didInit) { didInit = true; } else if (bFromOnLoad) { // already loaded and running return true; } if (typeof s.targetElement == 'string') { var targetID = s.targetElement; s.targetElement = document.getElementById(targetID); if (!s.targetElement) { throw new Error('Snowstorm: Unable to get targetElement "'+targetID+'"'); } } if (!s.targetElement) { s.targetElement = (!isIE?(document.documentElement?document.documentElement:document.body):document.body); } if (s.targetElement != document.documentElement && s.targetElement != document.body) { s.resizeHandler = s.resizeHandlerAlt; // re-map handler to get element instead of screen dimensions } s.resizeHandler(); // get bounding box elements s.usePositionFixed = (s.usePositionFixed && !noFixed); // whether or not position:fixed is supported fixedForEverything = s.usePositionFixed; if (screenX && screenY && !s.disabled) { s.init(); s.active = true; } }; function doStart() { s.start(true); } if (document.addEventListener) { // safari 3.0.4 doesn't do DOMContentLoaded, maybe others - use a fallback to be safe. document.addEventListener('DOMContentLoaded',doStart,false); window.addEventListener('load',doStart,false); } else { addEvent(window,'load',doStart); } } snowStorm = new SnowStorm(); Bisous Cordialement, Karzing Lien à poster Partager sur d’autres sites Plus d'options de partage...
elfey 0 Posté(e) le 16 avril 2017 Partager Posté(e) le 16 avril 2017 Meric ! Mon Facebook: Elfey Retro Lien à poster Partager sur d’autres sites Plus d'options de partage...
Umbrella 12 Posté(e) le 12 novembre 2022 Partager Posté(e) le 12 novembre 2022 nostalgie quand tu nous tiens ahah ça rajeunit pas tout ça [ Rien de mieux que d'apprendre par sois même ] #Autodidacte Lien à poster Partager sur d’autres sites Plus d'options de partage...
JNR 0 Posté(e) le 13 décembre 2022 Partager Posté(e) le 13 décembre 2022 genial Lien à poster Partager sur d’autres sites Plus d'options de partage...
Messages recommandés
Créer un compte ou se connecter pour commenter
Vous devez être membre afin de pouvoir déposer un commentaire
Créer un compte
Créez un compte sur notre communauté. C’est facile !
Créer un nouveau compteSe connecter
Vous avez déjà un compte ? Connectez-vous ici.
Connectez-vous maintenant