NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

jQueryでつくるキラッと光るボタン

2013年4月26日jQueryのみでつくるギミック

キラッと光るボタン

ボタンをキラっと光らせるアニメーションをgifアニメを使用せずにjQueryで作ります。光の表現はpng画像を使用した方法とCSS3を使用した方法の2種類を用意しました。

アニメーションも含め全てCSSで光るボタンを作るテクニックも紹介しています。

デモページ

JavaScript

var shinyObj = '.button a span.shiny';
var shinySpeed = 1000;
var interval = 3000;

$(function() { setTimeout('shinybutton()', 500 ); });
function shinybutton(){
	$(shinyObj).animate({left:'+=250px'},shinySpeed).animate({left:'-60px'}, 0);
	setTimeout('shinybutton()',interval);
}

HTML

<section id="png">
	<h2>png ver</h2>
	<div class="button">
		<a href="#">
			<span class="shiny"><img src="efct_shiny.png" width="80" height="102"></span>
			<span class="btn">shiny button</span>
		</a>
	</div>
</section>
<section id="css3">
	<h2>css3 ver</h2>
	<div class="button">
		<a href="#">
			<span class="shiny"></span>
			<span class="btn">shiny button</span>
		</a>
	</div>
</section>

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. jQueryでつくるキラッと光るボタン

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com