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

Morphext複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」前のページ

画像からカラーパレットを作成してくれる「Colors Palette Generator」次のページColors Palette Generator

関連記事

  1. no-image

    JavaScript

    タッチフレンドリーでモバイルでも快適に動作する「simplelightbox」

    simplelightboxはレスポンシブ対応でタッチフレンドリーなl…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

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

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

  3. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  4. jQuery Navobile
  5. jQuery Responsive Tabs
  6. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP