2014/09/11
波打つようなクリックエフェクトを実装できる「Waves」
![](https://co-jin.net/wp-content/uploads/2014/09/Waves01.jpg)
今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹介します。
ボタンやリンクにかぎらず、画像などにも適用できるので、表現の幅はいろいろと広がりそうですね。
静かな湖面を指で触れて波打つようなクリックエフェクトを実装できる「Waves」
「Waves」は、クリックしたときに、静かな湖面を指で触れて波打つようなクリックエフェクトを実装できるJavaScriptライブラリーです。
Wavesのサイトにデモがあるので、実際に試してみてください。
Waves利用の仕方
Wavesが公開されているGitHubページから、waves.min.cssとwaves.min.jsをダウンロードして、以下のように読み込みます。
そして、一行だけスクリプトを追加します(Waves.displayEffect();)。
これで準備が整いました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Waves example</title> <link rel="stylesheet" type="text/css" href="waves.min.css" /> </head> <body> <script type="text/javascript" src="waves.min.js"></script> <script type="text/javascript"> Waves.displayEffect(); </script> </body> </html> |
エフェクトを実装したい要素にクラス名を追加する
エフェクトを実装するには、実装したい箇所にクラス名を追加するだけです。
.waves-effectが基本のエフェクトです。
.waves-buttonは、ボタンの形でエフェクトします。
.waves-floatは、本来の色に、明度を落としたエフェクトを加えます。
.waves-lightは、本来の色に、明度を上げたエフェクトを加えます。
1 |
<a href="#" class="waves-effect waves-button waves-float">Click Here</a> |
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
無料で使えるフラットデザインUIキット40
フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン
-
-
ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る
ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr
-
-
スタイリッシュなポップアップ/モーダルウインドウ用jQuery無料プラグイン25
jQueryで実装できるスタイリッシュなポップアップ/モーダルウインドウ用プラグインをご紹介します。
-
-
これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」
こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利
-
-
美しいエフェクトが施されたCSSで作られたボタン12
css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を
-
-
レスポンシブ対応のコンテンツスライダー/スライドショーベスト8
以前の記事「レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+」
-
-
コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25
海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ
-
-
便利すぎる!商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始
商用無料で高画質画像を配布するUnsplashがプレースホルダー画像生成サービスを開始しました。
-
-
背景画像をフルスクリーン&レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?