Как создать эффект динамического перехода шрифта?

Раньше HTML был основой веб-дизайна. Разработчики использовали для определения стилей в HTML для изменения цветов и других параметров. Однако в настоящее время чаще всего используются CSS и JavaScript. Вы можете динамически изменять цвет шрифта текста на странице с помощью CSS и JavaScript. Это полезно, поскольку вы можете изменить цвет шрифта, не перезагружая страницу. Узнайте, как динамически изменять контент, используя разные свойства шрифта?

Виджет изменения цвета шрифта

Ниже приведен пример того, как выглядит переход шрифта.

Вы можете изменить цвет, толщину шрифта и семейство шрифтов в соответствии с требованиями.

Как создать этот виджет?

Виджет перехода шрифтов состоит из трех компонентов:

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

Примеры использования виджета смены шрифта

Использование зависит от системы управления контентом, которую вы используете для создания своего веб-сайта.

  • На простой веб-странице HTML вы можете вставить код виджета в разделы заголовка и тела.
  • Если вы используете такие платформы, как Weebly, используйте элемент Embed Code, чтобы вставить код на свою страницу. В противном случае вы можете использовать разделы верхнего и нижнего колонтитула для вставки кода 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>

Настройка виджета

Вы можете настроить цвет и шрифты в соответствии с вашими потребностями. Как видите, мы используем таблицу для вставки перехода контента. Вы можете использовать границу, фон и различные настройки шрифта для каждой ячейки, чтобы украсить виджет перехода.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *