Abordons un sujet un peu plus saisonnier, les « flocons de neige » sur votre site web !
Si vous aussi vous êtes friand de ces petits gadgets visuels, cet article est fait pour vous !
Nous allons utiliser Javascript pour la mise en place de cet effet, ainsi que la libraire Particles.JS.
Pourquoi utiliser JS pour cet effet ? Du CSS ne conviendrait pas ?
Ahhh, longue hésitation avant de vous décider entre JS ou CSS ? La réponse pour les départager est simple : les performances.
Il est en effet tout à fait possible d’ajouter des flocons en pur CSS/HTML. Mais cette décision impliquera la création de très nombreux éléments dans le DOM, qui surchargera chaque pages d’éléments « inutiles » pour l’utilisateur, et risquerait d’impacter alors l’expérience utilisateur pour les configurations les plus modestes.
Particles.JS, quant à lui, reste un très bon compromis pour la performance. Les particules sont gérées directement dans un canvas, et n’impacterons que très peu l’expérience de vos utilisateurs !
Ajouter l’effet de flocons de neige sur votre site web
La librairie est plutôt simple d’utilisation, si vous souhaitez en savoir plus, je vous propose de vous rendre sur la documentation détaillée.
Je vous propose de vous partager mon code « clé en main », qui vous permet, en un simple copier-coller, d’ajouter cet effet flocons de neige sur n’importe quel site web !
// Attendons que votre site web soit prêt
document.addEventListener("DOMContentLoaded", function() {
// Création du containeur de script qui ajouter Particles.JS à votre site
let partJS=document.createElement('script');
partJS.setAttribute('src', 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js');
partJS.addEventListener('load', launchParticules);
document.body.appendChild(partJS);
// Création du conteneur qui recevera les flocons de neige
let snowJS=document.createElement('div');
snowJS.setAttribute('id', 'snow-js');
snowJS.setAttribute('style', 'position: absolute;width: 100%;height: 100%;z-index: -1;top:0px;');
document.body.appendChild(snowJS);
// Lancement des particules, avec Particles.JS
function launchParticules()
{
particlesJS("snow-js", {
particles: {
number: {
value: 52, // Réglez ici la quantité de flocons qui tombera
density: {
enable: true
}
},
color: {
value: "#fff" // Réglez ici la couleur
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: true,
anim: {
enable: false,
speed: 1, // Réglez ici la vitesse des flocons
opacity_min: 0.1,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: false,
distance: 500,
color: "#ffffff",
opacity: 0.4,
width: 2
},
move: {
enable: true,
speed: 1.5,
direction: "bottom",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: false,
mode: "bubble"
},
resize: true
}
},
retina_detect: true
});
}
});Ajoutez simplement ce code avant la fermeture de votre balise <body>, entouré par des balises <script></script>.
Le script va attendre automatiquement que le document soit prêt. Une fois que votre page est chargé, il ajoutera dynamiquement la librairie, créera le container, le mettra en fond de page, et lancera les flocons de neige !
Alors ? Le résultat ?
Prêt à vous lancer ? Copiez-collez directement le code ci-dessus, ou essayez la démo en ligne sur codepen !
En espérant que cet article aura pu vous aider et vous plaire ! Si c’est le cas, n’hésitez pas à le partager et à laisser un commentaire !
Belle fête à vous derrière votre écran 🙂 !
Besoin de gagner du temps ? Installez directement le plugin WordPress en 30 secondes !
super merci du conseil, jai intégré cela sur mon site, vous pouvez jeter un coup doeil : https://la-chapka.com/
mais le soucis que jai cest que ce nest pas actif sur toutes les pages, uniquement la page daccueil, une idée du problème ? merci
Ah super !
Hum il me semble que sur Shopify il est possible de modifier le template du header/footer du thème pour ajouter ça directement dans l’un des deux, comme ça il sera chargé sur n’importe quelle page 😉
Référence : https://community.shopify.com/c/shopify-design/adding-tracking-script-to-every-page/m-p/972725