Ces dernières années, jQuery est devenu le moyen le plus simple et le mieux pris en charge de mettre en œuvre des animations simples en ligne. JavaScript est exceptionnellement bon à ce qu'il fait et cet article n'est en aucun cas un argument contre.
Cependant, CSS3 offre un aperçu d'un futur possible dans lequel des animations de base sont exécutées avec du CSS direct, complètement indépendant du script. Aujourd'hui, nous verrons comment utiliser CSS3 pour créer un menu de navigation amusant et unique qui utilise @ font-face, des transformations et des transitions.
introduction
La navigation de votre site Web peut beaucoup communiquer sur votre entreprise ou vos services. Une navigation propre et utilisable est un élément essentiel dans une bonne conception Web et constitue toujours votre meilleur pari.
Toutefois, si vous créez un site qui ne doit pas nécessairement être aussi professionnel, la navigation est un excellent endroit pour s'amuser et insérer de la personnalité.
Pour avoir un aperçu de ce que nous allons construire, jetez un œil à la démonstration en direct. J'ai ajouté du contenu d'espace réservé, mais l'idée principale ici est le menu de navigation.
Cliquez ici pour voir la démo
Le HTML
Pour démarrer notre projet, collez le modèle HTML5 vierge suivant. Notez que j'ai jeté dans HTML5 Shiv pour faire en sorte que IE et HTML5 fonctionnent bien ensemble.
Ensuite, jetez une simple liste non ordonnée dans la partie du corps. Incluez des liens et le texte de votre choix pour les éléments de menu individuels.
Croyez-le ou non, c'est vraiment tout ce dont nous avons besoin ici. Nous pourrons peut-être revenir un peu plus tard, mais dans l’ensemble, notre menu de navigation restera assez basique et facile à combiner en quelques minutes seulement.
Styles de base
Créez ensuite un fichier CSS, effectuez une réinitialisation de base et ajoutez des paramètres de base au corps. Comme ce projet est si simple, nous n’avons pas besoin d’une réinitialisation sophistiquée de CSS, mais il est souvent utile de s’assurer que tous les navigateurs sont sur la même page avec des marges et un remplissage.
La prochaine chose que nous voulons faire est de prendre notre liste verticale, de l’écouler horizontalement et d’ajouter un effet de survol. Faites cela avec le code suivant.
Il n'y a rien ici que vous n'avez pas vu mille endroits. En faisant flotter une liste non ordonnée à gauche, nous plaçons tous les éléments de la liste sur la même ligne (n'oubliez pas d'effacer vos flottants si vous ajoutez plus de contenu!). En dehors de cela, nous avons simplement espacé les éléments et appliqué une couleur de survol.
Nous ajouterons des effets de survol fantômes plus tard, mais il est important de ne pas dépendre entièrement d'eux. Si nous voulons une dégradation progressive des navigateurs, le menu devrait être entièrement fonctionnel sans CSS3. Comme vous pouvez le voir dans l'image ci-dessous, nous avons atteint cet objectif et nous devrions maintenant avoir un menu à base de texte simple qui change de couleur en survol.
Personnaliser la police
Puisque nous nous amusons, je veux utiliser une police de caractères folle. Mon option préférée pour la mise en œuvre de polices personnalisées en ligne est pure @ font-face en utilisant la syntaxe Bulletproof @ font-face de Paul Irish.
De cette façon, nous n'avons pas à nous soucier des systèmes tiers, du domaine, de l'enregistrement, etc. Nous pouvons simplement trouver une police que nous aimons et la lancer directement via CSS.
Font Squirrel
Configurer les polices avec @ font-face n'est pas la tâche la plus simple si vous êtes débutant. Vous devez d'abord trouver une police légale à utiliser (ce qui peut être un casse-tête majeur), puis vous devez rechercher plusieurs versions de la police et les brancher à la syntaxe Bulletproof; c'est une vraie douleur.
Heureusement, Font Squirrel a éliminé tout le travail du processus avec ses kits pré-construits @ font-face.
Un kit @ font-face contient tout ce dont vous avez besoin: les polices, le code, un exemple, etc. Il vous suffit de parcourir le site jusqu'à ce que vous trouviez un kit que vous aimez et de cliquer sur le bouton de téléchargement. J'ai décidé d'aller avec Kulminoituva sous le? Nouveauté? section. C'est une police de caractères en 3D en blocs que je n'utiliserais normalement jamais, elle est donc parfaite pour ce projet.
Une fois le kit téléchargé, copiez les polices dans le répertoire racine de votre page, puis collez le texte inclus dans votre fichier CSS.
Si vous avez suivi le lien de syntaxe à l'épreuve des balles ci-dessus, vous devez savoir ce que fait tout ce code. Sinon, la seule chose que vous devez vraiment savoir, c'est que la première ligne nous indique comment faire référence à la police ailleurs dans notre code: 'KulminoituvaRegular'
Alors maintenant, nous appliquons une famille de polices aux éléments de la liste en utilisant la même méthode que celle que nous utilisions normalement lorsque nous utilisions notre nouvelle police par défaut.
Et maintenant, notre menu de navigation devrait être beaucoup plus amusant.
Nous avons maintenant un petit menu de navigation assez décent. Notez que nous avons également appliqué des polices de sauvegarde afin que, où que ce soit @ font-face ne fonctionne pas, Helvetica se charge à la place.
Pour terminer, ajoutons quelques animations CSS3.
Animation du menu
Actuellement, la meilleure façon de faire des animations CSS est un processus en deux étapes impliquant à la fois des transformations et des transitions. La première chose à faire est donc de décider comment manipuler les objets de notre menu à l'aide d'une transformation, puis d'appliquer une transition pour animer la transformation.
Si vous jetez un coup d'œil à la police que nous avons choisie, vous verrez que les lettres sont toutes alternées pour donner une impression de main desserrée. Nous nous en servirons comme source d'inspiration pour notre transformation et introduirons un peu plus de rotation lorsque l'utilisateur survolera un lien. Pour donner encore plus d'importance, nous introduirons également un effet de redimensionnement.
Transformer le texte en survol
Avec les transformations CSS, nous avons quatre options de base: faire pivoter, redimensionner, incliner et traduire (déplacer à gauche et à droite). Puisque nous ne voulons pas que notre texte soit trop biaisé ou trop déplacé, nous allons nous en tenir à la rotation et à l’échelle.
La syntaxe permettant de les implémenter est très basique et identique pour toutes les versions de Mozilla, Webkit et Opera.
Comme vous pouvez le constater, nous avons simplement appliqué une rotation de -10 degrés et une légère mise à l'échelle de 1,2. Maintenant, lorsque vous survolez un lien dans la navigation, celui-ci devrait apparaître avec une rotation et une plus grande.
Après avoir joué un peu avec cela, j'ai décidé que je n'aimais pas le fait que tous les liens tournent de la même façon. Le texte semble un peu plus aléatoire que cela, alors je voulais introduire quelques variations ici.
La solution consiste à appliquer des classes aux éléments de liste dans notre code HTML afin que nous puissions les styler indépendamment des autres.
Maintenant que nous avons deux classes différentes, nous pouvons appliquer une rotation distincte à chaque lien pour que les premier et troisième liens tournent dans le sens contraire des aiguilles d'une montre et que les deuxième et quatrième liens tournent dans le sens des aiguilles d'une montre.
Voila! Nous avons maintenant un effet de rotation hover impressionnant. La dernière chose que nous voulons réparer est la transition. Actuellement, le survol du texte provoque une rotation immédiate. Nous voulons que cela soit progressif, comme dans un effet jQuery cool.
Animer la rotation
Notre dernière étape consiste à ajouter une transition CSS3 pour animer l'effet de survol. Comme pour les transformations, les transitions sont très faciles à implémenter et contiennent la même syntaxe de base que Webkit, Mozilla et Opera.
Tout ce que vous avez à faire est de définir la propriété que vous souhaitez animer (dans ce cas? Tous?), La durée et l’accélération. Vous pouvez choisir entre facilité, linéaire, facilité d’entrée, sortie facile et sortie facile. Celles-ci affectent la manière dont l'animation augmente et ralentit.
Comme vous pouvez le constater, nous avons appliqué la même transition aux deux classes. N'hésitez pas à modifier cela si vous le souhaitez et à changer la transition de la première ou de la deuxième classe.
Tout fini!
Cela complète notre menu de navigation. Cliquez ici pour voir la démo en direct. N'oubliez pas que vous pouvez utiliser ces techniques d'animation sur tout ce que vous voulez, pas seulement du texte. Essayez de créer une galerie de vignettes ou quelque chose d'autre, piloté par une image et utilisant le même effet.
Pensées de clôture
De toute évidence, les utilisateurs d'Internet Explorer ne connaîtront qu'un menu simple (même s'il sera entièrement fonctionnel). Vous êtes certainement mieux avec JavaScript si vous voulez que des animations comme celle-ci fonctionnent sur tous les navigateurs. De plus, le texte a tendance à être un peu instable dans Webkit pendant la transition. J'ai trouvé cela assez ennuyant, mais je ne pouvais pas trouver de solution (dites-le-moi si vous le faites!).
Malgré tous les arguments contre son utilisation, les animations CSS sont définitivement amusantes et extrêmement faciles à implémenter. Laissez un commentaire ci-dessous avec un lien vers toutes les animations CSS3 fraîches que vous avez créées, ainsi qu'une brève description des propriétés que vous avez utilisées.