Animation chute de neige

rennais35000 · Décembre 12, 2023, 7:54

De grands gamins que nous sommes, mais c’est rafraichissant dans ce monde de fou

noodom · Décembre 12, 2023, 8:09

Allez, pour aller toujours plus loin dans l’esprit de Noël, un petit ajout de suivi de souris avec des étoiles aux couleurs multiples

Possibilité de choisir la direction des animations des étoiles depuis custom.js :

// valeurs possibles : 1=anim vers le bas, 0=anim horizontale, -1=anim vers le haut
let fallDirection = 1;

starsMouseOver

Bon, avec les étoiles qui tombent, elles passent un peu inaperçues sur la vidéo

custom.css

.starMouse {
  transform-style: preserve-3d;
  width: 1px;
  height: 1px;
  position: absolute;
  color: red;
  pointer-events: none;
  z-index: 50;
}

.starMouse:before {
  position: absolute;
  content: "✦";
  color: inherit;
  inset: 0;
  text-shadow: 0 0 1em #fff5;
}

.star {
  position: absolute;
  top: -20px;
  animation: animate 5s linear forwards;
  z-index: 50;
}

.star::before {
  content: '\f005';
  text-shadow: 0 0 5px #fff,
    0 0 20px #fff,
    0 0 50px #fff, ;
}

@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh - 24px)) rotate(360deg);
    opacity: 0;
  }
}

#div_displayObject .eqLogic::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -4px;
    right: -5px;
    height: 18px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFpJREFUeNrUV0tIo1cUvpkYjQ4xxSA6DxuNqG0dtaUKOgs3s6i0dFd3pSsXdjeIixakiGA34sZuXCkoONLFwJTK4GMYLYXg29gatTpiXurkbd7vv9/5ub+IxuhA7eiFQ5Kbc8/57ne/e87/ywRBYLdl3GG3aNwqsLJ0k0tLS+fmcnNzWUVFBVMoFGx2djarvLxcm5OTw+bm5iytra2xc4ExNjY27iqVyvvwK6CpeDzuCYVC1urq6qDA9UcfPp+PHR4esmAwKK6tr68/l5/8rgQ2Ozub1dbWyiYmJooaGxt/VqvV38jlchX9l0qlwoFA4DWS/RKLxRxFRUVf5+XlPcaaT2AP0sVPJBL2SCRiAPBpu93+vKamZo/Ae71eZjabWV1dXVqw7CKwp43ksrCw8Bhg7MJ/PLDZ5PHx8cz29vYT5JGD/bSYLgTrcDgYdk6siSc6NjZWDaAe4ZoHQL+cmZnRpZPnhWDpD8kw7uKo9ML/NMCsd2tr61vkzboMrEyv138M7TyLRqMWMBsX3sMgaZhMpp+AR5EJrCocDpuEGzKg4x8khs+CVWxubvZfR9JkMik4nU7BarUKLpeLmLsKuwIqTLynp4fqmIzASrqQT09Pf1VVVfX0KsWZ6uHBwQHTaDSsoKAgo6/H4xHLEcrVyRwuEisrKzs5XrrIVAVwiUVDKRRrL+YI32ewdVhMApuHWvcj6vids6J2u90MF4yBHUZNgKoEBaRBQalJqFSqtJfUYrGIlQX+ydXVVTN+u0tKSjQNDQ1axJVl2iTypebn55d7e3v/kqoDgZU1NTU9LCws/Py0M+2ekuGincxJ3yF+18jIyHJLS0slQJUWFxczrBeBE0vE5tHRkbixlZWVfSR8gTX/0P5gH7S1tX3Z3t7+BW8qAvwSfr8/jA0EIRM/qoFtampqbW9vTw+XA+ojUruVd3Z2tvb19T2TQFEim81GgVJoCvvj4+NLOJZgaWmpemdn5y3a6BbcnJDAw8HBwac6ne6eqCW5XDwB3qVSqM9/DAwMUNy/eVLabT7sI25qwgujThCBhWE+mAt2yNc4SQKSZrOQQE1HS22VJkmPAGTr7+//fX19fRk+Zgq0trbGeFAKEAQT98BSqKOj47vm5uaa/Px8JeIk4GcaHh6eWlxcfAU/A8xG67BxAX3fwdcbYUpSDJ06Z49Ak8ZC3OL8f3YiA4PBYKdLQ2AJ9OTk5GpXV9cQiCVh79M94QtlPLDUE/1gPNrd3f0W33W4cBoco48zQuy/IZYAMnGqlSc4c66L9JruQUaSARXeT8HGKzxAqFBekni6+h46+pMzGiJGMgTOJh1yU/KNEGDvZWvfBawkA9ppwGg0mrRa7SOI2g+gxOgbJIpdFpj72PnxSnPX8vqRxTURgBQWKisrH+GThOm+CtAzoK/9/Uiqq/6hoaHfdnd3jaOjo7/yY7yxbwqkWy3sQzpS2C6YirwvUJk0y7hurfyGRrnduPGvAAMASmo8wzeVwfsAAAAASUVORK5CYII=) no-repeat 0 0, url(data:image/png;base64,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) no-repeat 70% 0, url(data:image/png;base64,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) no-repeat 30% 0, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAXCAYAAACFxybfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAodJREFUeNrsVb1rWlEUv2pN/GqspKRSKFYXWzEloIWif0Fn6dJChQ7OQil0qd3EzcEpg0OgdHDr4CQODk7VRlLMEIVqApX4We0zflR9/Z1Ui4T34ksaaAYP/Hzc673n/M6550PG8zz73yKjn0wm83fDYDAwo9HINBrNnwOQg4MDs0ql2lQqlfdAWont7ng8Pjw+Ps44nc4G1pI9EXWaSOzt7TGO42aH5Pv7+08ajUZ0MBiUeXEZd7vdL5VK5fX29rZ+5tQiEmdxKrlcjsEYczgcynK5/BKKv/IXFNz/XiqVXkHdjUuRIA9SqdRD8or/R8Ez9fr9fqHVakUR4c2z0REjIQuHw2ZcrPBXLCA0RHTezEdHjIQqkUhEr9I4HOILhQLf6/VoOUFEvDMiQiToDx1Cdz+bzZ6bUFarlel0OkkVUK/XWbvdPoVer5fh3ntsfwJ+CJ2XA4p0Op1bpBgJyxDehQQ6nQ5DZXHBYDBZq9V+EhFUndnr9drEqoc2bwJbwGPgtohuVSwWe2Gz2TZMJpNgRKi6qtUqg2EWj8dTgUDgo0KhWPN4PC70EvXOzs67fD6/S6kiRIKeZA1YJ2MiJNbdbvfTUCjkV6vVK2hcDF8GI2w0GrGTkxM2HA5PDxaLxSOfz/cWEfk81X0XIMMFgJJ/srBjCgk8IdcfuVyuZ36//7nFYtkQyAMumUzuRiKRD0jMFLa+AZOpYwqgB/ziBVqmVBKUO7eAB/R0WG/Z7XaTVqtdbTabHJL6EK2djBaBPHA0NSqpbUsiMUeEBgpF4Q5AbZrmSJ/yEWgBTaBNHl9kdkgmMUeG7qwAq9PqovceTA3zlxlgsuswyuXsGsiSxJLEkoSY/BZgAEjRodi+uBruAAAAAElFTkSuQmCC) no-repeat 100% 0;
  opacity: 0.6;
}

custom.js

$(document).ready (function(){
	$('.eqLogic-widget[data-eqLogic_id="1523"]').css('transform', 'rotate(45deg)');
        function stars() {

            let e = document.createElement("div");
            e.setAttribute("class", "fas fa-star star");
            document.body.appendChild(e);
            e.style.left = Math.random() * + innerWidth + "px";

            let size = Math.random() * 12;
            let duration = Math.random() * 3;

            e.style.fontSize = 12 + size + "px";
            e.style.animationDuration = 2 + duration + "s";

            setTimeout(function () {
                document.body.removeChild(e);
            }

                , 5000);
        }

        setInterval(function () {
            stars();
        }

            , 100);
  
})

// valeurs possibles : 1=anim vers le bas, 0=anim horizontale, -1=anim vers le haut
let fallDirection = 1;
let x1=0, y1=0;

const 
  vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
  dist_to_draw = 50,
  delay = 1000,
  fsize = ['1.1rem', '1.4rem', '.8rem', '1.7rem'],
  colors = ['#E23636', '#F9F3EE', '#E1F8DC', '#B8AFE6', '#AEE1CD', '#5EB0E5'],
  rand = (min, max) => 
    Math.floor(Math.random() * (max - min + 1)) + min,
  selRand = (o) => o[rand(0, o.length -1)],
  distanceTo =  (x1, y1, x2, y2) => 
    Math.sqrt((Math.pow(x2-x1,2))+(Math.pow(y2-y1,2))),
  shouldDraw = (x, y) => 
    (distanceTo(x1, y1, x, y) >= dist_to_draw),
  addStr = (x, y) => {
    const str = document.createElement("div");
    str.innerHTML = '&#10022;';
    str.className = 'starMouse';
    str.style.top = `${y + rand(-20,20)}px`;
    str.style.left = `${x}px`;
    str.style.color = selRand(colors);
    str.style.fontSize = selRand(fsize);
    document.body.appendChild(str);
    const fs = 10 + 5 * parseFloat(getComputedStyle(str).fontSize);
    str.animate(
      {
        translate: [
          `${rand(-5, 5)}px ${((y+fs)>vh?vh-y:fs) * fallDirection * .3}px`,
          `${rand(-20, 20)}px ${((y+fs)>vh?vh-y:fs) * fallDirection}px`],
        opacity: [1,0],
        transform: ['rotateX(0) rotateY(0)',`rotateX(${rand(1, 500)}deg) rotateY(${rand(1, 500)}deg)`]
      }, {
        duration: delay,
        fill: 'forwards',
        rangeStart: ["cover 0% ", "cover 40%"],
        rangeEnd: ["cover 40% ", "cover 100%"]
    });

    setTimeout(() => {
        str.remove();
      }, delay);
  }

addEventListener("mousemove", (e) => {
  const {clientX, clientY} = e;
  if (shouldDraw(clientX, clientY)){
    addStr(clientX, clientY);
    x1 = clientX;
    y1 = clientY;
  }
});

Phpvarious · Décembre 12, 2023, 8:17

Il y a une cacahuète dans le texte préformatté du custom.js, idem en custom.css

noodom · Décembre 12, 2023, 8:21

ça doit être ok, merci j’avais zappé les balises de code.

morlong · Mai 1, 2024, 2:15

Bonjour @Phpvarious, je prépare l’hiver!
j’ai réussi à installer l’effet neige qui tombe en galerant un peu car j’avais pas compris qui fallait coché la case « avancée » dans le menu « Réglage » « Configuration » onglet « interface », mais c’est bon. Avec le scénario de Spine, ca marche nickel.
Par contre, je n’arrive pas a avoir l’effet neige sur les tuiles,
peut tu m’expliquer comment faire s’il te plait pour l’intégrer?

et sinon si on veux remplacer les flocons par des feuilles ou des citrouilles c’est faisable?
merci d’avance

noodom · Mai 1, 2024, 6:41

Hello,

Il faut récupérer les images souhaitées, les adapter à la bonne taille et générer le code correspondant à l’image.

récupération d’une image

adaptation de l’image : positionner son contenu, mettre un fond transparent, redimensionner avec une hauteur de 23px

génération du code avec le site https://www.base64-image.de/

recopier le code dans la personnalisation avancée en remplacement du code de la neige

Bon courage !

morlong · Mai 1, 2024, 6:55

Je vais essayer
merci Noodom

morlong · Mai 5, 2024, 5:11

Voilà le résultat et ma contribution;

scenario de desactivation

