jQuery Flip-Quote

JavaScript

文章内で引用したい部分をフリップさせるjQueryプラグイン「jQuery Flip-Quote」

jQuery Flip-QuoteというjQueryプラグインを使ってみたらすごくおもしろかったのでご紹介します。jQuery Flip-QuoteはWebサイトの文章内で引用したい部分をフリップして注目させることができるjQueryプラグインです。特定の文字を強調させたい時なんかによさそうです。

[ads_center]

jQuery Flip-Quoteの使い方

jQuery Flip-Quoteの使い方

Flip-Quote by Mark Serbol

スクロールしていき、jQuery Flip-Quoteを適用した目的の場所まで来ると自動でフリップします。

目的の場所に来ると自動でフリップ

使い方は、まずjQuery本体とダウンロードしたプラグインファイルを読み込みます。

<link href="jquery.flip-quote.css" rel="stylesheet"/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.flip-quote.js"></script>

HTMLは以下のように記述します。仕組みとしては、quoteというid名がついた場所のテキストがフリップに利用されます。実際にフリップされるのcontainerというid名がついた場所になります。

<p>サンプルテキストサンプルテキスト<q id="quote">フリップ</q>サンプルテキストサンプルテキスト</p>
<div id="container"></div>

最後にjQuery Flip-Quoteを呼び出してあげれば完了です。

$(function() {
    $('#quote').flipQuote({
        container: '#container'
    });
});

上記の例では「フリップ」と書かれた文字が適用されます。こんな感じです。

フリップ

また、オプションで背景色、フォントカラー、フォントサイズなんかもカスタマイズできます。文書内の文字にちょっとしたアクションをつけて目を魅かせたい時に使ってみたいですね。

関連記事

  1. Accordion.JS

    JavaScript

    クイックな開閉で使いやすいアコーディオン実装「Accordion.JS」

    Accordion.JSは、開閉の動作がクイックで使いやすいアコーディ…

  2. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  3. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  4. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  5. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

  6. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP