Transition entre les pages html
Bonjour à toutes et à tous !
Je suis tout nouveau sur le forum et c'est avec plaisir que je découvre toutes les sections du site qui est très bien enrichie !
Moi c'est Enzo, 32 ans, en reconversion développeur web full stack.
Je suis encore un bébé dans le métier et je viens demander votre aide après des heures et même des jours de recherche (surement maladroite de ma part) sur les transitions entre les pages HTML.
En effet je m'explique, j'ai créé un compteur (de 0% qui charge à 100% lorsque la page est chargé) pour que lorsque l'on se dirige sur une autre section on ai une petite transition sympa.
Problème, la nouvelle page s'affiche tout de suite et le loader arrive de gauche a droite 1 seconde trop tard.
J'ai essayé plusieurs choses mais rien ne semble corriger mon soucis. Du côté Jquery, load et ready semble ne rien changer ...
Mon site est en ligne (c'est un portefolio un peu bidon sur lequel je m'exerce) mais le loader y est déjà en place, constatez ; https://www.ec-bootstrap.com/
Je deviens fou !! help please ....
Voici le
Code:
1
2
3
4
5
6
7
8
9
| <!-- Loader start-->
<div class='loading-page'>
<div class='counter'>
<img src="./Image/CEdarkCE.svg" class="logoLoading" alt="">
<h1>0%</h1>
<hr>
</div>
</div>
<!-- Loader end--> |
Le
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| .loading-page {
position: absolute;
z-index: 1000;
background: rgb(56, 56, 56);
width: 100vw;
height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
flex-direction: column;
align-items: center;
transition: 0.5s;
margin-left: -100%;
}
.fullscreen {
margin-left: 0;
}
.rightscreen {
margin-left: 100%;
} |
Et enfin le JS (Jquery);
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $(document).ready(function () {
full = document.querySelector('.loading-page')
full.classList.add('fullscreen')
// loading page
let counter = 0;
let c = 0;
let i = setInterval(function () {
$(".loading-page .counter h1").html(c + "%");
$(".loading-page .counter hr").css("width", c + "%");
counter++;
c++;
if (counter == 101) {
clearInterval(i);
$('.loading-page').addClass('rightscreen');
$('.loading-page').fadeOut();
}
}, 15);
}); |
