自動に削れるスクラッチ風文字が浮かび上がってくるデザイン

2025年2月27日

スクラッチ風に擦ると文字が浮かび上がってくるデザインの改良版です。
本コードでは要素が見えたら自動的にスクラッチが削れて見えるようにしております。

文字が見える！

JavaScriptコードdocument.addEventListener('DOMContentLoaded', () => {
  // 初期設定
  const canvas = document.getElementById("mask");
  const ctx = canvas.getContext("2d");
  const container = document.getElementById("container");
 
  // キャンバスのサイズをコンテナに合わせる
  canvas.width = container.offsetWidth;
  canvas.height = container.offsetHeight;
 
  // キャンバスを黒で塗りつぶし
  ctx.fillStyle = "#959595";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
 
  // 削る範囲（1回のスクラッチ幅）
  const size = 35;  // 円形で削るため小さめに
 
  // 初期位置設定（画面左端からスタート）
  let x = 0;  // 左端から開始
  let y = canvas.height / 2;  // 画面中央からスタート
  let dx = 1.5;  // 横方向の移動速度
  let dy = -1.5;  // 縦方向の移動速度
 
  // 中央付近を削る範囲を設定
  const centralRange = 10; // 上下10pxの範囲で動かす
 
  // スムーズに動かすための変数
  let speed = 10;  // 動きの速さ（速すぎず遅すぎず）
 
  // 方向変更のフラグ
  let movingUp = true;
 
  // アニメーションの実行フラグ
  let isAnimating = false;
 
  // 自動スクラッチ削りの処理
  function animate() {
    // 背景を削る（透明化）
    ctx.globalCompositeOperation = "destination-out";
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2, false);  // 円形で削る
    ctx.fill();
 
    // 右に進みながら斜め上/下に動く
    x += dx;
    y += dy;
 
    // 上下の範囲を制限する
    let offset = Math.random() * 10;
    if (y <= canvas.height / 2 - centralRange) {
      y = canvas.height / 2 - centralRange - offset;  // 上限に達したら中央付近で止める
      movingUp = false;  // 下方向に切り替える
    } else if (y >= canvas.height / 2 + centralRange) {
      y = canvas.height / 2 + centralRange + offset;  // 下限に達したら中央付近で止める
      movingUp = true;  // 上方向に切り替える
    }
 
    // movingUp フラグに基づいて dy を決定
    if (movingUp) {
      dy = -1.5;  // 上方向
    } else {
      dy = 1.5;  // 下方向
    }
 
    // アニメーションを再帰的に呼び出す
    if (isAnimating) {
      setTimeout(animate, speed);  // 指定した速度で動く
    }
  }
 
  // IntersectionObserverの設定
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // キャンバスが表示されたらアニメーション開始
        isAnimating = true;
        animate();  // アニメーション開始
        observer.disconnect();  // 監視停止
      }
    });
  }, { threshold: 0.5 }); // 要素が50%表示されたら
 
  // キャンバスがビューポートに表示されたらアニメーションを開始
  observer.observe(canvas);
});

JavaScriptコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85	`document.addEventListener('DOMContentLoaded', () => {` `// 初期設定` `const canvas = document.getElementById("mask");` `const ctx = canvas.getContext("2d");` `const container = document.getElementById("container");` `// キャンバスのサイズをコンテナに合わせる` `canvas.width = container.offsetWidth;` `canvas.height = container.offsetHeight;` `// キャンバスを黒で塗りつぶし` `ctx.fillStyle =` `"#959595";` `ctx.fillRect(0, 0, canvas.width, canvas.height);` `// 削る範囲（1回のスクラッチ幅）` `const size = 35;` `// 円形で削るため小さめに` `// 初期位置設定（画面左端からスタート）` `let` `x = 0;` `// 左端から開始` `let` `y = canvas.height / 2;` `// 画面中央からスタート` `let` `dx = 1.5;` `// 横方向の移動速度` `let` `dy = -1.5;` `// 縦方向の移動速度` `// 中央付近を削る範囲を設定` `const centralRange = 10;` `// 上下10pxの範囲で動かす` `// スムーズに動かすための変数` `let` `speed = 10;` `// 動きの速さ（速すぎず遅すぎず）` `// 方向変更のフラグ` `let` `movingUp =` `true;` `// アニメーションの実行フラグ` `let` `isAnimating =` `false;` `// 自動スクラッチ削りの処理` `function` `animate() {` `// 背景を削る（透明化）` `ctx.globalCompositeOperation =` `"destination-out";` `ctx.beginPath();` `ctx.arc(x, y, size, 0, Math.PI * 2,` `false);` `// 円形で削る` `ctx.fill();` `// 右に進みながら斜め上/下に動く` `x += dx;` `y += dy;` `// 上下の範囲を制限する` `let` `offset = Math.random() * 10;` `if` `(y <= canvas.height / 2 - centralRange) {` `y = canvas.height / 2 - centralRange - offset;` `// 上限に達したら中央付近で止める` `movingUp =` `false;` `// 下方向に切り替える` `}` `else` `if` `(y >= canvas.height / 2 + centralRange) {` `y = canvas.height / 2 + centralRange + offset;` `// 下限に達したら中央付近で止める` `movingUp =` `true;` `// 上方向に切り替える` `}` `// movingUp フラグに基づいて dy を決定` `if` `(movingUp) {` `dy = -1.5;` `// 上方向` `}` `else` `{` `dy = 1.5;` `// 下方向` `}` `// アニメーションを再帰的に呼び出す` `if` `(isAnimating) {` `setTimeout(animate, speed);` `// 指定した速度で動く` `}` `}` `// IntersectionObserverの設定` `const observer =` `new` `IntersectionObserver(entries => {` `entries.forEach(entry => {` `if` `(entry.isIntersecting) {` `// キャンバスが表示されたらアニメーション開始` `isAnimating =` `true;` `animate();` `// アニメーション開始` `observer.disconnect();` `// 監視停止` `}` `});` `}, { threshold: 0.5 });` `// 要素が50%表示されたら` `// キャンバスがビューポートに表示されたらアニメーションを開始` `observer.observe(canvas);` `});`

