Kuinka luoda dynaaminen kirjasinten siirtotehoste?
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.