Partage
  • Partager sur Facebook
  • Partager sur Twitter

Liens qui descendent dans la page au chargement

Sujet résolu
    18 février 2020 à 4:35:03

    Bonjour, 

    Je cherche à apprendre à reproduire un effet qui me plait bien sur la page index de ce site (https://www.rsfrancemotors.com/).

    Les liens du menu nav (entre autre) descendent doucement pour se placer correctement lorsqu'on charge ou rafraichit la page web. Je ne pense pas qu'il soit possible d'exécuter ceci avec du SCSS. J'imagine que cet effet peut être obtenu en JS avec un onload et une fonction mais j'ai beau chercher, je ne trouve pas comment m'y prendre. J'ai tapé ma question en français et en anglais, j'ai aussi cherché avec jQuery et je ne trouve rien qui me convienne. J'ai déplacé les coordonnées mais l'effet est très différent.

    Si quelqu'un a des idées, un lien intéressant ou peut m'expliquer comment m'y prendre, ce serait super sympas et utile. Merci. Bonne journée.

    • Partager sur Facebook
    • Partager sur Twitter
      18 février 2020 à 8:17:27

      Salut,

      Tu peux utiliser une lib qui te mache le travail https://greensock.com/docs/

      Tu as aussi animejs https://codepen.io/collection/XLebem

      • Partager sur Facebook
      • Partager sur Twitter
        18 février 2020 à 9:42:48

        Salut,

        Tu peux essayer ce genre de chose aussi :

        https://jsfiddle.net/16hkq37b/2/

        -
        Edité par BrainError 18 février 2020 à 9:43:09

        • Partager sur Facebook
        • Partager sur Twitter
          19 février 2020 à 6:18:02

          Bonjour Jikaill et BrainError,

          Merci beaucoup, j'ai regardé vos envois. Je préférerai parvenir à réaliser cet effet juste avec jQuery. 

          J'ai essayé de reproduire l'équivalent du code js fiddle envoyé par BrainError en l'adaptant à mon cas mais autant cela fonctionne sur mon codepen autant lorsque je rajoute mes modifications dans mon code complet sur vscode, ça ne fonctionne plus. 

          Je ne comprends pas vraiment pourquoi. J'ai déjà un bouton codé en jQuery sur ma page index qui fonctionne.

          Mais, mon .nav__ul ne descend pas dans mon .nav... J'ai l'impression que mon code jQuery ne fonctionne pas.

          J'ai créé un head.php que j'inclus dans toutes les pages du site et dans lequel, j'ai placé l'appel à la bibliothèque jQuery (qui fonctionne pour mon bouton "To Top" page index.php) : 

          <!DOCTYPE html>
          <html lang="en">
            
          <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="public/css/main.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
          <title> $title </title>
          </head
          


          J'ai un fichier index.php dont le nav est inclus ci-dessous :

          <body>
                <header>
                    <nav class="nav">
                      <!-- Partie 1 du header avec le logo, le nav et le bouton -->
                        <img src="public/img/logo_entete_vdef.jpg" alt="Logo petite taille de la société Denver Cars" class="logo"/>
                        <ul class="nav__ul">
                            <li> <a class="nav__a nav__a--default" href="index.php"> Accueil </a> </li>
                            <li> <a class="nav__a" href="rendez-vous.php"> Rendez-vous </a> </li>
                            <li> <a class="nav__a" href="estimation.php"> Estimation </a> </li>
                            <li> <a class="nav__a" href="nos_vehicules.php"> Nos véhicules </a> </li>
                            <li> <a class="nav__a" href="informations.php"> Informations </a> </li>
                            <li> <a class="nav__a" href="contact.php"> Contact </a> </li>
                        </ul>
                        <a href="estimation.php"><button class="btn btn--get-bigger">  Estimez votre voiture </button> </a>
                      </nav>
          
                      <script type="text/javascript"> 
                         document.querySelector('.nav__ul').classList.add('nav_show'); 
                      </script>
                    <!-- Attention : ne pas fermer ici le header, il fermera après le bandeau -->
          
                      <!-- Partie 2 du header avec le bandeau/hero voiture -->
                      <div class="bandeau--index"> <!--section hero donc 2 du header-->
                          <div class="bandeau__container"> <!-- container pour configurer les dimensions et l'image hero -->
                            <div class="bandeau__container__top"> <!--Permet de configurer le flex -->
                              <h1 class="bandeau__container__top-left__heading">Difficile de vendre sa voiture ? <br/> 
                                Voilà la solution ! 
                              </h1> 
                            <hr class="hr1"> 
                            <div class="bandeau__container__top-right__heading">
                              <img src="public/img/estimation_vdef.jpg" alt="Image représentant une estimation de prix" class="bandeau__container__top-right__image"/>
                              <p class="bandeau__container__top-right__accroche"> Estimez votre voiture en ligne </p>
                              <a href="estimation.php"><button class="btn btn--orange">  J'estime mon véhicule </button> </a>
                            </div>
                            </div>
                            <div class="bandeau__container__bottom">
                              <p class="bandeau__container__bottom-left__heading" > Vous avez la possibilité de finaliser intégralement la cession de votre voiture, procédures post-vente comprises. 
                                  Nous vous offrons une assistance pro et complète, adaptée à vos besoins ! 
                                  Toutes nos prestations sont sans frais ni engagement, vous permettant de profiter librement de nos avantages. 
                              </p>
                              <a href="estimation.php"><button class="btn btn--black">  Estimez votre voiture </button> </a>
                              <div class="bandeau__container__bottom-right__heading">
                                <img src="public/img/garage_vdef.jpg" alt="Image représentant un garage" class="bandeau__container__top-right__image"/>
                                <p class="bandeau__container__top-right__accroche"> Prenez rendez-vous en agence </p>
                                <a href="rendez-vous.php"><button class="btn btn--orange">  Je prends rendez-vous </button> </a>
                              </div>
                            </div>
                          </div> <!-- fermeture de la div container_bandeau-->
                      </div> <!-- fermeture du div bandeau-->       
                    <div> <!-- fermeture de container1 - fin header-->       
                </header>
          


          Et j'ai le code SCSS ci-dessous, concernant les trois classes concernées : 

          .nav
          {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            flex-wrap: wrap;
            height: 63px;
            width: 100%;
            overflow: hidden;
          }
          
          .nav__ul
          {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly; 
            flex-wrap: wrap;
            margin-top: 10px;
            margin-left: -50px;
            transform: translateY(-100%); //ajout pour faire descendre .nav_ul doucement dans la page
            transition: transform 1.5s ease-out;
          }
          
          .nav_show
          {
            transform: translateY(0);
          }
          
          .nav__a
          {
            font-family: 'aileronregular', Georgia, serif;
            font-size: 1em;
            font-weight: bold;
            color: $black;
            padding: 15px;
            padding-bottom: 3px;
            text-decoration: none;
            margin-right: 5px;
              &:hover
              {
                @include border-bottom;
              }
          }
          
          .nav__a--default
          {
            @include border-bottom;
            margin-right: 5px;
          }
          
          li
          {
            list-style-type: none;
          }
          

          Voyez-vous une raison pour que mon code jQuery ne fonctionne pas svp ? Merci pour votre aide.

          J'ai créé un codepen.io (il n'y a pas le bouton et la suite du code) et il fonctionne : https://codepen.io/laure79/pen/dyoXwaw

          Je ne vois pas ce qui peut justifier que le code complet ne fonctionne pas... Merci.

          -
          Edité par laure79 19 février 2020 à 8:13:28

          • Partager sur Facebook
          • Partager sur Twitter
            19 février 2020 à 7:48:25

            Bonjour laure79

            Tu peux trouver ta solution en css. Essaye un code tu genre

            @keyframes animVertical {
                from {
                    transform: translateY(-15px);
                }
            
                to {
                    transform: translateY(30px);
                }
            }
            
            nav {
                animation: animVertical 2s ease-in;
            }

            La propriété ease-in ralentit l'animation au début et l'accélère à la fin.

            -
            Edité par keenndj 19 février 2020 à 7:48:53

            • Partager sur Facebook
            • Partager sur Twitter
              19 février 2020 à 9:13:34

              laure79 a écrit:

              Bonjour Jikaill et BrainError,

              Merci beaucoup, j'ai regardé vos envois. Je préférerai parvenir à réaliser cet effet juste avec jQuery. 

              J'ai essayé de reproduire l'équivalent du code js fiddle envoyé par BrainError en l'adaptant à mon cas mais autant cela fonctionne sur mon codepen autant lorsque je rajoute mes modifications dans mon code complet sur vscode, ça ne fonctionne plus. 

              ...

              Utilise plutôt ce code js quand tu réalise ton test en dehors de jsFiddle :

              document.addEventListener('DOMContentLoaded', function() {
              	document.querySelector('.menu__content').classList.add('menu__content--shown');
              });

              Tu as besoin d'attendre que la page soit charger avant d'ajouter le changement de class.

              • Partager sur Facebook
              • Partager sur Twitter
                19 février 2020 à 10:14:43

                Bonjour Keenndj , rebonjour BrainError,

                Merci pour vos reponses. J'ia testé et ça fonctionne très bien en ajoutant le addEventListener. 

                Merci ! Bonne journée.

                -
                Edité par laure79 20 février 2020 à 6:56:51

                • Partager sur Facebook
                • Partager sur Twitter

                Liens qui descendent dans la page au chargement

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                • Editeur
                • Markdown