HTMLコード<div id="container">
  <div style="z-index: 1; position: relative;">文字が見える！</div>
  <canvas id="mask"></canvas>
</div>

HTMLコード
1 2 3 4	`<div id="container">` `<div style="z-index: 1; position: relative;">文字が見える！</div>` `<canvas id="mask"></canvas>` `</div>`

CSSコード#container {
    position: relative;
    width: 50%;
    height: 200px;
    font-size: 4.0rem;
    font-weight: 900;
    text-align: center;
    color: #000000;
    background: #FFFFFF;
    overflow: hidden;
    user-select: none;
     
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
 
#mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

CSSコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26	`#container {` `position:` `relative;` `width:` `50%;` `height:` `200px;` `font-size:` `4.0rem;` `font-weight:` `900;` `text-align:` `center;` `color:` `#000000;` `background:` `#FFFFFF;` `overflow:` `hidden;` `user-select:` `none;` `display:` `flex;` `justify-content:` `center;` `align-items:` `center;` `margin:` `0` `auto;` `}` `#mask {` `position:` `absolute;` `top:` `0;` `left:` `0;` `width:` `100%;` `height:` `100%;` `z-index:` `2;` `}`

comment コメントをキャンセル

: 【第4回】何度もくり返したい！PHPの「繰り返し（ループ）」入門

chatGPTに記事を書いてもらってますプログラムでは、同じ処理を何度も繰り返したいことがよくあります。そんなときに使うのが「ループ文」と呼ばれるものです！ PHPでよく使うループ文は、主に以 ...

HTML PHP

: JavaScriptとは？初心者向けガイド

JavaScriptは、Webページに動的な機能を追加するために使われるプログラミング言語です。この記事では、JavaScriptの基礎について順を追って解説していきます JavaScriptとは？ ...

HTML JavaScript

: 「初心者大歓迎！HTMLを使ってWebページを作ってみよう」のまとめ

ここまで、初心者向けにHTMLとCSSの基本的な使い方を学んできました。これで、Webページ作成の第一歩を踏み出したことになります。もう終わり？と感じる方もおられると思います。まだ説明してない部分 ...

HTML

: アフィンガー6でファビコンを入れる方法

アフィンガー6でファビコンを入れる方法です。なにかアフィンガー側で設定する箇所があるのかと思いましたがなさそうなので普通に入れます。「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン ...

AFFINGER HTML

: 【第6回】ユーザーの入力を受け取ろう！はじめての「フォーム連携」

chatGPTに記事を書いてもらってます Webサイトでは、ユーザーに入力してもらうことがよくありますよね。名前やメールアドレスを入れてもらったり、検索したり… そのときに使うのがフォーム（for ...

HTML PHP

スクラッチ風に擦ると文字が浮かび上がってくるデザイン

【失敗談】某発毛剤を5か月運用した結果なにも変わらなかった件

自動に削れるスクラッチ風文字が浮かび上がってくるデザイン

クラシックエディタ用のプラグインを作ってみた

クラシックエディタでコード入力をするボタンを追加するプラグインを作ってみた

Amazon納品代行 FBA商品ラベルにJANコード下4桁を入れるアプリ(簡易版)を作ってみた