jquery.animate-textshadow.jsを使ってテキストに影やグロー(Glow:光を表現するエフェクト)を付けてアニメーション表示する方法をご紹介します。
Contents
- jquery.animate-textshadow.jsを使ってテキストに影やグロー(Glow)を付けてアニメーション表示するCSSの記述
- jquery.animate-textshadow.jsを使ってテキストに影やグロー(Glow:光を表現するエフェクト)を付けてアニメーション表示するJavaScriptの記述
- テキストに影やグロー(Glow)を付けてアニメーション表示するHTMLの記述例
- animate-textshadow:テキストに影やグローを付けてアニメーション表示するデモページ
- ソース元:animate-textshadow.js and CSS floating feedback button
ディスプレイ広告
jquery.animate-textshadow.jsを使ってテキストに影やグロー(Glow)を付けてアニメーション表示するCSSの記述
※影やグロー(Glow)を付けるテキストのCSS記述です。必要に応じて変更して下さい。
<style type="text/css"> <!-- body{ margin: 2em; font-family:'Century Gothic', 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'MS Pゴシック', '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>
jquery.animate-textshadow.jsを使ってテキストに影やグロー(Glow:光を表現するエフェクト)を付けてアニメーション表示する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>
テキストに影やグロー(Glow)を付けてアニメーション表示する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:テキストに影やグローを付けてアニメーション表示するデモページ
animate-textshadow:テキストに影やグローを付けてアニメーション表示するデモページ
ソース元:animate-textshadow.js and CSS floating feedback button
ソース元:animate-textshadow.js and CSS floating feedback button
フォントの種類とあわせてテキストに影やグローを付けると良いと思います。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。