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

2020.07.30
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>

<!DOCTYPE html>

<head>

<title>mebeeサンプル</title>

</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>

$(document).ready(function(){

$('.paper').jCorner({

background: 'black',

size: 25

});

</script>

</body>

</html>

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

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

環境

jCornerダウンロード

jCornerの使い方

Rails6 cssフレームワークsemantic-uiを使用する手順 2020.07.30

windows10 通信容量を確認する方法 2020.07.30