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.
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) :
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 :
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 :
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
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é.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Développer c'est pouvoir débuguer un code source.