Exploitez la puissance des tailles de texte dynamiques dans Webflow ! Consultez notre guide étape par étape pour créer une taille de police adaptée à la largeur et à la hauteur de votre écran.
Salut les passionnés de Webflow ! Aujourd'hui, nous abordons un sujet qui nous tient à cœur : la taille de police dynamique. Oui, vous avez bien entendu, nous venons de mentir, nous devions résoudre un problème pour un client, et comme la plupart des contenus de la section comment faire de notre blog, nous expliquons simplement ce que nous avons dû faire pour résoudre un problème que Webflow ne résout généralement pas de manière native. Ainsi, en tant que concepteurs de Webflow, nous voulons toujours que les choses ne contiennent pas de code, mais parfois vous devez utiliser du low-code.
Le défi
Préparons le terrain. Vous avez un projet Webflow. Vous avez un menu (cela ne doit pas nécessairement être un menu, il peut s'agir simplement d'un titre, etc.). Dans notre cas, c'était un joli menu avec une liste de noms de réalisateurs et une vidéo d'arrière-plan diffusée lorsque vous passez la souris dessus, il y a un hic. Le client souhaite que le texte du menu occupe la plus grande partie possible de la largeur de page, en fonction de l'élément de menu le plus long. Et vous ne pouvez pas utiliser la largeur de la fenêtre pour la taille de la police, car elle doit remplir autant d'espace en fonction de la largeur ou de la hauteur de la fenêtre d'affichage, sinon vous allez commencer à faire défiler la page lorsqu'elle déborde de la fenêtre d'affichage. Cela ressemble à un défi, non ? Voici un aperçu du menu pour vous donner une idée approximative de la façon dont il est censé s'ajuster en fonction de la hauteur et de la largeur de la fenêtre du navigateur.
<div style="padding:59.63% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/850500021?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Dynamic Font Size in Webflow to Fill Width or Height"><script src="https://player.vimeo.com/api/player.js"></script></iframe></div>
Eh bien, mes amis, c'est là que commence notre voyage.
La solution
Entrez JavaScript, notre fidèle acolyte. Avec un soupçon de JavaScript, une pincée de CSS et beaucoup de créativité, nous pouvons créer une solution qui transforme le texte de notre menu aussi large que possible ou « grand », quelle que soit la taille, la largeur ou la hauteur de l'écran. Vous remarquerez que notre version est légèrement plus compliquée : les prénoms et noms de famille des réalisateurs ont des polices et des poids différents, ils ne peuvent donc pas avoir la même taille de police, l'un est juste plus grand que l'autre, mais nous allons également ajouter un exemple de stylo de code simplifié pour que vous puissiez vous débrouiller avec cette seule police.
Nous avons intégré deux CodePens ci-dessous aux scripts que nous utiliserons. La première est une version simplifiée, parfaite pour ceux qui débutent ou qui n'ont qu'une seule police à ajuster. La seconde est un peu plus avancée, un exemple idéal pour ceux qui aiment les défis ou qui ont plusieurs polices avec lesquelles jouer ou pour ceux qui aimeraient simplement voir comment vous pouvez faire des choses plus avancées. N'hésitez pas à y jeter un coup d'œil, à jouer et à voir quelle magie nous sommes sur le point de créer. Le code du stylet doit être modifiable pour les experts Webflow qui souhaitent s'amuser immédiatement.
L'exemple simple
<iframe height="300" style="width: 100%;" scrolling="no" title="Dynamic Font Size Based on Width and Height of Viewport - Simplified for 1 Font" src="https://codepen.io/milkmoonstudio/embed/LYXMgLw?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/LYXMgLw">
</a><a href="https://codepen.io/milkmoonstudio">Taille de police dynamique basée sur la largeur et la hauteur de la fenêtre d'affichage - Simplifiée pour 1 police par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>
Exemple plus avancé de ce que nous avons fait
<iframe height="300" style="width: 100%;" scrolling="no" title="Dynamic Font Size Based on Width and Height of Viewport - 2 Font Menu" src="https://codepen.io/milkmoonstudio/embed/abQPRjg?default-tab=js%2Cresult&editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
Voir le stylo <a href="https://codepen.io/milkmoonstudio/pen/abQPRjg">
</a><a href="https://codepen.io/milkmoonstudio">Taille de police dynamique basée sur la largeur et la hauteur de la fenêtre d'affichage - Menu à 2 polices par Jakes van Eeden (@milkmoonstudio)</a>
sur <a href="https://codepen.io">CodePen</a>.
</iframe>
La panne
Maintenant, analysons ces scripts comme s'il s'agissait de nouveaux pas de danse.
Tout d'abord, nous déclarons une fonction appelée AdjustFontSize (). C'est le cœur de nos activités, le moteur qui pilotera notre menu dynamique.
<!-- fs-richtext-ignore -->fonction adjustFontSize () {
//...
}
Dans cette fonction, nous récupérons tous les éléments portant des noms de classe spécifiques. Considérez cela comme notre façon de dire : « Hé, nous avons besoin de toi pendant un moment ! »
<!-- fs-richtext-ignore -->var menuItems = document.querySelectorAll ('.menu_item') ;
Nous obtenons également la largeur et la hauteur de la fenêtre d'affichage. C'est comme demander : « De combien d'espace avons-nous pour jouer ici ? »
<!-- fs-richtext-ignore -->var viewportWidth = Math.max (document.DocumentElement.ClientWidth || 0, window.innerWidth || 0) ;
var ViewportHeight = Math.max (Document.DocumentElement.ClientHeight || 0, Window.InnerHeight || 0) - 60 ;
Ensuite, nous calculons la taille de police en fonction de la largeur et de la hauteur de la fenêtre d'affichage. Les multiplicateurs présentés ici sont comme nos ingrédients secrets pour obtenir la bonne taille de police. Nous prenons la plus petite des deux tailles de police calculées. C'est notre façon de dire : « Ne nous intéressons pas trop à la taille de la police, d'accord ? » C'est le moment où vous devez expérimenter les deux pour faire les choses correctement, car cela varie en fonction de la police et de la longueur du texte.
<!-- fs-richtext-ignore -->var FontSizeBasedOnWidth = ViewportWidth * 0,089 ;
var FontSizeBasedOnHeight = ViewportHeight * 0,19 ;
var fontSize = Math.min (fontSizeBasedOnWidth, fontSizeBasedOnHeight) ;
Dans le script avancé, le nom de famille est également légèrement plus grand que le prénom. Parce que pourquoi les prénoms devraient-ils être si amusants, non ? Et nous calculons l'espacement des lettres ici.
<!-- fs-richtext-ignore -->var FontSizeLastName = FontSize * 1.08 ;
var LetterSpace = FontSize * -0,03 ;
Enfin, nous définissons la hauteur de chaque bloc de liens et appliquons tous ces styles à nos éléments.
<!-- fs-richtext-ignore -->MenuItems.forEach (fonction (élément) {
item.style.fontSize = fontSize + « px » ;
}) ;
Et le tour est joué ! Nous avons un menu dynamique qui ajuste sa taille de police en fonction de l'élément de menu le plus long et de la taille de l'écran.
L'Encore
Mais nous ne nous arrêtons pas là. Nous appelons notre fonction chaque fois que la fenêtre est redimensionnée. C'est comme dire : « Hé, si l'espace change, recommençons ! »
<!-- fs-richtext-ignore -->window.onresize = AdjustFontSize ;
Nous appelons également notre fonction lorsque le document est prêt. C'est notre façon de dire : « Commençons cette fête ! »
<!-- fs-richtext-ignore -->document.addEventListener ('DOMContentLoaded', AdjustFontSize) ;
Conclusion
Alors voilà, les gars. Un guide étape par étape pour rendre le texte de votre Webflow aussi dynamique qu'un acrobate du Cirque du Soleil. C'est un peu long, mais en fin de compte, nous avons un menu qui est non seulement esthétique, mais qui s'adapte également à votre contenu et aux écrans de vos utilisateurs.
N'oubliez pas que la clé d'une expérience utilisateur de qualité est l'adaptabilité. Et avec ce menu dynamique, vous êtes sur la bonne voie pour créer un site aussi adaptable que possible.
Jusqu'à la prochaine fois, continuez à explorer, à expérimenter et, surtout, à créer. Le monde de Webflow est votre terrain de jeu. Maintenant, fais quelque chose de génial !
Si vous avez aimé le post, allez consultez certains de nos autres modes d'emploi ici.
