Animate text with shadow and glow [jquery.animate-textshadow.js]

In this article, we will explain in detail how to use jquery.animate-textshadow.js to add shadow and glow effects to text and animate them. This technique is highly effective when creating visually appealing web pages. We will provide a step-by-step explanation of the necessary CSS and JavaScript code to make it easy to use, so please read to the end.

By adding animation to text, you can create a more dynamic expression beyond just displaying text. This method is particularly effective in drawing users’ attention on websites or application UIs where design is crucial. By learning the content described below, you can further enhance your web development skills.

What is jquery.animate-textshadow.js?

jquery.animate-textshadow.js is a jQuery plugin that allows you to add shadow and glow effects to text and animate them. It is especially suitable for adding some movement or light effects to static web design. This plugin is often used to enhance the visual appeal of text and attract users’ attention.

jQuery is a JavaScript library widely used for easy DOM manipulation and event handling. This plugin, based on jQuery, is designed to be easy to use, even for beginners. The next section will explain how to use it specifically.

CSS Settings for Adding Shadows and Glow to Text

First, let’s set up the CSS to add shadows and glow to text. This CSS allows you to finely control the color, range, and position of the shadows and glow. Below is a sample code that you can customize as needed.

<style type="text/css">
<!--
body{
	margin: 2em;
	font-family:'Century Gothic', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}
h1{
	font-size:22px;
	font-weight:bold;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
	text-align:left;
}
#glow,#slow, #subtle, #blurry, #button{
	font-size: 40px;
	font-weight:bold;
}
#subtle{
	text-shadow: #ccc 3px 3px 3px;
}
#glow{
	letter-spacing: 2px;
	text-shadow: #f00 0 0 0;
	color: #cc2c2c;
}
#slow{
	letter-spacing: 2px;
	text-shadow: #259 5px 5px 5px;
	color: #49b;
}
#blurry{
	letter-spacing: -3px;
	text-shadow: #aaa 0 0 10px;
	color: transparent;
}
#button{
	position: relative;
	cursor: pointer;
	color: #3a3;
	text-shadow: #141 5px 5px 0;
}
-->
</style>

Animating Shadows and Glow on Text Using JavaScript

Next, we introduce the JavaScript code that uses jquery.animate-textshadow.js to animate the shadow and glow on text. This code makes it easy to dynamically change the text’s shadow and glow for animation.

Load the jquery.min.js (v1.6.1) and jquery.animate-textshadow.min.js files. Use $(text area).animate({textShadow: shadow color and range}, display speed) to set up the animation.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="jquery.animate-textshadow.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
	$("#subtle").hover(function() { $(this).animate({textShadow: "#aaa 6px 6px 6px"}); }, function() { $(this).animate({textShadow: "#ccc 3px 3px 3px"}); });
	$("#glow").hover(function() { $(this).animate({textShadow: "#f00 0 0 15px"}); }, function() { $(this).animate({textShadow: "#f00 0 0 0"}); });
	$("#slow").hover(function() { $(this).animate({textShadow: "#000 -10px -10px 30px"}, 1000); }, function() { $(this).animate({textShadow: "#259 5px 5px 5px"}, 1000); });
	$("#blurry").hover(function() { $(this).animate({textShadow: "#aaa 0 0 0"}); }, function() { $(this).animate({textShadow: "#aaa 0 0 10px"}); });
	$("#button").mousedown(function() { $(this).animate({top: "3px", left: "3px", textShadow: "#141 2px 2px 0"}, 100); }).mouseup(function() { $(this).animate({top: 0, left: 0, textShadow: "#141 5px 5px 0"}, 100); });
});
</script>

Implementation Example in HTML

Next, let’s see how to implement these effects in HTML code. The code below provides five different text effects using shadow and glow. Use these examples as a reference and apply them to your own project.

<div id="idWrap">
	<h1>The text has shadows and glows applied, and the effects are animated.</h1>

	<p><span id="subtle">The shadow moves.</span></p>

	<p><span id="glow">The text glows.</span></p>

	<p><span id="slow">The shadow moves.</span></p>

	<p><span id="blurry">The text becomes sharp.</span></p>

	<p><span id="button">Clickable text style.</span></p>

</div><!--/idWrap-->

animate-textshadow: Demo Page for Animating Shadows and Glow on Text

If you would like to see the effects of jquery.animate-textshadow.js in action, you can check the demo page from the link below. Please give it a try.

animate-textshadow: Demo Page for Animating Shadows and Glow on Text

Source: animate-textshadow.js and CSS Floating Feedback Button

Source: animate-textshadow.js and CSS floating feedback button

Tips for Choosing Fonts

When adding shadows and glow to text, font selection is also important. If the effect is too strong, the readability of the font may be compromised, so adjust it while considering the overall design balance. Thin fonts or italic fonts tend to have a stronger glow or shadow effect, so be cautious.

Conclusion

We have introduced how to use jquery.animate-textshadow.js to add shadows and glows to text and animate them. By using this technique, you can easily create visually impactful web pages. Even beginners can quickly master it if they have basic knowledge of CSS and JavaScript, so please give it a try.

We hope that by using these techniques, your website will evolve to be more attractive.

　
※If you reuse this content, please do so at your own risk. Please do not use the Google Analytics tag in the head tag of the demo page.