jCorner

JavaScript

フラットデザインに合う紙をめくったエフェクトを実装できるjQueryプラグイン「jCorner」

jCornerというjQueryプラグインを使ってみました。フラットデザインに合わせて、紙をペラッとめくったようなエフェクトを簡単に実装することができます。使い方もシンプルだし、わざわざ画像を用いることもないのでとても手軽です。フラットデザインにしてみたけど、何か物足りないと思っている方は使ってみてはいかがでしょうか。

[ads_center]

jCornerの使い方

実際に使ってみると、こんな感じで簡単に紙をめくった様なエフェクトを実装できます。

jCorner

使い方は、まずhead内にjQuery本体とプラグインファイルを読み込みます。

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="jCorner.js"></script>

続いてHTMLで以下を記述します。

<div id="paper"></div>

予めCSSで背景などを指定しておきます。僕が試した例だと以下のような感じです。

div {
    width: 300px;
    height: 300px;
    background: blue;
}

あとはjCornerを呼び出してあげればOKです。オプションでsizeやbackgroundを指定することもできます。

$(function() {
    $('#paper').jCorner({
        size: 50,
        background: 'black'
    });
});

jCorner

関連記事

  1. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  2. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  3. JavaScript

    ナビゲーションをレスポンシブデザインにしてくれるjQueryプラグイン「HorizontalNav」…

    覚えておくと便利そうだったのでメモがてらエントリーします。リスト化した…

  4. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  5. EasyLoading

    JavaScript

    ローディングアニメーションを手軽に実装できる「EasyLoading」

    EasyLoadingは、ローディングアニメーションを手軽に実装するこ…

  6. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP