Création de «chapiteau» avancé avec une animation CSS3
Aujourd'hui, nous allons jeter un oeil à “chapiteau” encore une fois. Nous avons en fait couvert dans notre précédent post qui parlait de l'utilisation de la -webkit-marquee la propriété, mais cette fois nous allons prendre ce sujet un peu plus loin.
Dans ce post, nous allons créer un comme un chapiteau effet en utilisant l’animation CSS3. De cette façon, nous pourrons ajouter plus de fonctionnalités qui ne pourraient pas être atteintes avec seulement la -webkit-marquee.
Sauf si vous êtes déjà familiarisé avec le module CSS3 Animation, nous vous recommandons de consulter les références suivantes avant de poursuivre avec cette documentation:
- Animations CSS3 - W3Ecole
- Animations CSS - Mozilla Dev. Réseau
Notez également qu’à l’heure actuelle, CSS3 Animation ne peut fonctionner que dans Firefox 8+, Chrome 12+ et Safari 5.0+ avec la version préfixée (-moz- et -webkit-). Cependant, nous n'utiliserons que la version officielle de W3C sans le préfixe pour éviter de surcharger cet article avec des codes superflus..
Aborder le problème du chapiteau
Un des problèmes avec le texte défilant est que le texte est en mouvement continu. Ce comportement perturbe la lecture et le texte est également difficile à lire. Cette fois-ci, nous allons essayer de créer notre propre version de Marquee et de la rendre plus conviviale. Par exemple; au lieu d'avoir le texte bouger en permanence, nous l'arrêterons lorsqu'il sera entièrement visible, afin que l'utilisateur puisse lire le texte un instant.
Le storyboard (en quelque sorte)
Toute création ou création, comme un logo, une illustration ou un site Web, commence généralement par un croquis. Dans le domaine de la production d'animation, cela se fait avec un scénario. Avant de commencer tout codage, nous allons d’abord créer un sorte de storyboard, pour nous aider à visualiser notre animation.
Comme vous pouvez le constater dans le story-board ci-dessus, nous prévoyons de ne montrer que deux lignes de texte, qui se déplaceront de manière séquentielle de droite à gauche..
Notre story-board n’est pas aussi compliqué que celui d’un vrai film d’animation, mais le fait est que nous pouvons maintenant visualiser à quoi ressemblera notre chapiteau..
Le balisage HTML
Puisque notre animation sera simple, le balisage HTML sera aussi simple que:
Comment ajouter WordPress Related Posts Without Plugins
Automatisez vos fichiers Dropbox avec des actions
Les styles de base
Avant de travailler sur l'animation, ajoutons quelques styles de base. Commençons par ajouter une texture de fond pour la html élément.
html background: url ('… /images/skewed_print.png'); Ensuite, nous allons placer le rectangle de sélection au centre de la fenêtre du navigateur et ajouter quelques détails tels que l'ombre intérieure, la couleur d'arrière-plan et les bordures..
.chapiteau largeur: 500px; hauteur: 50px; marge: auto 25px; débordement caché; position: relative; bordure: 1px solide # 000; marge: auto 25px; couleur de fond: # 222; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: insert 0px 2px 2px rgba (0, 0, 0, 0,5), 0px 1px 0px rgba (250, 250, 250, .2); box-shadow: incrément 0px 2px 2px rgba (0, 0, 0, 0,5), 0px 1px 0px rgba (250, 250, 250, .2);
Ensuite, nous allons positionner le texte - qui dans ce cas est enveloppé dans une balise de paragraphe - absolument, et depuis le absolu position entraînera la fermeture de l'élément, nous devrons définir l'élément de la largeur à 100% afin de couvrir la largeur de son parent.
.chapiteau p position: absolue; famille de polices: Tahoma, Arial, sans-serif; largeur: 100%; hauteur: 100%; marge: 0; hauteur de ligne: 50px; text-align: center; couleur: #fff; text-shadow: 1px 1px 0px # 000000; filtre: ombrage (couleur = # 000000, offx = 1, offy = 1);
Jetons un coup d'oeil au résultat pendant un moment.
À ce stade, nous avons terminé avec tous les styles de base dont nous avons besoin. vous êtes libre d'ajouter plus ou personnalisé les styles. Mais nous vous suggérons de vous en tenir à notre dimension de chapiteau spécifiée (la hauteur et la largeur) jusqu'à la fin du tutoriel..
L'animation
En bref, l'animation est une présentation d'objets en mouvement. Chaque mouvement est défini dans un laps de temps. Ainsi, lorsque nous travaillons sur l’animation, nous avons surtout affaire à la Temps. Nous prenons en compte des questions telles que:
- Quand l'objet commence-t-il à bouger?
- Combien de temps faut-il pour que l'objet se déplace d'un point à un autre?
- Quand et combien de temps l'objet doit-il rester à un moment donné??
Dans CSS3 Animation, le temps peut être défini avec le @ keyframe syntaxe. Mais avant de passer à cette section, spécifions d’abord la position de départ du texte de sélection.
Nous avons prévu que le texte commence à droite puis à droite. Donc, ici nous allons d'abord le positionner à droite en utilisant la propriété CSS3 Transformation.
.chapiteau p transform: translateX (100%);
Se souvenir du 100% que nous avons défini pour notre élément de paragraphe était égal à son parent largeur. Donc, la même chose sera également appliquée ici; l'élément de paragraphe sera traduit à droite pour 100% qui dans cet exemple est égal à 500px.
Images clés
le @ keyframe La syntaxe peut être un peu déroutant pour certaines personnes, nous avons donc créé un guide visuel simple pour vous aider à comprendre facilement ce qui se passe dans le @ keyframe syntaxe.
Cliquez ici pour voir la version agrandie.
L'animation entière durera environ 20 secondes et est divisé en deux séquences d'une durée 10 secondes chaque.
Dans la première séquence, le premier texte se glisse instantanément à partir de la droite et reste visible momentanément pour permettre à l'utilisateur de lire le texte, tandis que le deuxième texte reste masqué. Dans la deuxième séquence, le premier texte de sélection se déplacera à gauche et le deuxième à partir de la droite.
Et voici tous les codes d’images clés que nous devons appliquer pour exécuter l’animation..
@ keyframes left-one 0% transform: translateX (100%); 10% transform: translateX (0); 40% transform: translateX (0); 50% transform: translateX (-100%); 100% transform: translateX (-100%); @keyframes left-two 0% transform: translateX (100%); 50% transform: translateX (100%); 60% transform: translateX (0); 90% transform: translateX (0); 100% transform: translateX (-100%);
le à gauche Les images clés définiront la première séquence de l'animation, tandis que à gauche deux les images clés définiront la deuxième séquence.
Application d'animation aux éléments
Pour que l'animation fonctionne, n'oubliez pas de l'appliquer à l'élément. La première séquence est appliquée pour le premier texte ou, dans ce cas, le premier paragraphe et la deuxième séquence est également appliquée pour le deuxième paragraphe..
.chapiteau p: nième enfant (1) animation: gauche une personne 20 facilité infinie; .marquee p: nth-child (2) animation: left-two 20s eas infinite;
Nous avons tous fini avec notre animation; voyons les résultats sur le navigateur.
- Démo
- Source de téléchargement
Prime
Nous pouvons également définir le texte de sélection pour le déplacer de haut en bas ou inversement, comme nous l'avons fait dans notre précédent post. Voici comment faire; remplacer nos codes d'animation ci-dessus par celui ci-dessous pour déplace le texte vers le bas:
.chapiteau p transform: translateY (-100%); @keyframes down-one 0% transform: translateY (-100%); 10% transformer: translateY (0); 40% transformer: translateY (0); 50% transformer: translateY (100%); 100% transformer: translateY (100%); @keyframes down-two 0% transform: translateY (-100%); 50% transformer: translateY (-100%); 60% transformer: translateY (0); 90% transformer: translateY (0); 100% transformer: translateY (100%);
Notez que nous avons changé le Axe X à Axe Y et retourner tous les Traduction valeur négative à positive et vice versa.
Nous avons également renommé l'animation à bas un et bas-deux, nous avons donc besoin de réappliquer le nom de l'animation dans l'élément de paragraphe, ainsi.
.chapiteau p: nième enfant (1) animation: down-one 20s eas infinite; .marquee p: nth-child (2) animation: down-two 20s eas infinite;
Ou bien, si vous voulez le déplacer le contraire. de bas en haut. Voici tous les codes que vous devez appliquer:
.marquee.up p transform: translateY (100%); .marquee.up p: nth-child (1) animation: up-one 20s aisance infinie; .marquee.up p: nth-child (2) animation: deux au-dessus de 20 secondes facilité infinie; @keyframes up-one 0% transform: translateY (100%); 10% transformer: translateY (0); 40% transformer: translateY (0); 50% transformer: translateY (-100%); 100% transformer: translateY (-100%); @keyframes up-two 0% transform: translateY (100%); 50% transformer: translateY (100%); 60% transformer: translateY (0); 90% transformer: translateY (0); 100% transformer: translateY (-100%);
- Démo
- Source de téléchargement
Conclusion
Malgré le manque de prise en charge actuelle du navigateur, CSS3 Animation, s’il est correctement exécuté, résoudra sans aucun doute de nombreux problèmes d’utilisabilité à l’avenir, comme nous l’avons fait dans cet exemple. Si nous n'avons besoin que d'une courte animation destinée aux navigateurs modernes, utiliser CSS3 Animation est probablement mieux que de charger un script jQuery..
Enfin, nous sommes conscients que cet article peut paraître un peu pénible pour certaines personnes. Si vous avez des questions à propos de cet article, n'hésitez pas à les poster dans la section commentaires ci-dessous..
