/* End User License Agreement (EULA) - Contrat de Licence Utilisateur Final (CLUF) - Ball-Sky-Fly-Anim-FC84
Copyright notices : Proprietary software is software that, unlike free software, has chosen a license mode
that protects its source code and does not allow its distribution. The code is therefore closed, protected by copyright.
Proprietary software is neither free nor semi-free. Its use without license is prohibited as well as redistribution,
distribution, copying or modification.The license of a program is the text that governs the use of the software.
Fabien Conéjéro / FC84 - 2024 / 2200 © All right reserved - Email : encrypt-free.74.mq2fl@aleeas.com
+ Madjeek Web Agency / France © All right reserved - 2024 / 2200 - Email : web-agency@madjeek.fr
@see : https://www.madjeek.fr/copyright-fc84-madjeek-public-visibility-xml.xml
@see :https://www.madjeek.fr/copyright-fc84-madjeek-networkers-visibility-xml.xml */
/***********************************************************************************************************************/
/*original base project @write-body:*/
/* body {background: #000;}
div {background:#fff;width:10vw;height:10vw;position:absolute;top:0;left:0;border-radius:50%;
animation:20s ease-in-out x infinite alternate,6.3s ease-in-out y -3.14s infinite alternate;}
@keyframes x {0% {left:0vw;}100% {left:90vw;}}
@keyframes y {0% {top:0vh;}100% {top: calc(100vh - 10vw);}} */
/***********************************************************************************************************************/
/*if mouve rond - demo @write-body:*/
/* body {background: #000;}
div {background:#fff;width:10vw;height:10vw;position:absolute;top:0;left:0;border-radius:50%;
animation:4s ease-in-out x infinite alternate,4.3s ease-in-out y -3.14s infinite alternate;}
@keyframes x {0% {left:0vw;}100% {left: 90vw;}}
@keyframes y {0% {top: 0vh;}100% {top: calc(100vh - 10vw);}} */
/***********************************************************************************************************************/
/* JS méthod anim*/
/* */
/*
*/
/***********************************************************************************************************************/
/*** Ball-Sky-Fly-Anim-FC84 - 2024 / 2200 © All right reserved ****************************************************
Ce code est le code principale qui fontionne sur la page en ligne, il est correct. Nous le désactivons pour proposer
en dessous de celui-ci une meilleure solution pour mieux l'optimiser pour le CLS.
.balloon-air-fly-anim {content: url(https://madjeek.fr/madjeek-img-noindex/mongolfiere-fly-sky-air_balloon.png);
width:2%;height:auto;position:absolute;top:0;left:0;z-index: 1;
animation:40s ease-in-out x infinite alternate,6.3s ease-in-out y -3.14s infinite alternate;}
@keyframes x {0% {left: 0vw;}100% {left: 95vw;}}@keyframes y {0% {top:2vh;}100% {top: calc(40vh - 10vw);}}
Objectif : améliorer le score Cumulative Layout Shift (CLS) car cette animation est critique : Layout shift score: 0.3125 sur : div.balloon-air-fly-anim
Deux idées initiales pour faire ceci :
1. L'image de cette animation sera masquée durant les 3 premières secondes puis devient visible à l'écran
2. Retarder la lecture de cette animation à deux secondes également.
Ces deux techniques combinées devraient réduire significativement notre score CLS.
Notre approche est correcte et devrait avoir un impact positif sur le CLS.
En combinant :
- Le masquage initial de l'élément
- Le délai de l'animation
Nous permettons à la page de se stabiliser avant d'introduire l'élément animé, ce qui réduit les changements de layout imprévus.
Animation de montgolfière optimisée pour réduire le Cumulative Layout Shift (CLS) :
L'animation CSS principale a été modifiée pour :
- Être masquée initialement (pendant 3 secondes)
- Démarrer avec un délai
Impact sur le CLS : Ces modifications devraient réduire significativement notre score CLS car :
- L'élément n'apparaît pas brusquement lors du chargement de la page
- Le navigateur a le temps de calculer l'espace nécessaire avant l'affichage
- L'animation ne perturbe pas le layout initial de la page
Approche technique mise en œuvre :
La propriété 'display' ne peut pas être animée avec les keyframes CSS. À la place, nous utilisons :
- opacity: 0 pour cacher initialement l'élément
- Une animation fadeIn qui change l'opacité de 0 à 1 après 3 secondes
- Les autres animations démarrent également après 3 secondes
Cette approche résout le problème tout en maintenant nos objectifs d'amélioration du CLS.
Elle évite les changements de layout imprévus pendant le chargement initial de la page. */
.balloon-air-fly-anim {content: url(https://madjeek.fr/madjeek-img-noindex/mongolfiere-fly-sky-air_balloon.png);
width:2%;height:auto;position:absolute;top:0;left:0;z-index:1;
/* Caché initialement */
opacity:0;
/* Animation retardée de 2 secondes */
animation: 40s ease-in-out x infinite alternate, 6.3s ease-in-out y -3.14s infinite alternate;animation-delay: 2s;}
/* Afficher l'élément après 3 secondes */
.balloon-air-fly-anim {animation: fadeInballoon 0.1s 3s forwards, 40s ease-in-out x 3s infinite alternate, 6.3s ease-in-out y -3.14s infinite alternate;}
@keyframes fadeInballoon {0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes x {0% { left: 0vw; } 100% { left: 95vw; }}
@keyframes y {0% { top: 2vh; } 100% { top: calc(40vh - 10vw); }}