28112 sujets

CSS et mise en forme, CSS3

Lancer une animation lorsque l'image est chargée

Bonjour à tous,

Je souhaite faire apparaitre mon background en fadein. Jusqu'ici tout va bien et en local tout marche correctement. Mais une fois en ligne, l'animation se declenche directement , l'image n'étant pas entièrement chargée, elle n'apparait donc qu'après le temps de chargement et sans l'effet fadein.

Y a t il moyen d'attendre que l'image soit chargée pour que l'animation se lance ? Est on obligé de passer par du Javascript ou du Jquery ? (que je ne maitrise pas trop, même si il y en dans mon site)

J'épluche des tutos et des cours, mais je ne comprends pas pourquoi mes keyframes n'attendent pas !!

voici mon code et merci d'avance
.accueil {
    background-image:url(images/pano2.jpg);
    background-position:center;
    background-attachment:fixed;
    background-size: cover;
    text-align: center;
    z-index: 0;
    position: fixed;
    opacity: 0;
  animation: fadein 3s;
  -moz-animation: fadein 3s;
  /* Firefox */
  -webkit-animation: fadein 3s;
  /* Safari and Chrome */
  -o-animation: fadein 3s;
  /* Opera */  
 animation-fill-mode: forwards;
}
 
 
@keyframes fadein {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}
Hello,

La meilleure manière de faire cela est effectivement en JavaScript. Voilà comment je m'y prendrais :

Il y a trois actions à faire pour réaliser l'effet :
1. Au chargement de la page, lancer le chargement de l'image
2. Une fois l'image chargée, l'appliquer comme background à ton élément
3. Enfin, appliquer l'animation à ton élément

Voici la CSS de départ :
.accueil {
    background-position:center;
    background-attachment:fixed;
    background-size: cover;
    text-align: center;
    z-index: 0;
    position: fixed;
    opacity: 0;
}
 
 
@keyframes fadein {
  from {
    opacity: 0;
  }
 
  to {
    opacity: 1;
  }
}


Première étape, lancer le chargement de l'image :
const BACKGROUND_URI = "images/pano2.jpg"
// La fonction suivante va s'exécuter au chargement de la page
window.onload = function() {
    // On créé une nouvelle image et on demande au navigateur de charger la fichier image source
    let background = new Image()
    background.src = BACKGROUND_URI
    // La fonction suivante va s'exécuter une fois que le navigateur aura chargé l'image
    background.onload = function() {
        // Appliquer le background et lancer l'animation
    }
}


Deuxième étape, appliquer l'image chargée comme background :
// ...
background.onload = function() {
    // Appliquer le background
    let accueil = document.querySelector(".acceuil")
    accueil.style.background = `url(${background.src})`
}


Dernière étape, lancer l'animation. Ici, il y a deux manières de faire. La première est d'appliquer le style CSS animation à ton élément directement en JavaScript :
// ...
background.onload = function() {
    // Appliquer le background
    let accueil = document.querySelector(".acceuil")
    accueil.style.background = `url(${background.src})`
    // Lancer l'animation
    accueil.style.animation = "fadein 3s"
}


La deuxième manière (un peu plus élégante à mon goût) est de créer une classe CSS qui contient ton animation dans ta feuille de style. Du coup il n'y a qu'à ajouter la classe sur ton élément :
.fadeInAnimation {
     animation: fadein 3s;
     -moz-animation: fadein 3s;
     /* Firefox */
     -webkit-animation: fadein 3s;
     /* Safari and Chrome */
     -o-animation: fadein 3s;
     /* Opera */  
    animation-fill-mode: forwards;
}


background.onload = function() {
    // Appliquer le background
    let accueil = document.querySelector(".acceuil")
    accueil.style.background = `url(${background.src})`
    // Lancer l'animation
    accueil.classList.add("fadeInAnimation")
}


Ainsi, voilà le code complet en JS :
const BACKGROUND_URI = "images/pano2.jpg"
// La fonction suivante va s'exécuter au chargement de la page
window.onload = function() {
    // On créé une nouvelle image et on demande au navigateur de charger la fichier image source
    let background = new Image()
    background.src = BACKGROUND_URI
    // La fonction suivante va s'exécuter une fois que le navigateur aura chargé l'image
    background.onload = function() {
    // Appliquer le background
    let accueil = document.querySelector(".acceuil")
    accueil.style.background = `url(${background.src})`
    // Lancer l'animation
    accueil.classList.add("fadeInAnimation")
    }
}
Bonjour,
Merci beaucoup pour votre aide.
Malheureusement, ça ne fonctionne toujours pas mieux, l'image apparait quand elle est chargée, sans le fade in.
Je devrais peut être me tourner plus simplement vers un loader de chargement ??? (ce qui me conviendrait tout à fait graphiquement parlant)
j'ai essayé avec un loader, mais même problème,
le loader s'affiche et s'enlève bien une fois la page chargée, le problème est qu'on voit en transparence que l'animation se lance en arrière plan avant que le loader disparaisse 
<div class="loader">
<h1>Veuillez patientez pendant le chargement de la page.</h1>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("100"); })
</script>


.loader{
	background: url('images/icon-loader.gif') 50% 50% no-repeat rgba(255, 255, 255, 0.8);
	cursor: wait;
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}
	.loader h1{
		background: none;
		border: none;
		color: #458976;
		font-size: 22px;
		font-family: "Open Sans",sans-serif;
		font-variant: small-caps;
		font-weight: 700;
		height: 700px;
		line-height: 700px;
		margin: 0 0 10px;
		padding: 0;
		text-align: center;
	}

Je suis perdu Smiley decu
ou peut être en mettant l'animation sur pause en état initial avec quelquechose comme ça : 
animation-play-state: paused;

puis en la mettant sur running dès que la page est chargée ??

Mon problème est que je ne maitrise pas du tout le langage JS, donc j'ai du mal à tester seul comment refaire passer à running avec l'evenement JS (window).load
Merci vraiment de ton aide.
Maiiiis, ça fait exactement comme tout à l'heure. Oui en local, non en ligne

Ou alors, devrais-je remplacer "Fenêtre Chargée" et "Image Chargée" par une autre valeur ??
Mais laquelle ?
J'avoue que je commence à avoir le cerveau en ébullition
Modérateur
Coucou,

Je ne fais que passer au milieu de vos histoires Smiley lol

klem1683 a écrit :
Mais une fois en ligne, l'animation se declenche directement , l'image n'étant pas entièrement chargée, elle n'apparait donc qu'après le temps de chargement et sans l'effet fadein.

Je trouve ca quand même bizarre que 1/ l'image mette plus de 3 secondes a se charger (c'est une image énorme ? c'est un gros site avec plein de chose ?) et 2/ qu'elle apparaisse en une fois...

tu dis "une fois en ligne", est-ce qu'on pourrait avoir un lien pour voir ça ?

Sinon bon courage Smiley smile
Je continue de fouiller, et j'ai vu que animation-play-state pouvait être déclenché par un événement JS (exemple ICI

Comme sur mon site plusieurs élement utilise mon animation FadeIn, avec des delay differents, si on les mettait tous sur paused à l'état initial, puis quand la page est chargé, faire basculer l'état sur running, ça devrait fonctionner, non ?
Problème, je ne maitrise pas le langage JS .....
Modérateur
Salut,

Pour moi il y a un autre soucis que le chargement en fait... 3 secondes pour une image de cette taille c'est franchement étrange.

upload/1645017009-42161-capturedancran2022-02-1614094.png
Pourquoi ces styles sont appliqués directement sur l'élément ?
Ton image est chargée puis remplacée.
Pourquoi le style est a deux endroits différents, notamment les height et width de ta div séparés de la position fixed ?
Pourquoi tu override l'opacity a 1 dans ta class .fadeInAnimation ? Ca doit pas aider normalement l'état doit etre a 0.
Modifié par _laurent (16 Feb 2022 - 14:22)
Je fais pas mal d'erreur!! En fait, j'imagine, je trifouille, je tente et quand ça fonctionne je suis content. Smiley lol
Mais bon, à la fin, je me rends compte que le moitié du code ne sert à rien !! Smiley bawling

