Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Créer un site web avec Dreamweaver CC

Placer une animation en slider

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Avant tout, définissez l'effet souhaité. Cet effet déterminera l'approche à adopter. Ensuite, ouvrez l'éditeur de code et ajoutez l'animation. Sachez qu'en cas de superposition d'images, une seule sera animée par effet d'opacité.
05:37

Transcription

Afin d'importer une animation sur le slider ici, c'est-à-dire de permuter cette image par une autre image, déjà on va cloner cette image. Donc on va cloner sa ligne de lien, on va rajouter l'image numéro 02, cette fois-ci qui sera une image différente qui va prendre la place de la première. Sauf que lorsque l'on actualise ici au niveau de notre page, les deux images se placent les unes sous les autres. N'oublions pas quand même qu'ici au niveau du slider, l'image display:block 100% alors même ne seraient pas en bloc elles se suivraient. Les images ne vont pas pouvoir s'écraser les unes des autres et donc là-dessus on va se retrouver avec cette série de deux images qui se suivent, qu'il va falloir superposer. Alors pour les superposer, il y a plusieurs possibilités mais avant d'opter pour une il faut savoir quelle va être la logique que l'on va utiliser pour pouvoir permuter ces images. Moi ce que je vous propose ici, ce serait de dire on a une image qui est dessus l'autre, qui sera toujours dessus l'autre. On va avoir une image en arrière-plan, une image en front. Et celle qui est en front va avoir une animation en fait qui va consister à faire baisser son opacité jusqu'à devenir transparente. De ce fait on verra celle qui est derrière et puis après on fait re-augmenter l'opacité et de ce fait on voit que celle qui est devant. Et ça on rentre dans une boucle infinie. L'image qui est derrière on ne va pas la toucher, mais l'image qui est devant, il va falloir venir l'identifier en disant c'est l'image de devant. Donc on pourrait créer une classe front par exemple. Si maintenant je viens dans la finalisation ici, je pourrais me dire que je vais utiliser « slider .front » avec un espace entre les deux classes parce que c'est bien la classe front qui va se trouver à l'intérieur de la classe slider. Ce n'est pas la même classe qui est affectée aux deux éléments. Et lui je vais dire qu'il est dans un positionnement absolute, de cette façon on sait que si on place son top en 0 et son left en 0 donc les deux images vont être l'une sur l'autre. Et là je pourrais passer par exemple « z-index » pour être sûr de placer devant tout le monde qui sera égal à 100 tout simplement. Par contre on s'aperçoit que le titre, le sous-titre et le paragraphe qui étaient devant ont dégagé. De suite ce que je vais faire c'est faire un slider h1 et slider h2, slider p avec un « z-index » supérieur à ce « z-index » de 200 pour faire repasser tout le monde devant et là on est tranquille. Alors moi ce positionnement absolu ça me va bien mais je voudrais m'assurer quand même qu'au niveau du slider, on soit déjà en position relative pour être sûr que le positionnement absolu se fera sur lui. Donc là c'est parfait, on a bien notre élément qui est en position relative et donc il va devenir le premier parent positionné. Donc maintenant qu'est-ce qu'on a besoin de faire ? On a besoin de définir une animation. Pour définir une animation on va faire un « @keyframes » ici. Et ce qu'on fait ce que je vous propose un Ctrl+K ici pour avoir de l'information sur le keyframes. Fonction non disponible sur Dreamweaver. Alors on va créer une fonction keyframes@fondu. Donc puisque Dreamweaver ne fait pas le lien, on va venir le faire en nous toujours sur développeur Mozilla ici, et là vous avez toutes les informations nécessaires sur l'utilisation de keyframes ici. Donc on va pouvoir dire qu'on va définir à 100% une opacité de 0 mais pour que l'opacité ne parte pas dès le départ jusqu'à la fin, on va le caler entre 15 et 85%. Regardez. Ici je sais qu'entre 0% et 15%, je resterai à 1 et c'est à partir de 15% que je varierai jusqu'à 0 mais également jusqu'à 85%. Ça fait que de 85 à 100% ça serait toujours opaque. Et après je repartirai dans l'autre sens qui me laissera un laps de temps en étant plein pot et un laps de temps en étant manquant. Ce qui me reste à faire maintenant c'est de définir pour la classe front l'utilisation de cette animation. L'animation, on pourrait la préfixer avec du Webkit, avec du Moz, avec tout le monde mais la majeur partie des navigateurs contemporains j'exagère et ici je vais pouvoir faire une « animation-name ». Cette animation-name, elle s'appelle « fondu ». C'est la fameuse animation que l'on a décrit dans le keyframes. Et si je place mon curseur et je fais un Ctrl+K, cette fois-ci j'ai toutes les informations nécessaires sur l'utilisation des propriétés animation. Alors ici on va la faire courte. On va définir une durée d'animation qui dure 10 secondes. Dans 10 secondes on va partir de 1 à 0. On va dire que l'iteration-count et c'est infini. On va le faire autant de fois entrer dans une boucle infinie, la direction alternate tu vas dans un sens puis dans l'autre, dans un sens puis dans l'autre de manière infinie. On n'a pas d'accélération, on va rester linéaire et on va décaler le lancer de la première animation à 5 secondes. Et si vous voyez en même temps que je parle ici, c'est en train de se réaliser là derrière. Tout s'est mis en place de manière transparente, c'est le cas de le dire et voyez c'est très simple, pas besoin de passer dans quelque complexité d'intégration, quelque ligne de code et puis surtout en adoptant la philosophie de pouvoir éclater en autant de feuille de style que d'éléments vous avez vu c'est très simple de pouvoir d'une part dans la finalisation venir apporter l'animation par exemple, dans le slider venir vérifier s'il y en avait bien la position relative à l'élément ici, donc vous voyez c'est très simple après de se promener dans notre projet pour pouvoir le compléter par toutes ces petites séquences de propriété d'inscription que l'on est en train d'égrener au fil du code.

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 !