Discussion :

[enzo4snow]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
 
});

[mathieu]

je n'ai pas regardé votre code mais je voulais déjà commencer par expliquer qu'un changement d'url va commencer par effacer complètement le contenu précédent et ensuite le nouveau contenu est chargé.

cela rend donc les transitions spéciales plus compliquées à mettre en place. si vous avez déjà vu des transitions douces, celle-là ont surement été faites en javascript et sans changement d'url.
regardez par exemple cette vidéo :

à 25 min 10 s vous pouvez voir l'effet de transition. et ce qui est avant est la mise en place d'une bibliothèque javascript qui fait cet effet.

[SpaceFrog]

Sinon avec des balises meta ?
https://www.developpez.net/forums/d7...ti-navigateur/

[enzo4snow]

Merci pour vos réponses !
Je vais tenter le coup avec node.js puisque je ne connais pas du tout la méthode avec les balises mais je vais tout de même essayer si la première ne me convient pas ...
Je n'oublierais pas de mettre à jour le sujet.

merci !