Bon, jai fais les modifs que tu m'a indiqué, et ça ne change rien !!
Modérateur
Alors perso de mon coté le fadein marche bien... le seul truc qu'il reste c'est que tu déclares encore l'image dans le html avec une propriété background du coup ca viens annuler tout ce qu'il y avait avant :

upload/1645049631-42161-capturedancran2022-02-1623133.png

reste simple :

<div class="accueil fadeInAnimation"></div>

.accueil {
    background-image: url(images/pano2.jpg);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 0;
    position: fixed;
    opacity: 0;
}
.fadeInAnimation {
    animation: fadein 3s;
    animation-fill-mode: forwards;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


chez moi ca marche plutôt bien.

Au passage le -o-animation n'existe pas il me semble... et les -moz-animation et -webkit-animation sont un peu inutile maintenant : https://caniuse.com/css-animation
Idem pour keyframes : https://caniuse.com/mdn-css_at-rules_keyframes

Bonne nuit !
Modifié par _laurent (16 Feb 2022 - 23:21)
Ben je comprends pas.
Mon background est juste déclaré dans la feuille de style css, pas dans le html. Si tu regardes le code source, il n'est pas déclaré dans le html
Modifié par klem1683 (17 Feb 2022 - 12:09)
Modérateur
Effectivement, c'est rajouté à la volée par du Js :

http://passestressees.free.fr/scriptexp.js

const BACKGROUND_URI = "images/pano2.jpg"
// La fonction suivante va s'exécuter au chargement de la page
window.onload = function () {
  console.log("Fenêtre chargée")
  // On créé une nouvelle image et on demande au navigateur de charger la fichier image source
  let background = new Image()
  background.src = BACKGROUND_URI
  // La fonction suivante va s'exécuter une fois que le navigateur aura chargé l'image
  background.onload = function () {
    console.log("Image chargée")
    // Appliquer le background
    let accueil = document.querySelector(".accueil")
    accueil.style.background = `url(${background.src})`
    // Lancer l'animation
    accueil.classList.add("fadeInAnimation")
  }
}


C'est le code que GuillaumeBauer t'as donné pour tenter de répondre à ton soucis. Duc oup y'a plusieurs trucs qui se chevauchent.

Soit tu fait le sans Js pour voir si ca se décoince avec le code que je t'ai donné et sans ce Js,
soit tu met ce Js mais du coup il faut enlever la classe fadeInAnimation de ton HTML, enlever aussi le background-image du CSS et utiliser accueil.style.backgroundImage et non accueil.style.background pour éviter de piétiner les position, attachement, size etc
Je suis parti dans une autre direction et je crois que je m'approche d'une autre solution.
J'ai mis tous mes elements animés en pause avec
animation-play-state: paused;

J'ai mis un bouton 
<button class="soustitre" onclick="myPlayFunction()" style="cursor: pointer;">Click **ICI</button>
qui declenche une fonction JS que mets toutes les animations sur running
function myPlayFunction() {
    document.getElementById("accueilId").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
    document.getElementById("accueilId").style.animationPlayState = "running";
    document.getElementById("accueilId2").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
    document.getElementById("accueilId2").style.animationPlayState = "running";
    document.getElementById("accueilId3").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
    document.getElementById("accueilId3").style.animationPlayState = "running";
    document.getElementById("accueilId4").style.WebkitAnimationPlayState = "running"; // Code for Chrome, Safari, and Opera
    document.getElementById("accueilId4").style.animationPlayState = "running";
}

ça marche nickel, mes differents fadein se declenche , avec les delays prévus !

D'autre part , pendant mes nombreux bidouillages, j'avais essayé de mettre un loader qui une fois la page chargée faisait disparaitre l'icone du loader avec le script suivant
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("100"); })
</script>

Donc maintenant j'aimerais juste que le loader (avec le script ci dessus modifié) declenche ma fonction myPlayFunction() du début de message.
Quelqu'un pourrait il mettre ce petit bout de code en forme, je ne maitrise pas JS .
Merci

Au cas ou, mon dernier essai avec bouton est visibleICI
Sujet clos
Aller à