Contenu
- Commencer
- Création de la base du plateau tournant
- Créer les pieds
- Le bras et la tête
- Couleurs et textures
- Rendu et exportation
- Finition du logo
- Animer le logo
Il existe plusieurs façons de créer une animation 3D sur le Web, la plupart nécessitant une bonne connaissance de JavaScript et WebGL, ou l'utilisation d'un plug-in comme Flash. Grâce aux transformations CSS 3D, il est possible de créer de la 3D en utilisant uniquement HTML et CSS, mais ce n’est pas facile à faire. Tridiv, mon application en ligne gratuite, simplifie le processus en offrant une interface WYSIWYG simple et intuitive qui permet aux utilisateurs de créer des objets 3D sans écrire une seule ligne de code.
Dans ce didacticiel, nous allons créer et animer un logo pour "Tridiv Records", une maison de disques fictive, en utilisant uniquement du HTML et du CSS. Le visuel principal du logo va être créé en 3D à l'aide de Tridiv. Ensuite, nous ajouterons les éléments typographiques en utilisant du HTML et du CSS standard.
Vous pouvez voir l'animation finale et le code qui la génère ici.
Commencer
Nous allons commencer par créer le plateau tournant en 3D à l’aide de Tridiv. Rendez-vous sur tridiv.com et lancez l'application. Vous devrez utiliser Chrome, Safari ou Opera 15 (ou version ultérieure).
Avant de commencer, il est important de comprendre l'interface de Tridiv. La section principale de l'éditeur est composée de quatre vues: en haut à gauche se trouve la vue 3D, offrant une vue complète de la scène. Les trois autres vues le montrent du haut, du côté et de l'avant. À l'aide de ces trois vues, vous pouvez créer, modifier et déplacer des formes 3D.
La barre d'outils horizontale est divisée en deux parties: la partie gauche affiche des informations relatives à votre document; la partie droite contient des outils pour créer et éditer des formes. le Bouge toi sélection et Éditer les boutons de sélection permettent de basculer entre les différents modes d'édition.
Le volet des propriétés (la barre latérale) affiche les paramètres du document tels que le zoom et l'alignement sur la grille, ainsi que les propriétés de la forme sélectionnée (taille, position, rotation, couleur, etc.). L'unité utilisée pour les dimensions et la position est ems; les angles de rotation sont en degrés.
Pour éviter toute confusion plus loin dans le didacticiel, nous allons utiliser le raccourci suivant:
w = largeur h = hauteur d = profondeur diam = diamètre x deg = rotation dans l'axe x y deg = rotation dans l'axe y z deg = rotation dans l'axe z
Création de la base du plateau tournant
Commencez par définir la valeur de zoom sur 200. Pour vous aider à dessiner les formes, activez le paramètre Accrocher à la grille dans le Paramètres du document section de la barre latérale. Définissez la valeur d'accrochage sur 0.125.
La base du plateau tournant est composée d'un simple parallélépipède, alors cliquez sur le Ajouter un cuboïde bouton dans la barre d'outils supérieure. Vous devriez voir le cuboïde apparaître dans les quatre vues de l'éditeur.
Renommez la forme en base en utilisant le champ de nom du volet des propriétés (sous Propriétés de la forme). Le nom de la forme doit être un nom de classe CSS valide car il sera utilisé dans le code généré par l'éditeur. Nous utiliserons ces noms de classe plus tard lors de l'animation du logo, alors assurez-vous de nommer chaque nouvelle forme que vous créez correctement.
Une fois le cuboïde nommé, assurez-vous qu'il est sélectionné dans la vue de dessus (il doit être mis en surbrillance en bleu, entouré d'un anneau circulaire d'outils), puis cliquez sur le bouton Éditer bouton en haut de l'anneau pour afficher les poignées d'édition. Faites glisser les poignées de contrôle sur les côtés du parallélépipède, jusqu'à ce que la largeur et la profondeur atteignent w = 10 et d = 8 dans le Propriétés de la forme.
Cliquez sur la forme à l'intérieur de la vue latérale. Cela montrera les poignées d'édition dans cette vue, nous permettant de changer sa hauteur. Ajustez la hauteur jusqu'à ce qu'elle atteigne h = 2. Vous pouvez également saisir des valeurs directement dans le volet des propriétés. Pour arrondir les coins du parallélépipède, modifiez les valeurs des coins dans le volet des propriétés en 1.75, puis appuyez sur le [Entrer] touche pour appliquer les modifications. Vous aurez quelque chose comme ça.
Créer les pieds
Pour les pieds de la platine, nous allons utiliser des cylindres. Ajoutez un cylindre, puis changez son diamètre en diam = 1,75 et sa hauteur à h = 0,5. Clique sur le Bouge toi bouton de sélection dans la barre d'outils supérieure pour afficher la zone déplaçable sur la forme. Déplacez le cylindre sous la base, en le plaçant dans l'un des coins. (Vous devrez peut-être le déplacer dans les vues de dessus, de côté et de face.)
Dupliquer le cylindre (appuyez sur le Dupliquer dans l'anneau circulaire des outils, ou appuyez sur le ré clé) et pour déplacer le nouveau cylindre vers un autre coin de la base. Répétez le processus jusqu'à ce que les quatre pieds soient correctement positionnés. N'oubliez pas de nommer les cylindres (par exemple, pieds-gauche-haut, pieds en haut à droite, pieds-gauche-bas, pieds-gauche-haut). Lorsque vous avez fait cela, le résultat devrait ressembler à ceci.
Nous allons maintenant nous intéresser à la création du plateau, du disque, de l’axe du bras et du bouton. Le processus de création des formes suivantes est similaire à celui des pieds. Voici les dimensions utilisées pour les différents cylindres:
plateau: diam = 7; h = 0,5 disque: diam = 6,75; bouton h = 0,25: diam = 1,5; h = 0,25 bras-axe-base: diam = 2,25; h = 0,25 axe du bras: diam = 1,375; h = 1
Pour affiner les côtés des cylindres, vous pouvez augmenter le nombre de faces dans chacun d'eux, en utilisant le champ Côtés dans le volet des propriétés. N'ajoutez pas trop de côtés car cela peut avoir une influence négative sur les performances globales de l'éditeur et de l'animation finale. Dans ce cas, je vous conseille de ne pas utiliser plus de 32 faces pour le plateau et le disque. Vous devriez avoir quelque chose comme ça.
Le bras et la tête
Pour le bras et la tête du plateau tournant, nous allons utiliser des cuboïdes. Pour le bras, créez un cuboïde (w = 0,25; h = 0,25; d = 4), puis appliquez une rotation de -33° sur le axe y. Pour la tête, créez un cuboïde (w = 0,5; h = 0,5; d = 1), puis appliquez une rotation de -33° sur le axe y. Alignez les deux formes avec le cylindre de l'axe du bras. Le résultat devrait ressembler à ceci.
Couleurs et textures
Nous avons presque terminé avec le plateau tournant. La dernière étape consiste à attribuer des couleurs et à appliquer une texture au vinyle (une image représentant la surface du disque). Pour attribuer des couleurs, sélectionnez une forme et cliquez sur le couleurs champ dans le volet des propriétés. Tridiv vous permet de spécifier des couleurs individuelles pour chaque face d'une forme, mais, dans cet exemple, nous devons utiliser le champ tout pour changer la couleur de toutes les faces. Pour ce faire, entrez simplement un code couleur hexadécimal dans le champ, puis confirmez en appuyant sur Entrer.
Voici les couleurs utilisées dans cet exemple:
base: # 0099FF pieds, bouton, axe, bras et tête: # F2EEE5 disque: # fa7f7a
Pour la texture du vinyle, le processus est similaire à l'attribution des couleurs. Sélectionnez le cylindre de disque, puis cliquez sur le images champ dans le volet des propriétés. Collez l'URL de l'image que vous souhaitez appliquer au vinyle dans le champ du haut et confirmez en appuyant sur Entrer. Vous pouvez utiliser votre propre image ou télécharger celle utilisée dans cet exemple.
Vous devriez maintenant avoir quelque chose qui ressemble à ceci.
Rendu et exportation
Maintenant que le plateau tournant est terminé, nous allons travailler sur la manière dont il est rendu avant de l'exporter. Clique le Aperçu bouton en haut du volet des propriétés. Réglez la valeur du zoom sur 200 pour afficher le plateau tournant plus grand. Pour supprimer les bordures noires des formes, accédez à la Limites section du volet et définissez l'opacité sur 0. Le résultat devrait ressembler à quelque chose comme ça.
Nous voulons que le plateau tournant soit éclairé par le haut. Pour ce faire, faites pivoter la scène de manière à ce que le haut du plateau tournant soit face à vous. La base doit être parfaitement rectangulaire. La modification des valeurs de lumière et d'obscurité dans la section tridiv.com/d/4k6 du volet des propriétés régénérera les ombres dans la scène. Changez la valeur de la lumière en 0.
Le plateau tournant est maintenant prêt à être exporté!
Finition du logo
Nous sommes prêts à ajouter le texte au logo et à créer l'animation du logo. Clique le Éditer sur le bouton CodePen en bas à gauche du Aperçu view pour exporter le code vers CodePen. Il est important de noter que le code CSS généré par Tridiv n'utilise pas de préfixes de fournisseur, vous devrez donc utiliser des outils tels que prefixr.com ou leaverou.github.io/prefixfree afin de rendre le code fonctionnel dans tous les navigateurs. Commencez par fermer le volet JavaScript, car nous n'allons pas l'utiliser. Dans le volet HTML, supprimez la balise de style appliquée à la .scène div.
Développez le volet CSS et ajoutez le code suivant à la fin:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Ici le translateY (-140px) déplace le plateau tournant de 140 pixels vers le haut, laissant de la place pour le texte en dessous. Puis le rotateX (-55deg) règle l'inclinaison verticale du plateau tournant.
Pour ajouter le texte, vous devez ajouter un .Titre div juste après l'ouverture #tridiv div dans le volet HTML. À l'intérieur, ajoutez deux travées> (.main-title et .sub-title), séparé par hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
Vous devez ensuite appliquer les polices et les styles appropriés. Dans le volet CSS, importez la police Open Sans utilisée dans le logo et ajoutez les styles de base pour les éléments de texte.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centrage du bloc de texte + styles de police de base * / title {position: absolue; haut: 50%; gauche: 50%; marge: 0 0 0 -165px; largeur: 330px; hauteur: 5em; font-family: "Open Sans", sans-serif; poids de la police: 300; taille de la police: 24px; text-align: centre; espacement des lettres: 1,5em; couleur: # 0099FF; } titre hr {bordure: 1px solide # fa7f7a; marge: 0,75em 0; } durée du titre {affichage: bloc; } .main-title {font-size: 2.15em; } .sub-title {retrait de texte: .25em; }
Voilà! Votre logo est complet. Cela devrait ressembler à l'image ci-dessous. Une fois votre modèle 3D terminé, vous pouvez utiliser la puissance du CSS pour le rendre encore meilleur en ajoutant des styles, des animations ou des événements de souris: il suffit de traiter le modèle 3D comme n'importe quel autre élément HTML.
Animer le logo
Voir une animation utilisant le logo ici. Au fur et à mesure que les parties de la plaque tournante «tombent», chacune d’elles partage la même animation d’images clés avec des retards différents. Les formes ont l'attribut supérieur défini sur 50%. Pour créer l'effet de chute, nous animons l'attribut supérieur de -400 px à 50%:
@keyframes tombe {0% {top: -400px; } / * Nous commençons l'animation en positionnant la forme à une hauteur de 400px * / 100% {top: 50%; } / * puis nous le terminons à sa position d'origine * /}
Vous pouvez ajouter cette animation à toutes les formes, comme suit:
.shape {haut: -400px; animation: chute 1s facilité 0s avant; }
Définissez l'attribut supérieur sur -400 px et ajoutez un délai:
.platter {retard d'animation: 1.05s; } .disc {retard d'animation: 1,35 s; } .button {délai d'animation: 1,5 s; } ...
Créez l’effet de «rebond» final à l’aide de rotateX attribut:
90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4,5em) rotateX (660deg) rotateY (0deg); }
C’est ainsi que nous avons créé cette version particulière, mais rappelez-vous: il n’ya pas de limites!
Mots: Julien Garnier
Cet article a été initialement publié dans le numéro 248 du magazine net.
