チェックボックスにアニメーション

2021・06・05

＊チェックの付け外しにアニメーションがついた、オリジナルチェックボックスです！＊

普通のチェックボックス（HTMLのinputタグ）を使うと、ブラウザで決められた既定のチェックボックスになってしまい、自由自在なカスタマイズはできません。
そこで、既定のチェックボックスはCSSで隠しつつ、オリジナルで作ったチェックボックスにチェックを入れたり外したりできる機能のサンプルを作ってみました！

inputタグはユーザーから見えないように隠しているだけなので、inputタグにチェックが入った情報はしっかり取得できます。

主な使用機能：HTML(canvas)・CSS・JavaScript

普通のチェックボックス

＊オリジナルチェックボックス＊

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

    <title></title>
    <style>
      .canvasbox {
        display: block;
        width: fit-content;
        margin: 0 auto;
        border: double thick;
        border-radius: 16px;
        box-shadow: 2px 2px 6px grey;
        transform-origin: bottom;
        transform: scale(.3);
        transition: all .5s;
      }
      .canvasbox.oncheck {
        background-color: lightyellow;
      }
      .canvasbox.nocheck {
        background-color: lightgrey;
      }
      .canvasbox:hover {
        border-color: darkred;
      }
      .hiddencheck {
        opacity: 0;
        position: absolute;
        width: 100px;
        height: 100px;
      }
      .checkinfo {
        text-align: center;
        margin: 1rem;
        font-family: "游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
        font-size: .8rem;
      }
      .noramlcheck {
        text-align: center;
        margin-top: 50px;
      }
      .noramlcheck input {
        transform: scale(2);
      }
      .noramlcheck p {
        font-family: "游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
        font-size: .8rem;
      }

    </style>
  </head>
  <body>
    <div class="noramlcheck">
      <input type="checkbox" name="" value="">
      <p class="normalchecinfo">普通のチェックボックス</p>
    </div>

      <div class="canvasbox nocheck">
        <input class="hiddencheck" type="checkbox" name="" value="check1">
        <canvas id="canvas" width="100" height="100"></canvas>
      </div>
      <p class="checkinfo"></p>

   <script type="text/javascript" defer>
     {

       const checkbox = document.querySelector('.canvasbox');

       checkbox.addEventListener('click', checkOn);

       function checkOn() {
         const checkbox = document.querySelector('.canvasbox');
         if (checkbox.classList.contains('nocheck')) {
           checkbox.classList.remove('nocheck');
           checkbox.classList.add('oncheck');

           checkbox.addEventListener('click', checkOff);

           start();

           async function start() {
             const canvas = document.getElementById('canvas');
             const context = canvas.getContext('2d');
             let line1 =0;
             let line2 =0;
            
             context.strokeStyle = 'red';
             context.lineWidth = 9;
             context.lineJoin = 'square';
             context.lineCap = 'round';

               context.beginPath();
               context.moveTo(25,55);
               lineWidth1 = 10;
               line1 = 25;
               line2 = 55;
             await new Promise((resolve) =>{
               const intId1 = setInterval( () => {
                 line1 += 1;
                 line2 += 1;
                 context.lineTo(line1,line2);
                 context.stroke();
                 if (line1 > 50) {
                   clearInterval(intId1);
                   resolve();
                   }
                 },5);
               });

               await new Promise((resolve) =>{
                 const intId2 = setInterval( () => {
                   line1 += 1;
                   line2 += -2;
                   context.lineTo(line1,line2);
                   context.stroke();
                   if (line2 < 20) {
                     clearInterval(intId2);
                     resolve();
                     }
                   },5);
                 });

           }
         }
          checkbox.removeEventListener('click',checkOn);
      }

      function checkOff() {
        const checkbox = document.querySelector('.canvasbox');
        if (!checkbox.classList.contains('nocheck')) {
          checkbox.addEventListener('click',checkOn);

          checkbox.classList.add('nocheck');
          const canvas = document.getElementById('canvas');
          const context = canvas.getContext('2d');
          let clearlLine = 0;
          const Intid3 = setInterval( ()=> {
            clearlLine += 5;
            context.clearRect(0,0,clearlLine,100);
            if (clearlLine == 100) {
              clearInterval(Intid3);
            }
          },20);

        }

      }

    const hiddencheck = document.querySelector('.hiddencheck');
    const checkinfo = document.querySelector('.checkinfo');
    checkinfo.textContent = '未チェック状態です';
    hiddencheck.addEventListener('change', () => {
    if (hiddencheck.checked) {
      checkinfo.textContent = 'チェックされています';
    }
    else {
      checkinfo.textContent = '未チェック状態です';
    }
  });

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

« 前の記事へ次の記事へ »