11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] One page horizontal avec click

Bonjour je suis en train de faire un site one page avec scroll désactivé et passage d'une partie de la page à une autre avec une animation "transform: translateX (-100wv)". Cette animation s'active avec un click sur boutons.

L'animation fait donc glisser les parties de la page comme un slider :


<body>
    <header>
      <div class="menu" id="a">
        <p onclick="Accueil()">Accueil</p>
      </div>
      <div class="menu" id="b">
        <p onclick="Portfolio()">Portfolio</p>
      </div>
      <div class="menu" id="c">
        <p onclick="Contact()">Contact</p>
      </div>
    </header>
    <main>
        <div class="train">
          <div class="accueil"></div>
          <div class="portfolio"></div>
          <div class="contact"></div>
        </div>
    </main>
</body>


Et voici l'animation keyframe :

@keyframes go0 {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

@keyframes go1 {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-100vw);
  }
}

@keyframes go2 {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-200vw);
  }
}


Mon soucis concerne le javascript (je n'ai pas beaucoup de connaissances sur la matière). Lorsque je vais sur la partie 2 de mon one page "Portfolio" et que je clique sur "Contact" pour aller à la partie 3 celà renvoi l'animation à partir du début de la page vers la partie 3.

Transition actuelle : 2 -> 1 -> 2 -> 3
Transition voulue : 2 -> 3

Voici mon javascript : 


function Accueil() {

    // Ciblage
    var train = document.querySelector('.train');

    // Ajoute de la classe contenant l'animation
    train.classList.add('go0');
    train.classList.remove('go1')
    train.classList.remove('go2')

}

function Portfolio() {

    // Ciblage
    var train = document.querySelector('.train');

    // Ajoute de la classe contenant l'animation
    train.classList.add('go1');
    train.classList.remove('go0')
    train.classList.remove('go2')

}

function Contact() {

    // Ciblage
    var train = document.querySelector('.train');

    // Ajoute de la classe contenant l'animation
    train.classList.add('go2');
    train.classList.remove('go0')
    train.classList.remove('go1')

}


J'espère avoir été assez clair Smiley biggrin
Coucou mastagt, chaque animation commence avec un vw à 0. 


@keyframes go0 {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(0vw);
  }
}

@keyframes go1 {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-100vw);
  }
}

@keyframes go2 {
  0% {
    transform: translateX(0vw);
  }
  100% {
    transform: translateX(-200vw);
  }
}

Modifié par vzytoi (24 May 2020 - 20:23)
Salut vzytoi, merci pour ta réponse.

Je viens d'essayer d'enlever les vw à chaque 0% des animations mais cela ne change rien.

Mon soucis est que lorsque j'appuie pour passer de la partie 2 du slider à la partie 3, le slider repart depuis le début de la page avant d'aller à la partie 3.
mastagt a écrit :
Salut vzytoi, merci pour ta réponse.

Je viens d'essayer d'enlever les vw à chaque 0% des animations mais cela ne change rien.

Mon soucis est que lorsque j'appuie pour passer de la partie 2 du slider à la partie 3, le slider repart depuis le début de la page avant d'aller à la partie 3.


Tu pourrais mettre ton site en situation sur https://codepen.io/ histoire que je visualise mieux et que je puisse tester des modifications en direct?
Essaye ça :

.go0 {
  transform: translateX(0vw);
  transition: 1s ease-in-out;
}
.go1 {
  transform: translateX(-100vw);
  transition: 1s ease-in-out;
}
.go2 {
  transform: translateX(-200vw);
  transition: 1s ease-in-out;
}

( tu peux du coup supprimer tes animations @keyframes mais ne touche pas au javascript )
vzytoi a écrit :
Essaye ça :

.go0 {
  transform: translateX(0vw);
  transition: 1s ease-in-out;
}
.go1 {
  transform: translateX(-100vw);
  transition: 1s ease-in-out;
}
.go2 {
  transform: translateX(-200vw);
  transition: 1s ease-in-out;
}

( tu peux du coup supprimer tes animations @keyframes mais ne touche pas au javascript )

Si tu comprend pas ce que j'ai modifié j'ai fait un codepen (; https://codepen.io/vzytoi/pen/KKdYMKG
Modifié par vzytoi (25 May 2020 - 11:02)
Meilleure solution
Sujet clos
Aller à