Rippler · Effect that spreads like a wave in touch or click.
You can also use the buttons on the bootstrap. rippler-inverse rippler-default rippler-inverse rippler-default rippler-inverse rippler-default <a class="btn btn-default rippler rippler-inverse" href="#">rippler-inverse</a> <button class="btn btn-primary rippler rippler-default">rippler-default</button> <a class="btn btn-success rippler rippler-inverse" href="#">rippler-inverse</a> <a class="btn bt
クリックで波紋を出すエフェクト（Ripple Effect）実装メモ - Qiita
javascript エフェクト要素をクリックした座標を中心とした位置に移動させます。 エフェクトのアニメーション自体はcssで表現しています。 エフェクトを発動させるためのclassを付け替えます。 $(function() { var $clickable = $('.ripple'); /* mousedownだと直ぐに発動し、clickだとマウスボタンを離した時に発動する */ $clickable.on('mousedown', function(e) { var _self = this; var x = e.offsetX; var y = e.offsetY; var $effect = $(_self).find('.ripple__effect'); var w = $effect.width(); var h = $effect.height(); /* クリックした
Emmet — the essential toolkit for web-developers
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: <!doctype html> <html lang="en"> <head> <title>Demo</title> </head> <body> | </body> </html> @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expand Abbreviation” action to expand it into HTML wait: 600 run: emmet.expand_abbreviation wait: 1000 tooltip: Trav
jQuery & CSS3でiTunes風のカバーフローUIを実装できる「jQuery UI CoverFlow 2.0 Using $.widget」｜BLACKFLAG
iTunesなどで有名なカバーフローと呼ばれるUI。 サイト上にカバーフローを実装させるjQueryプラグインもあったりしますが 実装方法が面倒だったり、動きがスムーズでなかったりするのですが、 jQueryとCSS3で構成されたカバーフローUIを実装できる「jQuery UI CoverFlow 2.0 Using $.widget」が 動きも滑らかで使いやすそうだったのでメモ書き程度に紹介してみます。 ≫jQuery UI CoverFlow 2.0 Using $.widget ≫デモはこちら：jQuery UI CoverFlow II | Addy Osmani 画面上のスクロールバーもしくはマウスホイールの動きで 並べられたCDジャケット（画像要素）がパタパタ流れるように切り替わります。 実装は少々複雑になってしまいそうですが、 画像要素のみならず、テキストベースのリストと連動
Googleのベストプラクティスに沿ったモダンな製作の出発点「Web Starter Kit」
Web Starter Kitで用意されている各種の設定ファイルなどは、そのまま使うのではなく、各自が自分のスタイルに合わせてカスタマイズするとよいでしょう。ファビコンやスマートフォンでサイトをホーム画面に追加した際に表示されるアイコンなど、各自で差し替える必要があります。 humans.txtやrobots.txtなども使用する場合には適宜編集する必要があります。 動作環境の構築 Web Starter Kitに用意されたツールを使用するためには、以下の言語の環境が必要となります。 Node.js (v0.10.x以上) Ruby (1.8.7以上) これに加えて、以下のツールのインストールが必要になります。 Nore.js上で動くタスクランナーのgulp (3.5.x以上) Sassのコンパイルを行うRubyのgem (3.3.x以上) それぞれのインストール方法について、簡単に紹介し
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Material Design Ripple Effects with Wave.js | CSS Script