JavaScript

テキストに影やグロー（Glow）を付けてアニメーション表示【jquery.animate-textshadow.js】

  /

この記事では、jquery.animate-textshadow.jsを使って、テキストに影やグロー（Glow: 光を表現するエフェクト）を付けてアニメーションさせる方法を詳しく解説します。この技術は、視覚的に魅力的なウェブページを作成する際に非常に有効です。簡単に使えるように、必要なCSSやJavaScriptの記述をステップバイステップで説明していきますので、ぜひ最後まで読んでください。

テキストにアニメーションを加えることで、単なる文字の表示から一歩進んだ、よりダイナミックな表現が可能になります。この手法は、特にデザイン性を求められるウェブサイトやアプリケーションのUIにおいて、ユーザーの目を引く効果があります。これから説明する内容を学ぶことで、あなたのウェブ制作スキルをさらに向上させることができるでしょう。

Contents

jquery.animate-textshadow.jsとは

jquery.animate-textshadow.jsは、jQueryを利用してテキストに影やグロー効果を付け、それをアニメーションで動かすためのプラグインです。特に、静的なウェブデザインに少し動きや光のエフェクトを加えたい場合に最適です。このプラグインは、テキストの視覚的な魅力を引き出し、ユーザーの注目を集めるために使用されることが多いです。

jQueryは、JavaScriptのライブラリであり、DOM操作やイベント処理を簡単に行えることから、広く使われています。そのjQueryをベースにしたこのプラグインは、初心者でも簡単に使えるように設計されています。次のセクションでは、具体的な使い方について説明します。

テキストに影やグローを付けるためのCSS設定

まずは、テキストに影やグローを付けるためのCSSを設定します。このCSSは、影やグローの色、範囲、位置などを細かく制御することができます。以下にサンプルコードを示しますので、必要に応じてカスタマイズしてください。

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

JavaScriptによるテキストに影やグローを付けるアニメーション

次に、jquery.animate-textshadow.jsを使って、テキストに影やグローをアニメーションで付けるためのJavaScriptコードを紹介します。このコードでは、テキストの影やグローを動的に変更するためのアニメーションを簡単に設定できます。

jquery.min.js（v1.6.1）、jquery.animate-textshadow.min.jsファイルを読み込みます。$(テキストエリア).animate({textShadow: 影の色と範囲},表示速度)で設定します。

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

HTMLでの実装例

次に、HTMLコードでどのようにこれらのエフェクトを実装するかを見ていきましょう。以下のコードでは、5つの異なるテキストエフェクト、影やグロー（Glow）を用意しています。これらを参考に、自分のプロジェクトで応用してみてください。

<div id="idWrap">
	<h1>テキストを影やグローを付けてその効果がアニメーションします。</h1>

	<p><span id="subtle">影が動きます。</span></p>

	<p><span id="glow">文字がグローします。</span></p>

	<p><span id="slow">影が移動します。</span></p>

	<p><span id="blurry">文字がシャープになります。</span></p>

	<p><span id="button">クリック出来る文字風です。</span></p>

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

animate-textshadow：テキストに影やグローを付けてアニメーション表示するデモページ

実際にjquery.animate-textshadow.jsの効果を確認したい方は、以下のリンクからデモページを確認することができます。ぜひ試してみてください。

animate-textshadow：テキストに影やグローを付けてアニメーション表示するデモページ

ソース元：animate-textshadow.js and CSS floating feedback button

ソース元：animate-textshadow.js and CSS floating feedback button

フォント選びのポイント

テキストに影やグローを付ける際に、フォント選びも重要です。エフェクトが強すぎると、フォントの読みやすさが損なわれることがありますので、デザイン全体のバランスを見ながら調整してください。特に、細いフォントや斜体のフォントはグローや影の効果が強く出ることが多いので、注意が必要です。

まとめ

jquery.animate-textshadow.jsを使ってテキストに影やグローを付けてアニメーションさせる方法を紹介しました。この技術を使えば、視覚的にインパクトのあるウェブページを簡単に作成することができます。特に初心者の方でも、CSSとJavaScriptの基本的な知識があればすぐに使いこなせるので、ぜひ試してみてください。

以上の手法を活用することで、あなたのウェブサイトがより魅力的に進化することを願っています。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

グロー シャドー 影 アニメーション animate-textshadow アニメーションエフェクト
関連記事