TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag dynamisk teckensnittsövergångseffekt?

1

Tidigare var HTML grunden för webbdesign. Utvecklare brukade definiera stilar inom HTML för att ändra färger och andra parametrar. Att använda CSS och JavaScript är dock vanligast idag. Du kan ändra teckensnittsfärgen dynamiskt på en sida med hjälp av CSS och JavaScript. Detta är användbart eftersom du kan ändra teckensnittsfärgen utan att ladda om en sida. Kolla in hur du dynamiskt ändrar innehållet med olika typsnittsegenskaper?

Widget för ändring av teckensnittsfärg

Nedan följer ett exempel på hur teckensnittsövergången ser ut.

Du kan ändra färg, teckensnittsvikt och teckensnittsfamilj enligt kraven.

Hur skapar jag denna widget?

Teckensnittsövergångswidgeten innehåller tre komponenter:

  • CSS
  • JavaScript och
  • HTML

Du kan antingen använda alla tillsammans i en widget eller använda koden separat. Om du till exempel bara vill använda widgeten på en sida på din webbplats, kopiera och klistra in all kod på din sida enligt nedan. Alternativt, om du vill infoga widgeten på flera platser, separera CSS och JavaScript för att infoga dem som externa filer på sidan.

Exempel på användning av teckensnittsövergångswidget

Användningen beror på vilket innehållshanteringssystem du använder för att skapa din webbplats.

  • På vanlig HTML -webbsida kan du infoga widgetkoden i rubrik- och kroppsavsnitt.
  • Om du använder plattformar som Weebly, använd Bädda in kodelement för att infoga koden på din sida. Annars kan du använda sidhuvud och sidfot för att infoga CSS respektive JS kod.
  • WordPress kan du använda anpassat HTML -block med Gutenberg -editor för att infoga widgeten.

CSS för Font Transition

Lägg till följande CSS -kod under avsnittet på din webbsida:

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

JavaScript för Font Transition

Lägg till följande skriptkod i sidfotsdelen (under innehållet) på din webbsida som ligger efter sidens brödtext:

<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 för Font Transition Widget

Under HTML -innehållet för teckensnittsövergångswidgeten. Du kan infoga den här koden var som helst i sidans kroppsdel.

<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>

Anpassa widgeten

Du kan anpassa färgen och teckensnitten efter dina behov. Som du ser använder vi tabellen för att infoga innehållsövergången. Du kan använda gränsen, bakgrunden och olika teckensnittsinställningar för varje cell för att dekorera övergångswidgeten.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer