【Labs】jQueryでフラッシュみたいな動きのリンクボタン - web design lab

【Labs】jQueryでフラッシュみたいな動きのリンクボタン - web design lab

home > labs > 【Labs】jQueryでフラッシュみたいな動きのリンクボタン

9月更新・前月(8月)の人気記事トップ10 09/02/2024

( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
(圏外↑) 【Labs】CSSだけでドロップダウンメニュー
( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
( 09 ↑) 【Mac】Safariでソースコードを見る方法
( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
( 06 ↓) 【2024年5月】iPad画面解像度まとめ
(圏外↑) 【GIMP】レイヤーをロック

PVアクセスランキングにほんブログ村

【Labs】jQueryでスムーズスクロール【Labs】@importについて

【Labs】jQueryでフラッシュみたいな動きのリンクボタン

Posted on 2014-04-03
Last updated on 2017-10-07

こんにちは（・∀・）

今回はjQueryでフラッシュみたいにアニメーションするリンクボタンのサンプルをご紹介です。

jQueryでフラッシュみたいな動きのリンクボタン

jQueryでふわっと透明度の変換
jQueryでバウンドするボタン
jQueryでぼよよんって動きのボタン
jQueryでボタンの大きさを変換

1. jQueryでふわっと透明度の変換

マウスオーバーした時に透明度をふわっと変換します。

サンプル1〜4共通

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

HTML


<div class="jquery_btn">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</div>

CSS


.jquery_btn {
  width: 400px;
  margin: 0 auto;
  padding: 0;
}
.jquery_btn ul {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
}
.jquery_btn li {
  margin-right: 1px;
}
.jquery_btn li:last-child {
  margin-right: 0;
}
.jquery_btn li a {
  display: block;
  background: #9fb7d4;
  padding: 10px 0;
  width: 100px;
  text-align: center;
  color: white;
  box-sizing: border-box;
}

JavaScript


$(document).ready(function(){
$('.jquery_btn li a').hover(function(){
$(this).stop(true)
.fadeTo(500,0.5).css({'background':'#9fb7d4'});
},
function(){
$(this).fadeTo(500,1.0).css({'background':'#9fb7d4'});
});
});

Result

サンプルデモ

2. jQueryでバウンドするボタン

マウスオーバーした時にボタンがバウンドします。

HTML


<div class="jquery_btn2">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</div>

CSS


.jquery_btn2 {
  width: 400px;
  margin: 0 auto;
  padding: 0;
}
.jquery_btn2 ul {
  padding: 10px 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
  display: flex;
}
.jquery_btn li {
  margin-right: 1px;
}
.jquery_btn li:last-child {
  margin-right: 0;
}
.jquery_btn2 li a {
  display: block;
  background: #9fb7d4;
  padding: 10px 0;
  margin: -4px 1px 0 0;
  width: 100px;
  text-align: center;
  color: white;
  box-sizing: border-box;
  text-decoration: none;
}

JavaScript


$(document).ready(function(){
$('.jquery_btn2 li a').hover(function(){
$(this).stop(true)
.animate({'margin-top':'-9px'}, 200).animate({'margin-top':'-4px'}, 200)
.animate({'margin-top':'-7px'}, 100).animate({'margin-top':'-4px'}, 100)
.animate({'margin-top':'-6px'}, 100).animate({'margin-top':'-4px'}, 100);
},
function(){
$(this).animate({'margin-top':'-4px'}, 100);
});
});

Result

サンプルデモ

3. jQueryでぼよよんって動きのボタン

マウスオーバーした時にボタンをぼよよんって動かします。サンプルはテキストですが画像にするともう少し文字の動きが滑らかになります。

HTML


<div class="jquery_btn3">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</div>

CSS


.jquery_btn3 {
  width: 320px;
  height: 75px;
  padding: 0;
  margin: 0 auto;
}
.jquery_btn3 ul {
  list-style: none;
  overflow: hidden;
  padding: 5px;
  display: flex;
}
.jquery_btn3 li {
  background: #9fb7d4;
  width: 70px;
  height: 70px;
  margin: 0 5px 0 0;
  text-align: center;
  border-radius: 70px;
  box-sizing: border-box;
}
.jquery_btn3 li a {
  text-align: center;
  line-height: 4.8;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

JavaScript


$(document).ready(function(){
$('.jquery_btn3 li').hover(function(){
$(this).stop(true)
.animate({'width':'78px','height':'78px','marginTop':'-4px','marginLeft':'-4px'},200)
.animate({'width':'70px','height':'70px','marginTop':'0px','marginLeft':'0px'},100)
.animate({'width':'76px','height':'76px','marginTop':'-3px','marginLeft':'-3px'},100)
.animate({'width':'70px','height':'70px','marginTop':'0px','marginLeft':'0px'},100)
.animate({'width':'74px','height':'74px','marginTop':'-2px','marginLeft':'-2px'},100)
.animate({'width':'70px','height':'70px','marginTop':'0px','marginLeft':'0px'},100)
.animate({'width':'72px','height':'72px','marginTop':'-1px','marginLeft':'-1px'},100)
.animate({'width':'70px','height':'70px','marginTop':'0px','marginLeft':'0px'},100);
},
function(){
$(this)
.animate({'width':'70px','height':'70px','marginTop':'0px'},'fast');
});
});

Result

サンプルデモ

4. jQueryでボタンの大きさを変換

マウスオーバーした時にボタンの大きさを変換します。

HTML


<div class="jquery_btn4">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</div>

CSS


.jquery_btn4 {
  width: 320px;
  height: 75px;
  padding: 0;
  margin: 0 auto;
}
.jquery_btn4 ul {
  list-style: none;
  overflow: hidden;
  padding: 10px;
  display: flex;
}
.jquery_btn4 li {
  background: #9fb7d4;
  width: 70px;
  height: 70px;
  margin: 0 5px 0 0;
  border-radius: 70px;
  text-align: center;
  box-sizing: border-box;
}
.jquery_btn4 li a {
  text-align: center;
  line-height: 4.8;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

JavaScript


$(document).ready(function(){
$('.jquery_btn4 li').hover(function(){
$(this).stop(true).animate({
'width':'76px','height':'76px','marginTop':'-10px'},'fast');
},
function(){
$(this).animate({
'width':'70px','height':'70px','marginTop':'0px'},'fast');
});
});

Result

サンプルデモ

関連リンク

【Labs】CSSだけでアニメーションするリンクボタン

【Labs】jQueryでスムーズスクロール【Labs】@importについて

ウェブデザインラボ

latest posts

categories

about Webデザインラボ中の人

NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからグラフィックデザイナー兼Webデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり(某通販サイトで３ヶ月連続売り上げTop3を達成、最高順位２位という微妙な感じではあるが...)。趣味はお酒を飲みながらの家でまったり音楽鑑賞と自転車やバイクで行くキャンプやアウトドア系全般。そうそう食べ歩きもね。更新情報はTwitterかFacebookで配信してるのでフォローして確認してみて。

外部リンク

RSS

PVアクセスランキングにほんブログ村