Jquery jCornerを使って紙の角を折ったようなエフェクトをかける

作成日 2020.07.30
更新日 2020.07.31
jquery
jquery

JqueryのライブラリjCornerを使って紙の角を折ったようなエフェクトをかけるまでのサンプルコードを記述してます。

1. 環境
2. jCornerダウンロード
3. jCornerの使い方

環境

OS windows10 pro 64bit
Apache 2.4.43

※windows10にApacheのインストールはこちら

jCornerダウンロード

こちらのサイトよりダウンロード可能です。

jCornerの使い方

ダウンロードした「jCorner.js」を作成するhtmlと同一階層におきます。

下記の内容で適当なhtmlファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="jCorner.js" type="text/javascript"></script>
</head>
<style>
  .paper {
    width: 120px;
    margin-right: 20px;
    padding: 50px;
    float: left;
    text-align: center;
    position: relative;
    margin-right: 2.5%;
    min-width: 100px;
    margin-bottom: 10px;
  }
  .j {
    background-color: #11A7FC;
  }
  .c {
    background-color: #95D127;
  }
  .o {
    background-color: #fff000;
  }
  .n {
    background-color: #FF8638;
  }
  .e {
    background-color: #EE3551;
  }
  .r {
    background-color: #B544EE;
  }
  </style>  
<body>
  <div class="paper j">j</div>
  <div class="paper c">c</div>
  <div class="paper o">o</div>
  <div class="paper n">n</div>
  <div class="paper e">e</div>
  <div class="paper r">r</div>
<script>
  $(document).ready(function(){
    $('.paper').jCorner({
      background: 'black',
      size: 25
    });
  });

</script>
</body>
</html>

紙の角を折ったようなエフェクトがかかっていることが確認できます。