$fileCss = '/var/www/html/desktop/custom/custom.css'; $resultCss = file_get_contents($fileCss); if ($resultCss === false) { $scenario->setLog('Echec de la lecture du fichier custom.css'); } else { // $scenario->setLog($resultCss); $resultCss = preg_replace('/\/\* Snow \*\/.*?\/\* SnowEnd \*\//s', '', $resultCss); $resultCss = preg_replace('/\/\* Snowcadre \*\/.*?\/\* SnowcadreEnd \*\//s', '', $resultCss); $resultCss = preg_replace('/\/\* Feuilles d\'érable \*\/.*?\/\* Feuilles d\'érable End \*\//s', '', $resultCss); $resultCss = preg_replace('/\/\* Citrouille \*\/.*?\/\* Citrouille End \*\//s', '', $resultCss); $resultCss = preg_replace('/\/\* Fleurs qui poussent \*\/.*?\/\* Fleurs End \*\//s', '', $resultCss); $resultCss = preg_replace('/\/\* Fleurs qui tombent \*\/.*?\/\* Fleurs End \*\//s', '', $resultCss); // $scenario->setLog($resultCss); $resultCss = file_put_contents($fileCss, trim($resultCss)); if ($resultCss === false) { $scenario->setLog('Echec de l\'écriture du fichier custom.css'); } else { $scenario->setLog($resultCss . ' octets ont été écrits dans le fichier custom.css'); $fileJs = '/var/www/html/desktop/custom/custom.js'; $resultJs = file_get_contents($fileJs); if ($resultJs === false) { $scenario->setLog('Echec de la lecture du fichier custom.js'); } else { // $scenario->setLog($resultJs); $resultJs = preg_replace('/\/\* Animation \*\/.*?\/\* Animation End \*\//s', '', $resultJs); // $scenario->setLog($resultJs); $resultJs = file_put_contents($fileJs, trim($resultJs)); if ($resultCss === false) { $scenario->setLog('Echec de l\'écriture du fichier custom.js'); } else { $scenario->setLog($resultCss . ' octets ont été écrits dans le fichier custom.js'); message::add('Animation', 'L\'animation chute de neige a été désactivé'); } } } }

scenario citrouille

`$fileCss = ‹ /var/www/html/desktop/custom/custom.css ›;
$dataCss = ’
/* Citrouille /
.citrouille {
position: absolute;
top: -20px;
animation: animate 5s linear forwards;
z-index: 50;
}
.citrouille::before {
content: « »;
background-image: url(« …/…/data/img/citrouille1.png »);
width: 28px; / Largeur de votre image /
height: 28px; / Hauteur de votre image /
display: inline-block; / Pour que les dimensions fonctionnent /
color: green; / Changer la couleur de la feuille d'érable si nécessaire /
font-size: 28px; / Changer la taille de la feuille d'érable si nécessaire */
}

@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}

80% {
	opacity: 1;
}

100% {
	transform: translateY(calc(100vh - 24px)) rotate(360deg);
	opacity: 0;
}

}

.div_object legend .objectDashLegend {
background-color: transparent !important;
}
/* Citrouille End /‹ ;
$dataCss = $dataCss . PHP_EOL;
$resultCss = file_put_contents($fileCss, $dataCss, FILE_APPEND);
if ($resultCss === false) {
$scenario->setLog(« Echec de l’écriture du fichier custom.css »);
} else {
$scenario->setLog($resultCss . ’ octets ont été écrits dans le fichier custom.css ›);
$fileJs = ‹ /var/www/html/desktop/custom/custom.js ›;
$dataJs = ’
/ Animation /
document.addEventListener(« DOMContentLoaded », function () {
function leaves() {
let e = document.createElement(« div »);
e.setAttribute(« class », « citrouille »);
document.body.appendChild(e);
e.style.left = Math.random() * (innerWidth - 17 - 24) + « px »;
let size = Math.random() * 12;
let duration = Math.random() * 3;
e.style.fontSize = 12 + size + « px »;
e.style.animationDuration = 2 + duration + « s »;
setTimeout(function () {
document.body.removeChild(e);
}, 5000);
};
setInterval(function () {
leaves();
}, 100);
});
/ Animation End */‹ ;
$dataJs = $dataJs . PHP_EOL;
$resultJs = file_put_contents($fileJs, $dataJs, FILE_APPEND);
if ($resultJs === false) {
$scenario->setLog(« Echec de l’écriture du fichier custom.js »);
} else {
$scenario->setLog($resultJs . ’ octets ont été écrits dans le fichier custom.js ›);
message::add(« Animation », « L’animation chute de feuilles d’érable a été activée »);
}
}
`

scenario neige

`$fileCss = ‹ /var/www/html/desktop/custom/custom.css ›;
$dataCss = ’
/* Snowcadre /
#div_displayObject .eqLogic::before {
content: '';
position: absolute;
top: -5px;
left: -4px;
right: -5px;
height: 18px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAXCAYAAACS5bYWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFpJREFUeNrUV0tIo1cUvpkYjQ4xxSA6DxuNqG0dtaUKOgs3s6i0dFd3pSsXdjeIixakiGA34sZuXCkoONLFwJTK4GMYLYXg29gatTpiXurkbd7vv9/5ub+IxuhA7eiFQ5Kbc8/57ne/e87/ywRBYLdl3GG3aNwqsLJ0k0tLS+fmcnNzWUVFBVMoFGx2djarvLxcm5OTw+bm5iytra2xc4ExNjY27iqVyvvwK6CpeDzuCYVC1urq6qDA9UcfPp+PHR4esmAwKK6tr68/l5/8rgQ2Ozub1dbWyiYmJooaGxt/VqvV38jlchX9l0qlwoFA4DWS/RKLxRxFRUVf5+XlPcaaT2AP0sVPJBL2SCRiAPBpu93+vKamZo/Ae71eZjabWV1dXVqw7CKwp43ksrCw8Bhg7MJ/PLDZ5PHx8cz29vYT5JGD/bSYLgTrcDgYdk6siSc6NjZWDaAe4ZoHQL+cmZnRpZPnhWDpD8kw7uKo9ML/NMCsd2tr61vkzboMrEyv138M7TyLRqMWMBsX3sMgaZhMpp+AR5EJrCocDpuEGzKg4x8khs+CVWxubvZfR9JkMik4nU7BarUKLpeLmLsKuwIqTLynp4fqmIzASrqQT09Pf1VVVfX0KsWZ6uHBwQHTaDSsoKAgo6/H4xHLEcrVyRwuEisrKzs5XrrIVAVwiUVDKRRrL+YI32ewdVhMApuHWvcj6vids6J2u90MF4yBHUZNgKoEBaRBQalJqFSqtJfUYrGIlQX+ydXVVTN+u0tKSjQNDQ1axJVl2iTypebn55d7e3v/kqoDgZU1NTU9LCws/Py0M+2ekuGincxJ3yF+18jIyHJLS0slQJUWFxczrBeBE0vE5tHRkbixlZWVfSR8gTX/0P5gH7S1tX3Z3t7+BW8qAvwSfr8/jA0EIRM/qoFtampqbW9vTw+XA+ojUruVd3Z2tvb19T2TQFEim81GgVJoCvvj4+NLOJZgaWmpemdn5y3a6BbcnJDAw8HBwac6ne6eqCW5XDwB3qVSqM9/DAwMUNy/eVLabT7sI25qwgujThCBhWE+mAt2yNc4SQKSZrOQQE1HS22VJkmPAGTr7+//fX19fRk+Zgq0trbGeFAKEAQT98BSqKOj47vm5uaa/Px8JeIk4GcaHh6eWlxcfAU/A8xG67BxAX3fwdcbYUpSDJ06Z49Ak8ZC3OL8f3YiA4PBYKdLQ2AJ9OTk5GpXV9cQiCVh79M94QtlPLDUE/1gPNrd3f0W33W4cBoco48zQuy/IZYAMnGqlSc4c66L9JruQUaSARXeT8HGKzxAqFBekni6+h46+pMzGiJGMgTOJh1yU/KNEGDvZWvfBawkA9ppwGg0mrRa7SOI2g+gxOgbJIpdFpj72PnxSnPX8vqRxTURgBQWKisrH+GThOm+CtAzoK/9/Uiqq/6hoaHfdnd3jaOjo7/yY7yxbwqkWy3sQzpS2C6YirwvUJk0y7hurfyGRrnduPGvAAMASmo8wzeVwfsAAAAASUVORK5CYII=) no-repeat 0 0, url(data:image/png;base64,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) no-repeat 70% 0, url(data:image/png;base64,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) no-repeat 30% 0, url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAXCAYAAACFxybfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAodJREFUeNrsVb1rWlEUv2pN/GqspKRSKFYXWzEloIWif0Fn6dJChQ7OQil0qd3EzcEpg0OgdHDr4CQODk7VRlLMEIVqApX4We0zflR9/Z1Ui4T34ksaaAYP/Hzc673n/M6550PG8zz73yKjn0wm83fDYDAwo9HINBrNnwOQg4MDs0ql2lQqlfdAWont7ng8Pjw+Ps44nc4G1pI9EXWaSOzt7TGO42aH5Pv7+08ajUZ0MBiUeXEZd7vdL5VK5fX29rZ+5tQiEmdxKrlcjsEYczgcynK5/BKKv/IXFNz/XiqVXkHdjUuRIA9SqdRD8or/R8Ez9fr9fqHVakUR4c2z0REjIQuHw2ZcrPBXLCA0RHTezEdHjIQqkUhEr9I4HOILhQLf6/VoOUFEvDMiQiToDx1Cdz+bzZ6bUFarlel0OkkVUK/XWbvdPoVer5fh3ntsfwJ+CJ2XA4p0Op1bpBgJyxDehQQ6nQ5DZXHBYDBZq9V+EhFUndnr9drEqoc2bwJbwGPgtohuVSwWe2Gz2TZMJpNgRKi6qtUqg2EWj8dTgUDgo0KhWPN4PC70EvXOzs67fD6/S6kiRIKeZA1YJ2MiJNbdbvfTUCjkV6vVK2hcDF8GI2w0GrGTkxM2HA5PDxaLxSOfz/cWEfk81X0XIMMFgJJ/srBjCgk8IdcfuVyuZ36//7nFYtkQyAMumUzuRiKRD0jMFLa+AZOpYwqgB/ziBVqmVBKUO7eAB/R0WG/Z7XaTVqtdbTabHJL6EK2djBaBPHA0NSqpbUsiMUeEBgpF4Q5AbZrmSJ/yEWgBTaBNHl9kdkgmMUeG7qwAq9PqovceTA3zlxlgsuswyuXsGsiSxJLEkoSY/BZgAEjRodi+uBruAAAAAElFTkSuQmCC) no-repeat 100% 0;
opacity: 0.6;
}
/ SnowcadreEnd /
/ Snow */
.snowflake {
position: absolute;
top: -20px;
animation: animate 5s linear forwards;
z-index: 50;
}

.snowflake::before {
content: '\f2dc';
text-shadow: 0 0 5px #fff,
0 0 20px #fff,
0 0 50px #fff, ;
}

@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}

80% {
	opacity: 1;
}

100% {
	transform: translateY(calc(100vh - 24px)) rotate(360deg);
	opacity: 0;
}

}

.div_object legend .objectDashLegend {
background-color: transparent !important;
}

/* SnowEnd /‹ ;
$dataCss = $dataCss . PHP_EOL;
$resultCss = file_put_contents($fileCss, $dataCss, FILE_APPEND);
if ($resultCss === false) {
$scenario->setLog(‹ Echec de l'écriture du fichier custom.css ›);
} else {
$scenario->setLog($resultCss . ’ octets ont été écrits dans le fichier custom.css ›);
$fileJs = ‹ /var/www/html/desktop/custom/custom.js ›;
$dataJs = ’
/ Animation /
document.addEventListener(« DOMContentLoaded », function () {
document.querySelector(« #backgroundforJeedom »).style.transform = « rotate(45deg) »;
function stars() {
let e = document.createElement(« div »);
e.setAttribute(« class », « fas fa-snowflake snowflake »);
document.body.appendChild(e);
e.style.left = Math.random() * (innerWidth - 17 - 24) + « px »;
//e.style.top = Math.random() * window.innerHeight + « px »;
let size = Math.random() * 12;
let duration = Math.random() * 3;
e.style.fontSize = 12 + size + « px »;
e.style.animationDuration = 2 + duration + « s »;
setTimeout(function () {
document.body.removeChild(e);
}, 5000);
};
setInterval(function () {
stars();
}, 100);
});
/ Animation End */‹ ;
$dataJs = $dataJs . PHP_EOL;
$resultJs = file_put_contents($fileJs, $dataJs, FILE_APPEND);
if ($resultJs === false) {
$scenario->setLog(‹ Echec de l'écriture du fichier custom.js ›);
} else {
$scenario->setLog($resultJs . ’ octets ont été écrits dans le fichier custom.js ›);
message::add(‹ Animation ›, ‹ L'animation chute de neige a été activé ›);
}
}`

scenario Feuille d érable

`$fileCss = ‹ /var/www/html/desktop/custom/custom.css ›;
$dataCss = ’
/* Feuilles d'érable /
.feuille {
position: absolute;
top: -20px;
animation: animate 5s linear forwards;
z-index: 50;
}
.feuille::before {
content: « »;
background-image: url(« …/…/data/img/Feuille2.png »);
width: 24px; / Largeur de votre image /
height: 24px; / Hauteur de votre image /
display: inline-block; / Pour que les dimensions fonctionnent /
color: green; / Changer la couleur de la feuille d'érable si nécessaire /
font-size: 24px; / Changer la taille de la feuille d'érable si nécessaire */
}

@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}

80% {
	opacity: 1;
}

100% {
	transform: translateY(calc(100vh - 24px)) rotate(360deg);
	opacity: 0;
}

}

.div_object legend .objectDashLegend {
background-color: transparent !important;
}
/* Feuilles d'érable End /‹ ;
$dataCss = $dataCss . PHP_EOL;
$resultCss = file_put_contents($fileCss, $dataCss, FILE_APPEND);
if ($resultCss === false) {
$scenario->setLog(« Echec de l’écriture du fichier custom.css »);
} else {
$scenario->setLog($resultCss . ’ octets ont été écrits dans le fichier custom.css ›);
$fileJs = ‹ /var/www/html/desktop/custom/custom.js ›;
$dataJs = ’
/ Animation /
document.addEventListener(« DOMContentLoaded », function () {
function leaves() {
let e = document.createElement(« div »);
e.setAttribute(« class », « feuille »);
document.body.appendChild(e);
e.style.left = Math.random() * (innerWidth - 17 - 24) + « px »;
let size = Math.random() * 12;
let duration = Math.random() * 3;
e.style.fontSize = 12 + size + « px »;
e.style.animationDuration = 2 + duration + « s »;
setTimeout(function () {
document.body.removeChild(e);
}, 5000);
};
setInterval(function () {
leaves();
}, 100);
});
/ Animation End */‹ ;
$dataJs = $dataJs . PHP_EOL;
$resultJs = file_put_contents($fileJs, $dataJs, FILE_APPEND);
if ($resultJs === false) {
$scenario->setLog(« Echec de l’écriture du fichier custom.js »);
} else {
$scenario->setLog($resultJs . ’ octets ont été écrits dans le fichier custom.js ›);
message::add(« Animation », « L’animation chute de feuilles d’érable a été activée »);
}
}
`

scenario Fleurs qui poussent et tombent

`$fileCss = ‹ /var/www/html/desktop/custom/custom.css ›;
$dataCss = ’
/* Fleurs qui poussent */
.fleur-grow {
position: absolute;
bottom: 0px;
animation: grow 5s linear forwards;
z-index: 50;
transform-origin: bottom center;
}

.fleur-grow::before {
content: « »;
background-image: url(« …/…/data/img/fleur.png »);
width: 24px; /* Largeur de votre image /
height: 24px; / Hauteur de votre image /
display: inline-block; / Pour que les dimensions fonctionnent */
}

@keyframes grow {
0% {
transform: scale(0);
opacity: 0;
}

100% {
    transform: scale(1);
    opacity: 1;
}

}
.fleur2-grow {
position: absolute;
bottom: 0px;
animation: grow 5s linear forwards;
z-index: 50;
transform-origin: bottom center;
}

.fleur2-grow::before {
content: « »;
background-image: url(« …/…/data/img/orchidee.png »);
width: 24px; /* Largeur de votre image /
height: 24px; / Hauteur de votre image /
display: inline-block; / Pour que les dimensions fonctionnent */
}
.fleur3-grow {
position: absolute;
bottom: 0px;
animation: grow 5s linear forwards;
z-index: 50;
transform-origin: bottom center;
}

.fleur3-grow::before {
content: « »;
background-image: url(« …/…/data/img/rose jaune.png »);
width: 24px; /* Largeur de votre image /
height: 24px; / Hauteur de votre image /
display: inline-block; / Pour que les dimensions fonctionnent */
}

/* Ajoutez d'autres fleurs ici */

/* Fleurs qui tombent */
.fleur-fall {
position: fixed;
top: 0;
animation: fall linear infinite;
z-index: 50;
}

.fleur-fall::before {
content: « »;
background-image: url(« …/…/data/img/fleur blanche.png »);
width: 24px; /* Largeur de votre image /
height: 24px; / Hauteur de votre image /
display: inline-block; / Pour que les dimensions fonctionnent */
}

@keyframes fall {
0% {
transform: translateY(-100%);
}

100% {
    transform: translateY(100vh);
}

}

.div_object legend .objectDashLegend {
background-color: transparent !important;
}
/* Fleurs End /‹ ;
$dataCss = $dataCss . PHP_EOL;
$resultCss = file_put_contents($fileCss, $dataCss, FILE_APPEND);
if ($resultCss === false) {
$scenario->setLog(« Echec de l’écriture du fichier custom.css »);
} else {
$scenario->setLog($resultCss . ’ octets ont été écrits dans le fichier custom.css ›);
$fileJs = ‹ /var/www/html/desktop/custom/custom.js ›;
$dataJs = ’
/ Animation */
document.addEventListener(« DOMContentLoaded », function () {
function createFlower(className, imageUrl) {
let e = document.createElement(« div »);
e.setAttribute(« class », className);
document.body.appendChild(e);
e.style.backgroundImage = « url( » + imageUrl + « ) »;
e.style.left = Math.random() * (innerWidth - 17 - 32) + « px »;
let size = Math.random() * 12;
let duration = Math.random() * 3;
e.style.fontSize = 12 + size + « px »;
e.style.animationDuration = 2 + duration + « s »;
setTimeout(function () {
document.body.removeChild(e);
}, 5000);
};

function flowersGrow() {
    createFlower("fleur-grow", "../../data/img/fleur.png");
    createFlower("fleur2-grow", "../../data/img/orchidee.png");
    createFlower("fleur3-grow", "../../data/img/rose jaune.png");
    // Ajoutez d\'autres fleurs ici
};

function flowersFall() {
    createFlower("fleur-fall", "../../data/img/fleur blanche.png");
    // Ajoutez d\'autres fleurs ici
};

setInterval(flowersGrow, 300);
setInterval(flowersFall, 500);

});
/* Animation End */‹ ;
$dataJs = $dataJs . PHP_EOL;
$resultJs = file_put_contents($fileJs, $dataJs, FILE_APPEND);
if ($resultJs === false) {
$scenario->setLog(« Echec de l’écriture du fichier custom.js »);
} else {
$scenario->setLog($resultJs . ’ octets ont été écrits dans le fichier custom.js ›);
message::add(« Animation », « L’animation de fleurs a été activée »);
}
}
`

pour les images:

dans `html/data/img`