L’hiver apporte souvent une ambiance magique, et quoi de mieux que d’ajouter cette touche hivernale à votre site web avec un effet de neige ?
Cet article vous guide à travers la création d’un effet visuel simple mais élégant, en utilisant HTML, CSS, et JavaScript.
Vous trouverez également le code source complet à la fin de l’article.
L’ajout d’animations saisonnières, comme la neige, peut rendre votre site web plus engageant et agréable pour vos visiteurs.
Cet effet de neige peut être utilisé pour célébrer les fêtes de fin d’année, apporter une touche spéciale à votre site ou simplement pour montrer vos compétences en développement web.
Le Code Source
Nous avons conçu un effet de neige minimaliste et non intrusif qui peut être facilement intégré à tout site web. Voici les différentes parties du code que vous pouvez utiliser.
HTML
Ce code HTML crée la structure nécessaire pour afficher l’effet de neige sur votre site web.
<div class='neigecoding'>
<canvas class='coding' id='coding'></canvas>
</div>CSS
Le code CSS ci-dessous positionne le canevas (canvas) de manière fixe en haut de la page, couvrant toute la largeur de la fenêtre, sans interférer avec le contenu de votre site.
.coding {
position: fixed;
top: 0;
left: 0;
right: 0;
pointer-events: none;
z-index: 20;
}
.neigecoding {
height: 100%;
position: relative;
overflow: hidden;
z-index: 1;
}JavaScript
Ce script JavaScript est responsable de la génération et de l’animation des flocons de neige. Les flocons sont représentés par des cercles qui se déplacent de haut en bas avec une légère variation aléatoire.
//<![CDATA[
!function(){
function t(t){
var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){
this.x=this.y=this.dx=this.dy=0,this.reset()
};
function a(){
e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){
if(t!=o.length){
o=[];for(var n=0;n<t;n++)o.push(new d)
}
}(e*i/1e4)
}
d.prototype.reset=function(){
this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5
},a(),function t(){
n.clearRect(0,0,e,i),n.fillStyle="rgba(255,255,255,.1)",o.forEach(function(t){
t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()
}),window.requestAnimationFrame(t)
}(),window.addEventListener("resize",a)
}
var n;
n=function(){
t(document.getElementById("coding"))
},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)
}();
//]]>Comment l’Intégrer à Votre Site
- Placez le code CSS dans l’en-tête (`<head>`) de votre page HTML.
- Placez le code HTML directement dans le corps de votre document à l’endroit où vous souhaitez que l’effet de neige apparaisse.
- Insérez le script JavaScript juste avant la fermeture de la balise `</body>` de votre document.
N’hésitez pas à personnaliser le code pour mieux l’adapter à votre thème et à l’atmosphère que vous souhaitez créer.
Demo/Telecharger
Afficher l’effet neige toutes l’année
Rajouter y du code JS pour faire de telle sorte que si la date est entre le mois de décembre à avril que l’effet s’affiche…
En utilisant le même procédé tu peux faire une animation pour le noël, halloween, Saint-Valentin….
chaque utilisateur doit modifier le code a sa manière