ホーム >  JavaScript >  jQueryで波紋が広がる円形ボタンを作る

投稿日：   ｜  最終更新日:

jQueryで波紋が広がる円形ボタンを作る

JavaScriptjQuery

jQueryで、アニメーションのボタンを作成します。Flash無しで、円形の波紋が広がる効果を出します。ポイントは以下の通りです。

  • jQueryでアニメーションを作る。
  • jQueryでnot(“:animated”)でモーション制御。
  • cssのmargin、widht、heightを利用してボタンを配置。

完成イメージ

円形のボタンがあり、ボタンの周りを円が囲っています。

jQ0006
↓

ボタンをマウスオーバーする（カーソルを重ねる）と、波紋のアニメーションが発生します。

jQ0005
↓

すぐに波紋が元の円に戻ります。

jQ0007

  1. ファイル構成
  2. コード
  3. 解説

ファイル構成

ファイルをサイトのフォルダに配置します。サイトフォルダ名を「sample」とします。

※wordpress基準ですが、wordpressでなくても作成できます。

  • sample/
  • index.php
  • style.css
  • css/
  • sample.css
  • img/
  • button01.png
  • js/
  • index.js
  • vendor/
  • jquery.min.js
  • html5shiv.js

コード

index.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タイトル</title>
  <link href="<?php echo get_stylesheet_directory_uri() . '/css/sample.css' ; ?>" rel="stylesheet" type="text/css" />
  <script src="<?php echo get_template_directory_uri() . '/js/vendor/jquery.min.js' ; ?>"></script>
  <script src="<?php echo get_template_directory_uri() . '/js/index.js' ; ?>"></script>
  <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/vendor/html5shiv.js" type="text/javascript"></script>
  <![endif]-->
<?php wp_head(); ?>
</head>
<body>
<div id="topIndex">
  <div>
    <nav>
      <ul>
        <li id="menubutton01"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/button01.png" alt="#1" width="113" height="113"></a></li>
        <li id="menubutton02"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/button01.png" alt="#2" width="113" height="113"></a></li>
        <li id="menubutton03"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/button01.png" alt="#3" width="113" height="113"></a></li>
        <li id="menubutton04"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/icon-event.png" alt="#4" width="113" height="113"></a></li>
      </ul>
    </nav>
  </div>
</div>
<?php wp_footer(); ?>
</body>
</html>

sample.css

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

li {
	list-style: none;
}

a img {
	border: none;
}


html {
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: #000;
	line-height: 120%;
	height: 100%;
}

body {
	padding: 0;
	margin: 0 auto;
	width: 1000px;
	position: relative;
	min-height: 100%;
	background: #FFF;
}

#topIndex > div {
	border-top: 1px solid #FFF;
	background-color: #000000 ;
	height: 690px;
	position: relative;
}

#topIndex > div > header {
	position: absolute;
	top: 40px;
	left: 25px;
}

#topIndex nav li {
	position: absolute;
	display: block;
	width: 130px;
	height: 130px;
	opacity: .8;
}

#topIndex nav li div {
	position: absolute;
	width: 129px;
	height: 129px;
	border: 5px solid #FFF;
	border-radius: 50%;
	opacity: .5;
}

#topIndex nav li:hover {
	opacity: 1;
}


#topIndex nav li#product {
	top: 195px;
	left: 185px;
}

#topIndex nav li#business {
	top: 195px;
	left: 365px;
}

#topIndex nav li#support {
	top: 195px;
	left: 545px;
}

#topIndex nav li#event {
	top: 195px;
	left: 725px;
}

#topIndex nav li a {
	position: absolute;
	width: 130px;
	height: 130px;
}

#topIndex nav li a img {
	display: block;
	margin: 8px;
}

button01.png

button01

index.js

jQuery(function(){
  if($.support.cssFloat){

    $("nav li").prepend("<div></div>");

    $("nav li").mouseover(function(){
      $("div",this).not(":animated").animate({
        width: "300px",
        height: "300px",
        margin: "-86px",
        borderWidth: "0px",
      }, "slow", "swing")
      .animate({
        width: "129px",
        height: "129px",
        margin: "0px",
        borderWidth: "5px",
      }, 500, "swing");
    });

    $("nav li").mouseout(function(){
      $("div",this).not(":animated").animate({
        width: "129px",
        height: "129px",
        margin: "0px",
        borderWidth: "5px",
      }, 500, "swing");
   });

  }
});

jquery.min.js

jQueryのライブラリです。以下からダウンロードします。
→jQuery

html5shiv.js

html5shiv.jsです。以下からダウンロードします。
→html5shiv.js

解説

jsファイルとcssファイル呼び出し

index.php
  <link href="<?php echo get_stylesheet_directory_uri() . '/css/sample.css' ; ?>" rel="stylesheet" type="text/css" />
  <script src="<?php echo get_template_directory_uri() . '/js/vendor/jquery.min.js' ; ?>"></script>
  <script src="<?php echo get_template_directory_uri() . '/js/index.js' ; ?>"></script>
  <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/vendor/html5shiv.js" type="text/javascript"></script>
  <![endif]-->

以下の外部ファイルを呼び出します。

  • sample.css
  • index.js
  • jquery.min.js
  • html5shiv.js

「get_stylesheet_directory_uri()」は現在のテーマのスタイルシートがあるディレクトリのURLを返します。

「get_template_directory_uri()」は現在のテンプレートのパス名（URI）を返します。

※wordpressであるため、style.cssは自動的にスタイルシートとして適用されます。

子セレクタ

sample.css
#topIndex > div {

#topIndex > div > header {

>は、直下の階層の子要素をあらわします。

「#topIndex > div」は、　#topIndex直下のdivのスタイルという意味です。

孫要素以下のdiv要素にはスタイルは適用されません。

positionプロパティでメニューボタン配置

index.php
<div id="topIndex">
  <div>
    <nav>
      <ul>
        <li id="menubutton01"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/button01.png" alt="#1" width="113" height="113"></a></li>
        <li id="menubutton02"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/button01.png" alt="#2" width="113" height="113"></a></li>
        <li id="menubutton03"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/button01.png" alt="#3" width="113" height="113"></a></li>
        <li id="menubutton04"><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/chapter01/img/icon-event.png" alt="#4" width="113" height="113"></a></li>
      </ul>
    </nav>
  </div>
</div>
sample.css
#topIndex > div {
    border-top: 1px solid #FFF;
    background-color: #000000 ;
    height: 690px;
    position: relative;
}
 
#topIndex > div > header {
    position: absolute;
    top: 40px;
    left: 25px;
}
#topIndex nav li {
    position: absolute;
    display: block;
    width: 130px;
    height: 130px;
    opacity: .8;
}

<ul>タグを使い、ボタンを配置します。cssで制御するため、<li>タグにidを振っておきます。

relativeの中のabsolute

<div>タグの中に、<header>タグと<li>タグが入れ子状態になっています。<li>タグは、ボタンを配置するために使用します。

  • relativeは、「相対位置への配置」です。
  • absoluteは、「絶対位置への配置」です。

jQ0009

このように、relativeの要素の中でabsoluteを使う場合は、relativeの要素（上記ソースで言う<div>タグ）の左上を0 0の座標とした基点になります。

※画像背景などの中でpositionを使う場合、ほとんどこの方法を使います。

各ボタンの共通プロパティ

sample.css
#topIndex nav li {
    position: absolute;
    display: block;
    width: 130px;
    height: 130px;
    opacity: .8;
}
・・・（省略）・・・
#topIndex nav li a img {
	display: block;
	margin: 8px;
}

jQ0007

各ボタン共通のスタイルを定義します。ボタンは、「position」「display」「width」「height」「opacity」が共通です。このボタンサイズは、外円部分のスペースです。

外円を作る

sample.css
#topIndex nav li div {
	position: absolute;
	width: 129px;
	height: 129px;
	border: 5px solid #FFF;
	border-radius: 50%;
	opacity: .5;
}
index.js
    $("nav li").prepend("<div></div>");

div要素を、<li>要素内に作ります。htmlの直接記述はありませんが、jQueryによって記述することは可能です。

jQ0010

この<div>要素は、波紋エフェクトに利用します。

外円を動かす

index.js
    $("nav li").mouseover(function(){
      $("div",this).not(":animated").animate({
        width: "300px",
        height: "300px",
        margin: "-86px",
        borderWidth: "0px",
      }, "slow", "swing")
・・・（省略）・・・
    });

波紋の最大時CSSをjQueryに書き込みます。cssの値をアニメーションさせるには、「animate」プロパティを使います。これで、波紋がデフォルトサイズから最大サイズになって消えるまでのアニメーションができます。
「borderWidth: “0px”」で、波紋は見えなくなります。

外円を元のサイズに戻す

元のサイズになる（index.js）
    $("nav li").mouseover(function(){
・・・（省略）・・・
      .animate({
        width: "129px",
        height: "129px",
        margin: "0px",
        borderWidth: "5px",
      }, 500, "swing");
    });

波紋が広がりきったあと、元のサイズに戻る記述も追加します。

マウスアウトで元のサイズになる（index.js）
    $("nav li").mouseout(function(){
      $("div",this).not(":animated").animate({
        width: "129px",
        height: "129px",
        margin: "0px",
        borderWidth: "5px",
      }, 500, "swing");
   });

広がりきったら元のサイズに戻ります。マウスアウトしたときでも戻るようにします。

波紋アニメーションを停止する

    $("nav li").mouseout(function(){
      $("div",this).not(":animated").animate({
・・・（省略）・・・
    });
 
    $("nav li").mouseout(function(){
      $("div",this).not(":animated").animate({
・・・（省略）・・・
   });

外円（波紋）が広がるアニメーションのみでは、高速でマウスオーバー・マウスアウトを繰り返します。結果、マウスアウトしたあとでもしばらく波紋が出続けてしまいます。

  • 「.animate」していないときの動作が必要です。
  • 「.animate」の前に「.not(“:animated”)」を追加します。

IE8用の処理

jQuery(function(){
  if($.support.cssFloat){
・・・（省略）・・・

外円のスタイルは、CSSの「border-radius」を使用しています。IE8以下で閲覧した場合は、外円と波紋は表示されません。プログレッシブエンハンスメント対応としているだけで、ボタンとしては問題ありません。

IE8ではjQuery処理が不要になります。IE8にとっては余計なjQueryを読みとばさせるため、「if($.support.cssFloat)」を記述します。

トラックバック用のURL
プロフィール

名前：イワサキ　ユウタ 職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア 誕生：1986年生まれ 出身：静岡県 特技：ウッドベース 略歴 20

最近の投稿
人気記事
カテゴリー
広告

PAGE TOP