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. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  2. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  3. formBuilder

    JavaScript

    ドラッグ&ドロップでフォームを手軽につくれる「formBuilder」

    formBuilderはドラッグ&ドロップでフォームを手軽につくること…

  4. Textualizer

    JavaScript

    テキストに様々なエフェクトを与えながら切り替わっていくjQueryプラグイン「Textualizer…

    フェードやスライドといった様々なエフェクトをテキストに与えながら切り替…

  5. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  6. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP