[B! JS] tsetgogoのブックマーク

[JS]これを待ってた！波紋のように広がる美しいエフェクトを簡単に実装できるスクリプト -Waves

Googleが提唱する新UX「Material Design」で採用されている波紋の美しいエフェクトを簡単に実装できるスクリプトを紹介します。ボタンでもアイコンでもパネル・画像でも簡単に波紋を適用でき、jQueryなど他のスクリプトは不要です。 Waves Waves -GitHub 「Material Design」が気になる方は、前の記事（「波紋」のアニメーションを実装するテクニック）で動画を紹介しているので参考にしてみてください。 Wavesのデモ Wavesの使い方 WavesのデモデモはChrome, Safari, Firefox, Operaなどのモダンブラウザ、IEは10+でご覧ください。以下、デモをアニメーションgifにしてみました。それぞれクリック・タップした地点を中心にエフェクトが波紋状に広がり、フェードで消えます。デモ：divのパネル、画像パネルや画像な

tsetgogo 2014/08/01

JS

リンク

[JS]画像を用意しなくていいから簡単！クリッカブルに対応した日本の都道府県の地図を表示するスクリプト -Japan Map

デモページ 2 Japan Mapの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="https://code.jquery.com/jquery-2.1.1.js"></script> <script src="jquery.japan-map.min.js"></script> </head> Step 2: HTML 日本地図を配置するdivをセットします。 <body> ... <div id="map-container"></div> ... </body> Step 3: JavaScript jQueryのセレクタで配置する場所を指定し、スクリプトを実行します。 <script> $(function(){ $("#map-container").japanMap({ on

tsetgogo 2014/05/28

JS

リンク

[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js

Demo: Basic div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。アドバンスではビューポートを上から100px狭く設定し、適用しています。 ※ベーシックにもスクロールするとこの機能が発動します。 Demo: Advanced isInViewport.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="jquery.min.js"></script> <script src="isInViewport.min.js"></script> </head> Step 2: HTML HTMLは特に意識する必要はありません、通常通り実装します。 <div> ...

tsetgogo 2014/04/29

JS

リンク

[JS]jQueryのプラグイン100選 -2013年総集編

今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連パララックススクロール関連スクロールで定位置関連その他スクロール操作・補助関連スクロールバー関連レスポンシブ関連エフェクト関連ナビゲーション関連レイアウト関連画像ギャラリー関連画像拡大・配置・キャプション関連コンテンツスライダー関連カルーセル関連アニメーション関連フォーム関連コンテンツのツアー関連テキスト関連

tsetgogo 2013/12/28

JS

リンク

[JS]多階層のナビゲーションを今風にサイドを利用して実装するスクリプト -MultiLevel Push Menu

MultiLevel Push Menuの使い方アイデアの元となっているのは、こちらのデモ。 MULTI-LEVEL PUSH MENU 実装はより簡単に、オプションも豊富に進化しています。 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="multilevelpushmenu.css" /> <script src="//ajax.google apis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.multilevelpushmenu.min.js></script> IE8をサポートする際は、Modernizrを加えます。 <script src="//oss.max

tsetgogo 2013/12/18

JS

リンク

[JS]普通のタブから便利な機能を備えたタブまで簡単に実装できるスクリプト -Tabslet

Custom event: タブの切替時の前後にイベントを設定します。 Tabsletの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="https://ajax.google apis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script type="text/javascript" src="javascripts/vendor/jquery.tabslet.min.js"></script> Step 2: HTML タブをul要素で、各コンテンツをdivで実装します。タブのアンカー（#tab-1）とコンテンツのid（tab-1）は対応するように設定します。ラッパーのclassに「tabs」を指定し、機能を選択

tsetgogo 2013/10/30

JS

リンク

[JS]シンプルなページ内スクロールから、ちょっと面白いスクロールまで簡単に実装できるスクリプト -Scrolld.js

Demo 3 一番目はdiv、二番目はネコの画像、下の方には表示幅に合わせてエフェクトが変わります。 Scrolld.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを</body>の上あたりに外部ファイルとして記述します。 <script src="//ajax.google apis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../demo/js/scrolld.min.js"></script> Step 2: JavaScript スクリプトのトリガーを外部ファイルの下に記述します。 <script type="text/javascript"> $("[id*='Btn']").stop(true).on('click',function(e){e.preventD

tsetgogo 2013/09/26

JS

リンク

[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale

画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c

tsetgogo 2013/09/12

サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale

JS

リンク

Webデザインフィード詳細 - [JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors | コリス

tsetgogo 2013/09/12

ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors | コリス

JS

リンク

数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス

実装は簡単です。既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>