TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak stworzyć efekt dynamicznego przejścia czcionek?

1

Wcześniej HTML był podstawą do projektowania stron internetowych. Programiści używali do definiowania stylów w HTML w celu zmiany kolorów i innych parametrów. Jednak obecnie najczęściej używa się CSS i JavaScript. Możesz dynamicznie zmieniać kolor czcionki tekstu na stronie za pomocą CSS i JavaScript. Jest to przydatne, ponieważ możesz zmienić kolor czcionki bez ponownego ładowania strony. Sprawdź, jak dynamicznie zmieniać treść przy użyciu różnych właściwości czcionki?

Widżet zmiany koloru czcionki

Poniżej znajduje się przykład, jak wygląda przejście czcionek.

Możesz zmienić kolor, grubość czcionki i rodzinę czcionek zgodnie z wymaganiami.

Jak stworzyć ten widżet?

Widżet przejścia czcionek zawiera trzy elementy:

  • CSS
  • JavaScript i
  • HTML

Możesz użyć wszystkich razem w widżecie lub użyć kodu osobno. Na przykład, jeśli chcesz użyć widżetu tylko na jednej stronie w swojej witrynie, skopiuj i wklej cały kod na swojej stronie, jak wyjaśniono poniżej. Alternatywnie, jeśli chcesz wstawić widżet w wielu miejscach, oddziel CSS i JavaScript, aby wstawić je jako pliki zewnętrzne na stronie.

Przykłady użycia widżetu zmiany czcionki

Użycie zależy od systemu zarządzania treścią, którego używasz do tworzenia swojej witryny.

  • Na zwykłej stronie HTML możesz wstawić kod widżetu w sekcjach nagłówka i treści.
  • Jeśli korzystasz z platform takich jak Weebly, użyj elementu Embed Code, aby wstawić kod na swojej stronie. W przeciwnym razie możesz użyć sekcji nagłówka i stopki do wstawiania odpowiednio kodu CSS i JS.
  • W WordPress możesz użyć niestandardowego bloku HTML za pomocą edytora Gutenberg do wstawienia widżetu.

CSS dla przejścia czcionek

Dodaj następujący kod CSS w sekcji swojej strony internetowej:

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

JavaScript do zmiany czcionek

Dodaj następujący kod skryptu w sekcji stopki (pod treścią) swojej strony internetowej, która znajduje się za treścią strony:

<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 dla widżetu zmiany czcionki

Poniżej treści HTML widżetu przejścia czcionek. Możesz wstawić ten kod w dowolnym miejscu w sekcji treści strony.

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

Dostosowywanie widżetu

Możesz dostosować kolor i czcionki do swoich potrzeb. Jak widać, używamy tabeli do wstawienia przejścia treści. Możesz użyć obramowania, tła i różnych ustawień czcionki dla każdej komórki, aby ozdobić widżet przejścia.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów