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'
    });
});

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

フリップ

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

アイステクスチャ25のアイス(氷)テクスチャの素材がとてもカッコイイ前のページ

パノラマビューを実装できるjQueryプラグイン「jQuery Panorama Viewer」次のページjQuery Panorama Viewer

関連記事

  1. jQuery Panelize Plugin
  2. Simply Modal Box
  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryで要素を挿入できるメソッドがたくさんあるので整理してみた

    jQueryでHTML要素を追加するメソッドが色々あるので整理するため…

  4. KGallery

    JavaScript

    縦や横に配置されたサムネイルから画像を選択できるjQueryの画像ギャラリー「KGallery」

    縦や横に配置されたサムネイルから画像を選択することができるjQuery…

  5. Turntable.js

    JavaScript

    画像を使ってストップモーション動画のような効果を実装できる「Turntable.js」

    Turntable.jsは複数の画像を使ってストップモーション動画のよ…

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP