Créer un site web avec Dreamweaver CC

Affiner les animations et les transitions

Testez gratuitement nos 1324 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez la palette Transition CSS de Dreamweaver. Dans de nombreux cas, elle sera insuffisante. Néanmoins, intéressez-vous à son fonctionnement.
04:22

Transcription

Il est vrai qu'on a apporté pas mal de transition et d'effet de survol depuis le code. Et pour ceux qui sont réfractaires au code on va se dire c'est un peu complexe à gérer. Regardez, ici on avait apporté un effet de survol dans le footer un peu direct. Alors si je viens à la partie footer ici CSS, la partie du survol a été apporté par le hover ici tout simplement dans cet élément-là. Ici c'est lui qui va définir ça. On a la possibilité, je vais prendre la couleur de premier plan donc il n'y a plus cette opacité-là. Je vais la prendre et je vais supprimer cet effet ici, qui avait été apporté donc on le regarde bien sur le « li:hover h1 » « li:hover h1 » d'un conteneur. On va pouvoir utiliser ici donc on n'a plus la transition, une palette dans le menu Fenêtre Transition CSS. Et dans cette Transition CSS, si vous regardez déjà tout ce qu'on a écrit dans le code, il suffit de cliquer n'importe où un peu et vous voyez que nous avons déjà deux. On a le header, les liens et le aside, les petits éléments gris ici qui sont survolé qui passent en orange. Alors regardez, on va apporter celle du footer ici. Si je sélectionne dans la partie du footer alors je vais prendre le « li » et je vais ajouter une nouvelle transition. Alors il me dit c'est qui ta règle cible ? Alors je vais pouvoir venir chercher ici directement à l'intérieur tous les éléments de mon document. Vous voyez toutes les règles ont été repérées. Et donc je vais prendre le « footer ul li », et je vais le prendre au niveau du hover. Par contre au niveau du hover c'est vraiment le h1 que je souhaite accéder. Et là on va rentrer quelque part dans une complexité. Ce qu'on va faire c'est on va utiliser un petit peu la palette et un petit peu le code. Ici je vais lui dire que la durée, ça va durer une seconde. Est-ce qu'il y a un retard ? Non, zéro seconde de retard. Est-ce que j'ai une accélération ? On pourrait dire que je suis linéaire. Et quelle est la propriété ? La propriété c'est la propriété couleur, et la valeur de fin de cette couleur c'est du « rgba » qui doit venir être plus opaque, qui va être plein pot. Je vais créer une transition. Et là, la transition a été faite sauf que cette transition a été faite de manière, si je regarde le code ici, vous voyez c'est sur l'intégralité de mon document qui devient orange. Alors je vais me replacer ici à ce niveau-là. Si je fais un Ctrl+S, regardez il n'y a rien qui se passe et c'est tout mon texte qui devient orange, lui ne l'est pas et tout. Et si je viens ici maintenant et je rajoute le h1 pour dire je ne cible que le h1, ici je vais pouvoir cibler le h1 sauf que la transition qui a été placée ici, elle a été placée également sur le « li ». Donc si je coupe tout cet élément-là, je vais venir le coller à part ici. Je vais récupérer cet élément-là. Voilà, je le colle ici. J'enlève le hover ici, d'accord ? On est bien d'accord puisque c'est sur le h1 que je vais apporter ma transition Et je vais pouvoir venir ici placer cet élément-là. Alors si je regarde bien, je devrais avoir le h1 quelque part déjà. Voilà il était ici. j'aurais pu apporter l'élément de transition également à cet élément-là puisque c'est lui qui va devoir gérer ce déclenchement de transition. Et là vous voyez, j'ai bien mon effet de transparence qui est apporté avec un effet de transition. Vous allez me dire c'est un peu tiré par les cheveux parce qu'il y a à la fois du code et à la fois de la palette de transition et en plus la palette de transition ne me rétablit plus cet élément-là, on ne le voit plus apparaitre dans le footer ici. Alors quel va être l'intérêt d'utiliser la palette de transition ? L'intérêt va être que dès que je vais avoir des transitions on va dire basique, simple d'utilisation et puis surtout dès que je vais avoir besoin de faire un pré fixage comme ça sur l'ensemble des propriétés affectées. Alors il est vrai qu'on n'a pas opté pour le pré fixage, on va le supprimer. Je fais un Enregistrer et on a bien notre élément-là. Si une seconde c'est un peu trop, n'hésitez surtout pas à descendre 400 millisecondes par exemple des effets de transition un peu plus rapide, voilà. C'est beaucoup plus véloce, beaucoup plus réactif et beaucoup plus adapté à la vitesse de navigation et d'utilisation du site par les internautes.

Créer un site web avec Dreamweaver CC

Réalisez votre premier site web avec Dreamweaver. Abordez les principales étapes de conception, telles que la création d’une page web, l’ajout de contenu multimédia, etc.

3h04 (37 vidéos)
Aucun commentaire n´est disponible actuellement
 
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :25 janv. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !