Contenu
- 01. Effet de texte de survol
- 02. Créer du CSS
- 03. Positionner le mot
- 04. En haut et plus
- 05. Planer vers le bas
- 06. Automatique pour le peuple
- 07. Ajouter des classes en alternance
Les liens de survol sont un excellent moyen d'attirer l'attention d'un utilisateur, surtout s'il fait quelque chose d'inhabituel ou d'original. Middle Child a un grand effet, rarement vu ailleurs, qui capture chaque lettre et les sépare avec une animation, qui intervient lorsque le visiteur survole le mot. L’animation permet de transmettre le caractère ludique de la marque sandwich.
Dans cet article, nous vous montrons comment recréer l'effet sur votre site. Pour plus d'inspiration, consultez notre guide des meilleurs exemples d'animation CSS (avec des instructions sur la façon de les coder). Pour quelque chose d'un peu différent, essayez un des meilleurs créateurs de sites Web ou notre sélection du meilleur stockage en nuage. Et si vous rendez votre site plus complexe, assurez-vous que votre hébergement Web est en bon état.
01. Effet de texte de survol
L'un des grands effets de texte sur le site Web de Middle Child concerne les effets de survol sur le menu, où les lettres se séparent sur le texte et pivotent légèrement. Commencez par quelques balises HTML simples.
div> div> Petit-déjeuner / div> / div>
02. Créer du CSS
Utilisez un fichier CSS séparé ou des balises de style pour ajouter les règles CSS suivantes et faire en sorte que la page remplisse la taille complète du navigateur en vous assurant que le corps et le wrapper prennent toute la hauteur disponible.
corps {largeur: 100%; hauteur: 100%; marge: 0; rembourrage: 0; } .wrapper {affichage: grille; hauteur: 100%; }
03. Positionner le mot
le mot la classe centre le mot dans la grille. Tout texte qui reçoit le mot classe peut avoir cela appliqué. le en haut la classe sera appliquée à toutes les autres lettres et celles-ci se déplaceront vers le haut.
.word {taille de police: 3em; marge: auto auto; } .word .up {affichage: bloc en ligne; transformer: translate3d (0px, 0px, 0px) tourner (0deg); transition: toutes les entrées / sorties de 0,5 s; }
04. En haut et plus
Maintenant le vers le bas classe partage des paramètres très similaires à ceux du en haut mais le survol montre le mouvement vers le haut pour le en haut rouler. Il est également légèrement tourné vers le haut pour rehausser le look.
.word .down {affichage: bloc en ligne; transformer: translate3d (0px, 0px, 0px) tourner (0deg); transition: toutes les entrées / sorties de 0,5 s; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); couleur: # 058b05}
05. Planer vers le bas
Lorsque l'utilisateur survole le texte, la classe down déplace le texte vers le bas. Plus tard dans JavaScript, le texte sera divisé en plages séparées avec les classes ajoutées automatiquement aux plages alternatives.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); couleur: # 058b05; }
06. Automatique pour le peuple
Il est un peu compliqué de devoir placer chaque lettre dans des intervalles alternés avec différentes classes, nous allons donc automatiser le processus en demandant à JavaScript d'interroger le sélecteur et de prendre chaque lettre. Ici le str La variable saisit la lettre actuelle lorsqu'elle parcourt le texte.
script> var elements = document.querySelectorAll ('.word'); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; éléments [i] .innerHTML = ’’;
07. Ajouter des classes en alternance
Maintenant, une autre boucle place chaque lettre dans son propre élément span et ajoute soit le en haut ou alors vers le bas classe aux travées. Si vous regardez cela dans le navigateur, vous verrez le texte divisé par chaque lettre de haut en bas, tout en tournant légèrement.
Vous pouvez voir l'effet en action sur le site Web de Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); éléments [i] .appendChild (spn); spn.textContent = str [j]; laissez pos = (j% 2)? «Haut»: «bas»; spn.classList.add (pos); }} / script>
Cet article a été initialement publié dans le magazine de conception Web créative Concepteur Web.Acheter le numéro 286 ou alors s'abonner.
