[jQuery] クリック時に波紋のような効果をつける

公開日: : jQuery, Web制作 ,

今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。

Ripple Click Effect

まずは、デモページをご覧ください。

Ripple Click Effect

右側のメニューのような部分がデモになっています。

導入方法

導入はそれほど難しくありません。
まずは、HTMLから見ていきましょう。

<ul>
 <li><a>Dashboard</a></li>
 <li><a>My Account</a></li>
 <li><a>Direct Messages</a></li>
 <li><a>Chat Rooms</a></li>
 <li><a>Settings</a></li>
 <li><a>Logout</a></li>
</ul>

<!-- jQuery -->
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>

HTMLは、これだけです。

次は、CSSです。

/*nav styles*/
ul {
 background: white; border-top: 6px solid hsl(180, 40%, 60%);
 width: 200px; margin: 0 auto;
}
ul li {
 list-style-type: none;
 /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
 position: relative;
 overflow: hidden;
}
ul li a {
 font: normal 14px/28px Montserrat; color: hsl(180, 40%, 40%);
 display: block; padding: 10px 15px;
 text-decoration: none;
 cursor: pointer; /*since the links are dummy without href values*/
 /*prevent text selection*/
 user-select: none;
 /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
 position: relative;
}

/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
 display: block; position: absolute;
 background: hsl(180, 40%, 80%);
 border-radius: 100%;
 transform: scale(0);
}
/*animation effect*/
.ink.animate {animation: ripple 0.65s linear;}
@keyframes ripple {
 /*scale the element to 250% to safely cover the entire link and fade it out*/
 100% {opacity: 0; transform: scale(2.5);}
}

CSSは、ちょっと複雑ですね。
続いて、jsです。

//jQuery time
var parent, ink, d, x, y;
$("ul li a").click(function(e){
	parent = $(this).parent();
	//create .ink element if it doesn't exist
	if(parent.find(".ink").length == 0)
		parent.prepend("<span class='ink'></span>");

	ink = parent.find(".ink");
	//incase of quick double clicks stop the previous animation
	ink.removeClass("animate");

	//set size of .ink
	if(!ink.height() && !ink.width())
	{
		//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
		d = Math.max(parent.outerWidth(), parent.outerHeight());
		ink.css({height: d, width: d});
	}

	//get click coordinates
	//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
	x = e.pageX - parent.offset().left - ink.width()/2;
	y = e.pageY - parent.offset().top - ink.height()/2;

	//set the position and add class .animate
	ink.css({top: y+'px', left: x+'px'}).addClass("animate");
})

これを外部ファイルとして保存しましょう。
ソース的に合わなくて変更する場合は、最初の「ul li a」の部分を変更します。

まとめ

このプラグインは、どちらかというとスマートフォンやタブレットなど、タッチしたときに視覚的にタッチされた事がわかるので、スマホサイトなどに積極的に取り入れたいですね。

ad

関連記事

[HTML] 初心者を脱却するためのHTMLの心構え!

デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第2回]

忙しくて忘れてました。僕です。 さて、今回はもうちょっと見栄えもよくしたいなーなんて考

記事を読む

[jQuery] 背景画像を画面いっぱいにするプラグイン

背景に、画像をいっぱいに広げて表示したいときってありますよね。 ちょうど、そういう必要があったため

記事を読む

[jQuery] FlickerPlateを紹介します。

かっこいいプラグインで、フリックにも対応します。 Flickerplateは、シンプルでとても使い

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[javascript] Google Maps javaScript API v3の使い方(応用編:Mapの色を変更する)

まだまだあるぞ!Google Maps javaScript API v3 さて、2回にわたって紹

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

[CSS] メディアクエリ(Media Queries)を考える

Media Queriesとは Media Queriesとは、画面環境に応じてCSSの適用範囲を

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。
PAGE TOP ↑