Earlier days, HTML was the base for web designing. Developers used to define styles within HTML for changing colors and other parameters. However, using CSS and JavaScript are most commonly used nowadays. You can change the font color of a text dynamically within a page using CSS and JavaScript. This is useful since you can change the font color without reloading a page. Check out how to dynamically change the content using different font properties?
Font Color Change Widget
Below is an example of how font transition looks like.
| Welcome to | W | e | b | N | o | t | s |
You can modify the color, font weight and font family as per the requirements.
How to Create this Widget?
The font transition widget contains three components:
- CSS
- JavaScript and
- HTML
You can either use all together in a widget or use the code separately. For example, if you want to use the widget on only one page on your site then copy and paste all the code on your page as explained below. Alternatively, if you want to insert the widget on multiple places then separate CSS and JavaScript to insert them as external files on the page.
Examples of Using Font Transition Widget
The usage depends on the content management system you use to create your website.
- On plain HTML webpage, you can insert the widget code in header and body sections.
- If you use platforms like Weebly, use Embed Code element to insert the code on your page. Otherwise, you can use header and footer sections for inserting CSS and JS code respectively.
- On WordPress, you can use Custom HTML block using Gutenberg editor to insert the widget.
CSS for Font Transition
Add the following CSS code under <head> section of your web page:
<style type="text/css">
table {
font-family: "georgia";
font-size: 35pt;
color: blue;
}
#celSlide {
letter-spacing: 9px;
color: silver;
}
</style>JavaScript for Font Transition
Add the following script code in the footer section (below the content) of your web page that is after the body of your page:
<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 for Font Transition Widget
Below the HTML content for the font transition widget. You can insert this code anywhere inside the body section of your page.
<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>Customizing the Widget
You can customize the color and fonts according to your need. As you see, we use table to insert the content transition. You can use border, background and different font settings for each cell to decorate the transition widget.
Leave a Reply
Your email is safe with us.