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. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  2. Simple Sidebar
  3. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  4. Choice.js
  5. NO IMAGE

    JavaScript

    レスポンシブ対応のスタイリッシュなスライドショー実装「offbeatSlider」

    offbeatSliderはレスポンシブに対応したアニメーション付きの…

  6. Wallpaper

    JavaScript

    背景画像のレイアウトをブラウザ幅に合わせてくれるjQueryプラグイン「Wallpaper」

    WallpaperというjQueryプラグインを使えば背景画像のレイア…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP