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

    JavaScript

    jQuery UIのドラッグ機能にスイング効果を加えることができる「swingdrag」

    swingdragは、jQuery UIのドラッグ機能にスイング効果を…

  2. jquery.horizonScroll.js
  3. no-image

    JavaScript

    固定されたフローティングメニューを実装できる「jquery-dice-menu」

    jquery-dice-menuは、固定されたシンプルなフローティング…

  4. no-image
  5. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  6. Tikslus Carousel

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP