CSS でロングシャドウを実装し、javascript でアニメーションをつける方法

マテリアルデザインが登場した時に影が伸びたようなデザイン、ロングシャドウが流行りました。

そのロングシャドウを css で実装し、さらに javascript でアニメーションさせてみました。

cssのみでの実装方法

まずはアニメーションなしのロングシャドウを css のみで実装する方法を紹介します。

HTML

<p class="longshadow">LONG SHADOW</p>

CSS

p.longshadow{
 overflow: hidden;
 height: 2em;
 text-shadow:  1px  1px black,
               2px  2px black,
               3px  3px black, 
               4px  4px black, .....
              50px 50px black;
}

要素には overflow: hidden にしておかないと、影の末端が見えてしまってダサいので要注意。

実装結果

LONG SHADOW

javascript を利用してロングシャドウのアニメーションを実装

text-shadow のアニメーションは css のみでは実装できないので、 javascript で実装します。

HTML

<div class="longshadow_animation_container">
 <p id="longshadowAnimation" class="longshadow_animation">TOUCH ME</p>
</div>

CSS

div.longshadow_animation_container{
 position: relative; 
 width: 300px; 
 height: 300px;
 overflow: hidden;
 background-color: grey;
}

p#longshadow_animation{
 color: white; 
 font-size: 3rem; 
 position: absolute;
 top: 10px;
 left: 10px;
 width: 100%;
 margin: 0;
}

javascript

var ele = document.getElementById('longshadowAnimation'); 
ele.onclick = function(){
 var longshadow = '1px 1px black';
 var i = 2, iInit;
 var shadowSpeed = 5;
 var shadowLength = 500;
 var timer = setInterval(function(){
  iInit = i;
  for(i; i <= iInit + shadowSpeed; i++){
   longshadow += ', ' + i + 'px ' + i + 'px black';
  }
  ele.style.textShadow = longshadow;
  if(i > shadowLength){ clearInterval(timer); }
 });
}

setInterval により、text-shadow を変化させることでアニメーションさせています。
スピードの調整も可能なようにしています。 shadowSpeed を小さい整数にすれば遅く、大きな整数にすれば早く動きます。
また、ロングシャドウの長さも調整可能です。

実装結果

TOUCH ME

CSSで、文字の影付けを利用して文字にアウトラインをつける方法

こんな記事も読まれています

投稿はありません。

もう記事がありません

エラーが発生しました

もっと表示する

ウェブ開発へのお問い合わせはこちらから

ウェブサイトやアプリ開発をしております。
どんなものを作りたいのかを明記した上でお問い合わせをお願いします。
また、簡単な質問や要望も受け付けています。まずはお気軽にお問い合わせください。

  • 入力必須です。
  • 入力必須です。
  • メールアドレスの形式で入力してください。
  • 入力必須です。
OR

お問い合わせを送信しました。
24時間以内に返信させていただきますので、しばらくお待ちください。
お問い合わせありがとうございました。

送信に失敗しました。
何度も失敗するようでしたら、こちらからお問い合わせください。