Bonjour
Je partage Mon p’tit délire avec un code pour certaines occasions (décembre, janvier, printemps, été) qui s’affiche sur ma tablette (automatiquement) pour animer et agrémenter un peu cette dernière.
Vous pouvez adapter les tailles, les postions, les couleurs, modifier les dates
d’activation etc…
Pour plus de simplicité, j’ai mis le code dans un fichier plugin html display et à intégrer
au design comme un équipement.
Là, évidement les flocons et noël
<style>
/* Animations pour les éléments qui tombent */
.falling {
position: fixed;
top: -60px;
pointer-events: none;
z-index: 9999;
animation-name: fall, wind;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite;
}
/* Tailles et couleurs */
.snowflake { color: #fff; font-size: 12px; }
.santa { font-size: 40px; }
.gift { font-size: 30px; }
.champagne { font-size: 32px; }
.galette { font-size: 34px; }
.skieur { font-size: 36px; }
.flower { font-size: 20px; }
.egg { font-size: 30px; }
.chicken { font-size: 36px; }
.sun { font-size: 30px; }
.sunflower { font-size: 36px; }
@keyframes fall { from { transform: translateY(0); } to { transform: translateY(110vh); } }
@keyframes wind { 0% { margin-left:0 } 50% { margin-left:50px } 100% { margin-left:0 } }
/* Guirlande Noël réaliste avec fil mouvant */
.garland-realistic {
position: fixed;
top: 25px;
left: -35px;
width: 100%;
height: 60px;
pointer-events: none;
z-index: 9999;
}
@keyframes blink {
0% { opacity:0.2 }
50% { opacity:1 }
100% { opacity:0.2 }
}
@keyframes sway {
0% { transform: translateY(0px) }
25% { transform: translateY(2px) }
50% { transform: translateY(0px) }
75% { transform: translateY(-2px) }
100% { transform: translateY(0px) }
}
.garland-wire {
animation: sway 3s ease-in-out infinite;
transform-origin: top center;
}
</style>
<script>
const now = new Date();
const month = now.getMonth();
const day = now.getDate();
function randomLeft() { return Math.random() * 95 + 'vw'; }
function randomDuration(min, max) { return Math.random() * (max - min) + min; }
function createElement(className, emoji, minDur, maxDur, count=1){
for(let i=0;i<count;i++){
const el = document.createElement('div');
el.className = 'falling ' + className;
el.innerHTML = emoji;
el.style.left = randomLeft();
el.style.fontSize = (Math.random()*20+8) + 'px';
const duration = randomDuration(minDur,maxDur);
el.style.animationDuration = duration+'s, '+randomDuration(5,9)+'s';
document.body.appendChild(el);
setTimeout(()=>el.remove(), duration*1000);
}
}
// ❄️ Neige Décembre et Janvier
if(month===11 || month===0){
for(let i=0;i<50;i++){ createElement('snowflake','❄',30,50); }
setInterval(()=>createElement('snowflake','❄',30,50), 500);
// 🎄 Noël (Décembre)
if(month===11){
setInterval(()=>createElement('santa','🎅',35,55), 15000);
setInterval(()=>createElement('santa','🎅',35,55,3), 70000);
setInterval(()=>createElement('gift','🎁',25,40), 20000);
// Guirlande réaliste avec fil ondulé et léger mouvement
const container = document.createElement('div');
container.className = 'garland-realistic';
container.innerHTML = `
<svg viewBox="0 0 1000 60" width="100%" height="60">
<path class="garland-wire"
d="M0,30 C150,0 300,60 450,30 C600,0 750,60 900,30 C1050,0 1200,60 1350,30"
stroke="#222" stroke-width="3" fill="transparent"/>
<circle cx="50" cy="30" r="6" fill="red" style="animation: blink 1.5s infinite alternate"/>
<circle cx="150" cy="20" r="6" fill="yellow" style="animation: blink 1.5s infinite alternate 0.3s"/>
<circle cx="250" cy="40" r="6" fill="green" style="animation: blink 1.5s infinite alternate 0.6s"/>
<circle cx="350" cy="30" r="6" fill="blue" style="animation: blink 1.5s infinite alternate 0.9s"/>
<circle cx="450" cy="35" r="6" fill="orange" style="animation: blink 1.5s infinite alternate 1.2s"/>
<circle cx="550" cy="30" r="6" fill="red" style="animation: blink 1.5s infinite alternate 0.5s"/>
<circle cx="650" cy="20" r="6" fill="yellow" style="animation: blink 1.5s infinite alternate 0.8s"/>
<circle cx="750" cy="40" r="6" fill="green" style="animation: blink 1.5s infinite alternate 1.1s"/>
<circle cx="850" cy="25" r="6" fill="blue" style="animation: blink 1.5s infinite alternate 1.4s"/>
<circle cx="950" cy="35" r="6" fill="orange" style="animation: blink 1.5s infinite alternate 1.7s"/>
</svg>
`;
document.body.appendChild(container);
}
// Janvier
if(month===0){
setInterval(()=>createElement('champagne','🍾',30,45), 15000);
setInterval(()=>createElement('galette','👑🥧',35,55), 60000);
setInterval(()=>createElement('skieur','⛷️',25,40), 15000);
}
}
// 🐣 Pâques 3-10 avril
if(month===3 && day>=3 && day<=10){
for(let i=0;i<60;i++){ createElement('flower','🌸',25,40); }
setInterval(()=>createElement('egg','🥚',25,40), 15000);
setInterval(()=>createElement('chicken','🐔',25,40), 15000);
}
// 🌞 Été 21 juin → 6 juillet
if((month===5 && day>=21) || (month===6 && day<=6)){
for(let i=0;i<60;i++){ createElement('sun','🌞',25,40); }
setInterval(()=>createElement('sunflower','🌻',25,40,3), 15000);
}
</script>
Passez une bonne fin d’année
