article(s) dans votre panier VOIR

Les ancres fluides jq avec HTML5 et CSS3

  • Vidéo 7 sur 32
  • 4h15 de formation
  • 32 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Les ancres fluides jq
00:00 / 09:22
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans cette nouvelle leçon, nous allons nous apprenons à réaliser des ancres fluides. Le mécanisme des ancres, comme vous l'avez certainement déjà vu en HTML et CSS, consiste lors du clic, d'emmener la page au niveau de l'élément qui a été appelé. Mais cette fois-ci, après le clic l'élément va faire un petit mouvement de translation souple vers le haut de la page. Ce petit mouvement n'est possible qu'avec jQuery ou des bibliothèques de type JavaScript. Dans cette vidéo, le formateur travaille sur une page de base déjà écrite, sur laquelle il va réaliser le script. Sur cette page se trouvent déjà les différents menus que l'on a pu apercevoir au début de cette vidéo, ainsi que les images. Thierry Audroux commence par ajouter un identifiant pour chaque image. A présent, il peut réaliser les liens à partir du « href » pour se rendre sur les différentes images. Une fois les principales ancres pour les images terminées, il faut ajouter un élément supplémentaire : « L'Accueil ». Celle-ci permet de revenir au sommet de la page. La balise avec l'identifiant « top » est ajoutée au niveau du . Elle ne va pas se voir mais permettra d'accéder à ce niveau de la page. Afin d'avoir un espace suffisamment grand en bas de page pour pouvoir correctement afficher la dernière image, le formateur ajoute une nouvelle balise avec l'identifiant « bas ».