TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda dynaaminen kirjasinten siirtotehoste?

4

Aiemmin HTML oli web -suunnittelun perusta. Kehittäjät määritelivät tyylejä HTML: ssä värien ja muiden parametrien muuttamiseksi. CSS: n ja JavaScriptin käyttö on kuitenkin yleisimpiä nykyään. Voit muuttaa tekstin fontin väriä dynaamisesti sivulla CSS: n ja JavaScriptin avulla. Tästä on hyötyä, koska voit muuttaa kirjasimen väriä lataamatta sivua uudelleen. Katso, miten voit muuttaa sisältöä dynaamisesti eri kirjasinominaisuuksilla?

Fontin värinvaihto -widget

Alla on esimerkki siitä, miltä kirjasinten siirto näyttää.

Voit muokata väriä, kirjasinpainoa ja kirjasinperhettä vaatimusten mukaisesti.

Kuinka luoda tämä widget?

Fonttisiirto -widget sisältää kolme osaa:

  • CSS
  • JavaScript ja
  • HTML

Voit joko käyttää kaikkia yhdessä widgetissä tai käyttää koodia erikseen. Jos esimerkiksi haluat käyttää widgettiä vain yhdellä sivustosi sivulla, kopioi ja liitä kaikki sivullasi oleva koodi alla kuvatulla tavalla. Vaihtoehtoisesti, jos haluat lisätä widgetin useisiin paikkoihin, erota CSS ja JavaScript ja lisää ne sivun ulkoisiksi tiedostoiksi.

Esimerkkejä fonttisiirtymän widgetin käytöstä

Käyttö riippuu sisällönhallintajärjestelmästä, jota käytät verkkosivustosi luomiseen.

  • Tavallisella HTML -verkkosivulla voit lisätä widget -koodin otsikko- ja runko -osiin.
  • Jos käytät Weeblyn kaltaisia ​​alustoja, lisää koodi sivullesi käyttämällä Upota koodi -elementtiä. Muussa tapauksessa voit lisätä CSS- ja JS -koodin ylätunniste- ja alatunnisteosiin.
  • Käytössä WordPress, voit käyttää Custom HTML lohkon käyttämällä Gutenbergin editorin lisätä vekotin.

CSS fontinsiirtoa varten

Lisää seuraava CSS -koodi verkkosivusi osioon:

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

JavaScript fonttisiirtoa varten

Lisää seuraava skriptikoodi verkkosivusi alatunnisteeseen (sisällön alapuolelle), joka on sivun rungon jälkeen:

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

Fontinsiirto -widgetin HTML

Fontinsiirto -widgetin HTML -sisällön alla. Voit lisätä tämän koodin mihin tahansa sivusi body -osioon.

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

Widgetin mukauttaminen

Voit muokata värejä ja fontteja tarpeidesi mukaan. Kuten näette, käytämme taulukkoa sisällön siirtymisen lisäämiseen. Voit käyttää reunan, taustan ja eri kirjasinasetuksia kullekin solulle koristamaan siirtymäwidgetin.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja