TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Comment créer un effet de transition de police dynamique ?

39

Auparavant, HTML était la base de la conception Web. Les développeurs avaient l’habitude de définir des styles dans HTML pour modifier les couleurs et d’autres paramètres. Cependant, l’utilisation de CSS et de JavaScript est la plus couramment utilisée de nos jours. Vous pouvez modifier la couleur de police d’un texte de manière dynamique dans une page en utilisant CSS et JavaScript. Ceci est utile car vous pouvez changer la couleur de la police sans recharger une page. Découvrez comment modifier dynamiquement le contenu à l’ aide de différentes propriétés de police ?

Widget de changement de couleur de police

Vous trouverez ci-dessous un exemple de transition de police.

Vous pouvez modifier la couleur, l’épaisseur de la police et la famille de polices selon les exigences.

Comment créer ce widget ?

Le widget de transition de police contient trois composants :

  • CSS
  • JavaScript et
  • HTML

Vous pouvez soit les utiliser tous ensemble dans un widget, soit utiliser le code séparément. Par exemple, si vous souhaitez utiliser le widget sur une seule page de votre site, copiez et collez tout le code sur votre page comme expliqué ci-dessous. Alternativement, si vous souhaitez insérer le widget à plusieurs endroits, séparez CSS et JavaScript pour les insérer en tant que fichiers externes sur la page.

Exemples d’utilisation du widget Transition de police

L’utilisation dépend du système de gestion de contenu que vous utilisez pour créer votre site Web.

  • Sur une page Web HTML simple, vous pouvez insérer le code du widget dans les sections d’en-tête et de corps.
  • Si vous utilisez des plateformes comme Weebly, utilisez l’élément Embed Code pour insérer le code sur votre page. Sinon, vous pouvez utiliser des sections d’en-tête et de pied de page pour insérer respectivement du code CSS et JS.
  • Sur WordPress, vous pouvez utiliser un bloc HTML personnalisé à l’aide de l’éditeur Gutenberg pour insérer le widget.

CSS pour la transition de police

Ajoutez le code CSS suivant dans la section de votre page Web :

<style type="text/css"> table { font-family: "georgia"; font-size: 35pt; color: blue; } #celSlide { letter-spacing: 9px; color: silver; } </style>

JavaScript pour la transition de police

Ajoutez le code de script suivant dans la section pied de page (sous le contenu) de votre page Web qui se trouve après le corps de votre page :

<script type="text/javascript"> var sColor1 = "white"; var sColor2 = "gray"; var iColorLoop = 0; var iCurrentCELL = 0; var bAscending = true; var output = null; var startTime = new Date(); function startCycle() { output = document.getElementById('output'); setInterval(cycleColors,100); } function cycleColors() { var celColorChange = document.getElementById('celColorChange').cells; if (bAscending) { celColorChange[iCurrentCELL++].style.color = sColor2; if (iCurrentCELL == celColorChange.length) { bAscending = false; iCurrentCELL = celColorChange.length; } } else { celColorChange[--iCurrentCELL].style.color = sColor1; if (iCurrentCELL == 0) { bAscending = true; changeColors(); } } } function changeColors() { switch (iColorLoop++) { case 0: sColor1="yellow"; sColor2="orange"; break; case 1: sColor1="hotpink"; sColor2="purple"; break; case 2: sColor1="aqua"; sColor2="blue"; break; case 3: sColor1="lightgreen"; sColor2="green"; } if (iColorLoop > 3) iColorLoop = 0; } </script>

HTML pour le widget de transition de police

Sous le contenu HTML du widget de transition de police. Vous pouvez insérer ce code n’importe où dans la section corps de votre page.

<body onload="startCycle()"> <div> <table> <tr id="celColorChange"> <td>Welcome to</td> <td>W</td> <td>e</td> <td>b</td> <td>N</td> <td>o</td> <td>t</td> <td>s</td> </tr> </table> </div> </body>

Personnalisation du widget

Vous pouvez personnaliser la couleur et les polices selon vos besoins. Comme vous le voyez, nous utilisons table pour insérer la transition de contenu. Vous pouvez utiliser la bordure, l’arrière-plan et différents paramètres de police pour chaque cellule pour décorer le widget de transition.

Source d’enregistrement: www.webnots.com

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails