crossline

▼PlugIn!!-animate-textshadow.js-

font-size:12px;line-height: 150%;

 

 

 

 

今回は、

授業でやった内容だけでなく、自分でいいなあと思ったjquery PlugIn!!してみます。

 

 

■animate-textshadow■

今回はtextにhoverしたときにshadowをつける。

 

 

▼Download

animate-textshadow.js - Animated CSS text shadows with jQuery | Alex Peattie

 

 

 

<head></head>内には、次のような記述をする

f:id:ishuko:20140622020157p:plain

 

<body></body>内

f:id:ishuko:20140622021726p:plain

 

スタイルシートで、文字の大きさや、フォントの種類を設定。スクリプト内の種類は、主にこんな感じ↓

 

  • id名 { text-shadow: # 0 0 15px;} (テキストにシャドウがかかっている状態)これに対し、記述をかえることで、マウスオーバーのときにボワっとした感じにできる f:id:ishuko:20140622021852p:plain

 

これだけシンプルな記述で出来上がりました。

シンプル、簡単、使えそう、でわたしのお気に入りです笑

 

 

 

 

 

広告を非表示にする