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. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  2. Palette-js

    JavaScript

    美しいカラーパレッドを追加できる「Palette-js」

    Palette-jsは美しいカラーパレッドを手軽にプロジェクトに追加す…

  3. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  4. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  5. Solution for Long Drop Down Items

    JavaScript

    長いメニューもスクロールで表示できる「Solution for Long Drop Down Ite…

    長いドロップダウンメニューでもスクロール表示してくれるjQueryを活…

  6. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP