[jQuery] クリック時に波紋のような効果をつける
公開日:
:
jQuery, Web制作 javascript, jQuery
Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
今回は、クリックした時に波紋のような効果をつけるjQueryプラグインの紹介です。
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
関連記事
-
-
[javascript] Google Maps javascript API v3の使い方(基本編)
Google Maps javaScript API v3とは Google Maps API V
-
-
[HTML] 初心者を脱却するためのHTMLの心構え!
デザインを見たら、まずレイアウトの方法をイメージしよう 僕は、基本的にデザインを頂いたときに、すぐ
-
-
[Dreamweaver] コーディングを早くする5つの方法
コーディングは、早くなる! 普段、Dreamweaverを使っている人で、SassやZenコーディ
-
-
[CSS]印刷用CSSの設定方法
印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま
-
-
[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]
jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え
-
-
[CSS] clearfixの使い方を考える
現在のclearfix 以前は、IE6に対応させるためにソースがちょっと多かったですが、現在はかな
-
-
[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第4回]
完全に放置してました、僕です。 別に忘れていた訳じゃないんですが、時間がありませんでした。
-
-
[Dreamweaver] オプション領域を極める!テンプレート上級編
オプション領域は、難しい! これまで、数回に渡りDreamweaverでのテンプレートの使い方を紹
-
-
[CSS] CSS3のtransitionを使ってみよう!
CSS3のTransitionは、そんなに難しくない! CSS3では、CSSのマークアップだけでア
-
-
[javascript] Google Maps javaScript API v3の使い方(応用編:マーカーを変更する)
いろんなことが出来るようになったv3 昨日、基本編を書きましたが、今回は応用編です。 v3に