TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як створити ефект переходу динамічного шрифту?

7

Раніше HTML був основою для веб -дизайну. Розробники використовували для визначення стилів у HTML для зміни кольорів та інших параметрів. Тим не менш, використання CSS та JavaScript сьогодні найчастіше використовується. Ви можете динамічно змінювати колір шрифту тексту на сторінці за допомогою CSS та JavaScript. Це корисно, оскільки ви можете змінити колір шрифту без перезавантаження сторінки. Дізнайтеся, як динамічно змінювати вміст за допомогою різних властивостей шрифту?

Віджет зміни кольору шрифту

Нижче наведено приклад того, як виглядає перехід до шрифту.

Ви можете змінити колір, вагу шрифту та сімейство шрифтів відповідно до вимог.

Як створити цей віджет?

Віджет переходу шрифту містить три компоненти:

  • CSS
  • JavaScript та
  • HTML

Ви можете використовувати всі разом у віджеті або використовувати код окремо. Наприклад, якщо ви хочете використовувати віджет лише на одній сторінці свого сайту, скопіюйте та вставте весь код на своїй сторінці, як описано нижче. Крім того, якщо ви хочете вставити віджет у декілька місць, відокремте CSS та JavaScript, щоб вставити їх як зовнішні файли на сторінці.

Приклади використання віджету переходу до шрифтів

Використання залежить від системи управління вмістом, яку ви використовуєте для створення свого веб -сайту.

  • На звичайній веб -сторінці HTML ви можете вставити код віджета у розділи заголовка та основного тексту.
  • Якщо ви використовуєте такі платформи, як Weebly, використовуйте елемент вставлення коду, щоб вставити код на свою сторінку. В іншому випадку ви можете використовувати розділи верхнього та нижнього колонтитулів для вставлення коду CSS та JS відповідно.
  • На WordPress ви можете використовувати спеціальний блок HTML за допомогою редактора Гутенберга, щоб вставити віджет.

CSS для переходу до шрифтів

Додайте наступний код CSS у розділ своєї веб -сторінки:

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

JavaScript для переходу до шрифтів

Додайте наступний код сценарію до розділу нижнього колонтитула (під вмістом) вашої веб -сторінки, що знаходиться після тексту вашої сторінки:

<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 для віджета переходу шрифтів

Нижче вмісту HTML для віджета переходу до шрифту. Ви можете вставити цей код будь -де в розділі тексту сторінки.

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

Налаштування віджета

Ви можете налаштувати колір та шрифти відповідно до ваших потреб. Як бачите, ми використовуємо таблицю для вставки переходу вмісту. Ви можете використовувати межі, фон та різні налаштування шрифту для кожної клітинки, щоб прикрасити віджет переходу.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі