JSに関するooiooiooi0313のブックマーク (9)

  • [JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js

    demo: pie menu アイコンをクリック(タップ)すると、バウンドしながらパイ状に広がります。省スペース用のシェアボタンとかにしてもよさそうです。 wheelnav.jsの使い方 Step 1: 外部ファイル 当スクリプトとRaphaël.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="js/required/raphael.min.js"></script> <script type="text/javascript" src="js/required/raphael.icons.js"></script> <script type="text/javascript" src="js/dist/wheelnav.js"></script> </head> Step 2: HTML ナビゲーションを

    [JS]SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js
    ooiooiooi0313
    ooiooiooi0313 2015/02/24
    SVGを使ったアニメーションが楽しい、回転する新感覚のナビゲーションを実装するスクリプト -wheelnav.js ピザのように切り分けたパイ状のナビゲーション、水平でも垂直でもない回転を取り入れたタブ、アイコンをクリック
  • [JS]これ、いい!サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js

    デモページ:Sections デモでは他にもグラデーションを使ったGradient、進む時に光るFlashなどが用意されています。 デモページ:Default デモページ:Gradient デモページ:Sections デモページ:Flash Fort.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <head> ... <script src="fort.min.js"></script> <link rel="stylesheet" href="fort.min.css"> </head> Step 2: HTML バーを表示するdivをセットします。 <body> <div class="top"> <div class="colors"></div> </div> Step 3: JavaScript 適用するエフェクトを指

    ooiooiooi0313
    ooiooiooi0313 2014/06/02
    これ、いい!サイトのデザインを損なわずにフォームの進捗を美しく表示するスクリプト -Fort.js ユーザーがフォームに入力する際、その進捗をアニメーションで美しく表示するjQuery不要の単体で動作するスクリプトを紹介
  • [JS]ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll

    ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。 Infinite Scroll 一番最初にリリースされたのはかなり前ですが、いつの間にか2.0にバージョンアップされていたのでご紹介。 Infinite Scrollのデモ Infinite Scroll -jQueryのプラグイン Infinite Scroll -WordPressのプラグイン Infinite Scrollのデモ デモはテキストだけのページです。 ページ下部の「more」をクリック Infinite Scroll -jQueryのプラグイン Infinite Scroll -jQueryのプラグイン Infinite Scrollの使い方 Infinite Scrollの実装は簡単です。 まずは、外部ファイルをセットします。 <sc

    ooiooiooi0313
    ooiooiooi0313 2014/03/24
    ウェブページやWordPressのページを無限スクロールさせるスクリプト -Infinite Scroll ウェブページをPinterestのように無限スクロールさせるjQueryのプラグイン、アンドWordPressのプラグインを紹介します。 一番最初にリリースされ
  • [JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js

    ウェブページで日語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上:カーニング無し、下:カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上:カーニング無し、下:カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j

    ooiooiooi0313
    ooiooiooi0313 2014/03/08
    日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 Tag
  • [JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit

    サイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもできるjQueryのプラグインを紹介します。 ImageFit ImageFit -GitHub ImageFitのデモ ImageFitの使い方 ImageFitのデモ デモはサイズがバラバラな画像が6枚、それぞれ同じサイズの矩形に配置します。 下のキャプチャは同じサイズの画像のように見えますが、既にトリミングして配置された状態です。

    ooiooiooi0313
    ooiooiooi0313 2014/01/17
    サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFit サイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもで
  • [JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js

    スクロールベースのページを実装する時にぴったり! ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト

    ooiooiooi0313
    ooiooiooi0313 2013/12/11
    ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js スクロールベースのページを実装する時にぴったり! ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介
  • [JS]コンテンツを効果的にナビゲートするjQueryのプラグインのまとめ

    スマフォ・タブレットでよく見かける三線のナビゲーションをはじめ、コンテンツをスライドしてかっこいいアニメーションで表示されるサイドバー、1ページで構成されたサイト用のナビゲーションなど、あなたの大切なコンテンツを効果的にナビゲートするjQueryのプラグインを紹介します。

    ooiooiooi0313
    ooiooiooi0313 2013/11/01
    コンテンツを効果的にナビゲートするjQueryのプラグインのまとめ Tags: via Pocket November 01, 2013 at 03:18PM
  • [JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll

    スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。 こういうちょっとしたエフェクトって、楽しいですね。 デモページ デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 引っ張り上げる各エレメントにclassを付与し、それらを内包する

    ooiooiooi0313
    ooiooiooi0313 2013/10/23
    スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQu
  • [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

    ooiooiooi0313
    ooiooiooi0313 2013/08/20
    サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale サイズが不明な画像を指定したエリアにアスペクト比を維持したまま、縮小させてフィットさせて配置したり、上下左右寄
  • 1