Conflit loader et AOS (scroll library) par cafegratitude09 - page 1

Bonjour à toutes et à tous,

Je pense avoir un soucis entre deux scripts.

J'ai intégré à mon site la library AOS (https://github.com/michalsnik/aos, je ne peux pas vous joindre le script, c'est du .min.js) qui permet de donner des effets aux éléments au scroll. Tout fonctionnait très bien jusqu'à ce que j'insère un "loader" qui s'affiche pendant le chargement de mon site. Dès lors, le loader fonctionne mais l'effet AOS, lui, ne marche plus.

Je ne suis pas très à l'aise avec Javascript, mais je pense que cela peut-être dû au script du loader car le contenu de mon site est en display:none et s'affiche au chargement complet de la page. Peut-être à cause du "onload" sur le body sinon ?

Je vous joins une partie de mon code, ainsi que le CSS lié au loader (je vous ai épargné les keyframes pour les couleurs de mon loader, je pense pas que ça puisse jouer)...

Qu'en pensez-vous ?

Merci :-)

<body data-spy="scroll" data-target=".navbar" data-offset="50" onload="loader()">
<div id="loader-wrapper">
    <div class="loader">
       <div class="cssload-loader"></div>
    </div>
</div>
    <script>
var myVar;

function loader() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader-wrapper").style.display = "none";
  document.getElementById("myContent").style.display = "inline";
}
</script>



<div id="myContent" style="display: none;">
LE CONTENU DE MON SITE DONT LES ELEMENTS QUI APPARAISSENT AVEC L'EFFET AOS</div>

#loader-wrapper {
    width: 100%;
    height: 100%;
    background-color: rgba(224,191,169);
    background-color: rgb(224,191,169);
}
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#myContent {
    display: none;
}



.cssload-loader {
	position: relative;
	width: 2.5em;
	height: 2.5em;
	transform: rotate(165deg);
	display: block;
	margin: auto;
}
.cssload-loader:before, .cssload-loader:after {
	content: "";
	position: absolute;
	display: block;
	width: 0.5em;
	height: 0.5em;
	border-radius: 0.25em;
	transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
}
.cssload-loader:before {
	animation: before 2.3s infinite;
		-o-animation: before 2.3s infinite;
		-ms-animation: before 2.3s infinite;
		-webkit-animation: before 2.3s infinite;
		-moz-animation: before 2.3s infinite;
}
.cssload-loader:after {
	animation: after 2.3s infinite;
		-o-animation: after 2.3s infinite;
		-ms-animation: after 2.3s infinite;
		-webkit-animation: after 2.3s infinite;
		-moz-animation: after 2.3s infinite;
}

Conflit loader et AOS (scroll library)

Conflit loader et AOS (scroll library)

Supprimer

Modérer

Signaler le message aux modérateurs