Contenu
- 01. Lancer le document HTML
- 02. Contenu HTML visible
- 03. Initiation CSS
- 04. Conteneur d'animation
- 05. Initiation à l'animation
- 06. Animer en vue
- 07. Finalisation de l'animation
Love Lost by Canada’s Jam3 est un poème interactif magnifiquement sombre, prêt pour mobile, avec un vrai cœur sur les sentiments durables autour de l’amour perdu. La mise en page du site Web a été construite en utilisant HTML5 avec la bibliothèque GSAP alimentant son animation, l'une de ses caractéristiques les plus frappantes visuellement est son texte 3D animé qui donne vraiment vie à la poésie de Love Lost.
- Créez des effets de typographie 3D interactifs
Cela a l'air impressionnant comme l'enfer, et il n'est pas difficile de l'intégrer dans votre propre travail pour créer une expérience utilisateur engageante; voici comment procéder.
Vous voulez créer votre propre site engageant? Essayez un outil de création de site Web et assurez-vous que les choses se passent bien en choisissant le bon service d'hébergement Web.
01. Lancer le document HTML
La première étape consiste à définir la structure du document HTML. Cela inclut le conteneur HTML qui lance le document, qui contient les sections head et body. Alors que la section head est principalement utilisée pour charger le fichier CSS externe, la section body stockera le contenu de la page visible créé à l'étape 2.
! DOCTYPE html> html> head> title> Mouvement de texte 3D / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * ÉTAPE 2 ICI / body> / html>
02. Contenu HTML visible
Le contenu HTML visible se compose d'un conteneur d'article qui contient le texte visible. La partie importante du conteneur d’articles est l’attribut ‘data-animate’, qui sera référencé par le CSS pour appliquer les effets visuels. Le texte à l'intérieur de l'article est constitué d'une balise h1 pour indiquer que le contenu est le titre principal de la page.
article data-animate = "move in"> h1> Bonjour! / h1> / article>
03. Initiation CSS
Créez un nouveau fichier appelé "styles.css". Le premier ensemble d'instructions définit le conteneur et le corps HTML de la page sur un arrière-plan noir, sans espacement visible entre les bordures. Le blanc est également défini comme couleur de texte par défaut pour tous les éléments enfants de la page à hériter; en évitant la couleur noire par défaut du texte, ce qui rend le contenu invisible.
html, corps {arrière-plan: # 000; rembourrage: 0; marge: 0; couleur: #fff; }
04. Conteneur d'animation
Le conteneur de contenu référencé avec l’attribut "data-animate" a des styles spécifiques appliqués. Sa taille est définie pour correspondre à la taille réelle de l'écran en utilisant les unités de mesure vw et vh, ainsi que légèrement pivotée. Une animation appelée "moveIn" est appliquée, qui durera 20 secondes et se répétera indéfiniment.
[data-animate = "move in"] {position: relative; largeur: 100vw; hauteur: 100vh; opacité: 1; animation: moveIn 20s infini; text-align: centre; transformer: tourner (20deg); }
05. Initiation à l'animation
L'animation 'moveIn' référencée à l'étape précédente nécessite une définition à l'aide de @keyframes. La première image commençant à 0% de l'animation définit la taille de police par défaut, le positionnement du texte et l'ombre visible. De plus, l'élément est défini avec une opacité nulle de sorte qu'il soit initialement invisible - c'est-à-dire. affiché hors de vue.
@keyframes moveIn {0% {font-size: 1em; gauche: 0; opacité: 0; ombre de texte: aucun; } * * * ÉTAPE 6 ICI}
06. Animer en vue
L'image suivante est placée à 10% dans l'animation. Ce cadre définit l'opacité sur entièrement visible, ce qui entraîne une animation progressive du texte dans la vue.De plus, plusieurs ombres sont ajoutées avec des valeurs de couleur bleues et décroissantes pour donner les illusions de profondeur 3D au texte.
10% {opacité: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * ÉTAPE 7 ICI
07. Finalisation de l'animation
Les images finales se produisent à 80% et à la toute fin de l'animation. Ceux-ci sont responsables de l'augmentation de la taille de la police et du déplacement de l'élément vers la gauche. De nouveaux paramètres sont également appliqués pour que l'ombre du texte soit animée, tout en atténuant le texte hors de vue des cadres 80% à 100%.
80% {taille de la police: 8em; gauche: -8em; opacité: 1; } 100% {taille de la police: 10em; gauche: -10em; opacité: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Remarque: quel que soit le projet dans lequel vous vous lancez, il est essentiel de disposer d'un stockage cloud capable de faire face (notre guide vous aidera).
Cet article a été initialement publié dans le numéro 273 du magazine de conception Web créative Web Designer. Achetez le numéro 273 ici ou alors abonnez-vous à Web Designer ici.
