【コピペOK】ホラー演出をCSSとjsで作る【clientX】

// 怪文書のエリアからマウスカーソルが抜けた時にスポットライトを消す
kaibunsho.addEventListener('mouseleave', function (e) {
    kaibunsho.setAttribute(
        "style",
        `background-color:rgba(0,0,0,0.9); `
    );
})

// 怪文書エリアでマウスカーソルを動かすとスポットライトが動く
kaibunsho.addEventListener('mousemove', function (e) {
    const rect = this.getBoundingClientRect();
    // 要素の左上を原点(0,0)とした時のマウスカーソルの位置を設定
    const x = e.clientX - rect.left;// 要素の左端からのマウスカーソルのX座標
    const y = e.clientY - rect.top;// 要素の上端からのマウスカーソルのY座標
    // マウスカーソルの位置にスポットライトをあてるCSSスタイルの設定
    kaibunsho.setAttribute(
        "style",
        `background-image:
        radial-gradient(circle at ${x}px ${y}px, 
            #fff  0px, #fff 30px, transparent 100px)`
      );
});
        

javascript

const rect = this.getBoundingClientRect();
// 要素の左上を原点(0,0)とした時のマウスカーソルの位置を設定
const x = e.clientX - rect.left;// 要素の左端からのマウスカーソルのX座標
const y = e.clientY - rect.top;// 要素の上端からのマウスカーソルのY座標
          

clientX/Y でビューポート（ブラウザの表示エリア）の左上を原点(0,0)とした時のマウスカーソルの座標を返しています。

getBoundingClientRect()メソッドではビューポートの左上を原点(0,0)とした時の要素の位置を返しています。 つまり式を解読すると以下になります。

const x = e.clientX - rect.left;
→（要素の左端を座標 0 とした時のマウスカーソルの水平方向の座標） = （ビューボートでのマウスカーソルの水平方向の位置） – （ビューポートでの要素の左端の座標）

const y = e.clientY - rect.top;
→（要素の上端を座標 0 とした時のマウスカーソルの垂直方向の位置） = （マウスカーソルのビューボート内で垂直方向の位置） – （ビューポートでの要素の上端の座標）

javascript

kaibunsho.setAttribute(
    "style",
    `background-image:
        radial-gradient(circle at ${x}px ${y}px, 
            #fff  0px, #fff 30px, transparent 100px)`
);
      

コードを解読すると以下になります。

JavaScript

function startAnime() {
    // 追加するテキストを定義
    let text1 = ここにいるよ";
    let text2 = "ここにもいるよ";
    let text3 = "どこに行くの";
    let text4 = "終わらせない";
    let textArray = new Array(text1, text2, text3, text4)
    // テキストを設定した要素を追加する回数
    let textCount = 5;
    //テキストを挿入する要素の幅と高さを取得。あとでテキストの配置場所を指定する際に参照する。
    let kabe = document.querySelector(".kabe");
    let kabeHeight = kabe.offsetHeight;
    let kabeWidth = kabe.offsetWidth;
    //親要素にクラス名 play が付いてなければ処理をおこなう
    if (!kabe.classList.contains("play")) {
        emergeText();
    }
      

追加されるテキストと追加するテキスト数を設定。

またテキストが表示される領域の<div class="kabe"> の幅と高さを取得しておく。
これは後にテキストの配置場所を指定する際に参照する。

javascript

// テキストを含む新しく要素を作成しテキストを配置する処理
function emergeText() {
    --textCount;
    kabe.classList.add("play");
    // 新しくテキストを追加するために要素を作成
    let newElement = document.createElement("span")
    newElement.classList.add("appearText", "text")
    // textArray からランダムにテキストを選択後、テキスト内の一文字にspanタグをかける
    let originalText = textArray[Math.floor(Math.random() * textArray.length)];
    let rndIndex = Math.floor(Math.random() * originalText.length);
    let newText = originalText.replace(originalText[rndIndex], '<span class="big-font">' + originalText[rndIndex] + '</span>');
    newElement.innerHTML = newText;
    // 新規作成したテキストの配置場所をランダムに指定
    let rndPosY = Math.floor(Math.random() * kabeHeight);
    let rndPosX = Math.floor(Math.random() * kabeWidth);
    newElement.style.top = rndPosY + "px";
    newElement.style.left = rndPosX + "px";
    // 作成した要素を追加する
    kabe.appendChild(newElement);
    // 設定したテキスト数に達するまでテキスト作成の処理を実行する
    if (textCount == 0) {
        kabe.classList.remove("play");//なくなった場合は親要素のplayクラスを削除
    } else {
        setTimeout(function () { emergeText(); }, 500);	//0.5秒間隔でアニメーションをスタート
    }
}
  

テキストを追加するために新しく span 要素を作成し、クラス名、テキスト、配置位置を設定していく。

設定後に <div class="kabe"> に kabe.appendChild(newElement) で要素を挿入。

上記の span 要素作成し挿入する処理を textCount 回数分繰り返し行う。
setTimeout() メソッドで 0.5 秒間間隔で関数 emergeText を実行している。

JavaScript

function startAnime() {
// 追加するテキストを定義
let text1 = "ここにいるよ";
let text2 = "ここにもいるよ";
let text3 = "どこに行くの";
let text4 = "終わらせない";
let textArray = new Array(text1, text2, text3, text4)
⋮
function emergeText() {
    ⋮
    // 新しくテキストを追加するために要素を作成
    let newElement = document.createElement("span")
    newElement.classList.add("appearText", "text")
    // textArray からランダムにテキストを選択後、テキスト内の一文字にspanタグをかける
    let originalText = textArray[Math.floor(Math.random() * textArray.length)];
    let rndIndex = Math.floor(Math.random() * originalText.length);
    let newText = originalText.replace(originalText[rndIndex], '<span class="big-font">' + originalText[rndIndex] + '</span>');
    newElement.innerHTML = newText;
          

CSS

          .big-font {
            font-size: 2rem;
          }
        

startAnime 関数の最初の方で四個テキストを設定して、配列 textArray に格納しています。

抜粋した emergeText 関数のコードで以下を行なっています。
新しい span 要素の作成
新しい span 要素のクラスを appearText と text に指定
設定した四個のテキストからランダムに一個のテキストを選出し、テキストの中の一文字をランダムに選出し replaceメソッドで、<span class=”big-font”>[一文字のテキスト]</span>に置換

CSSプロパティの設定でクラス big-font が指定されている要素のフォントサイズを大きくしています。

innerHTML で作成した要素のテキストとして設定しています。

JavaScript

function startAnime() {
    ⋮
    //テキストを挿入する要素の幅と高さを取得。あとでテキストの配置場所を指定する際に参照する。
    let kabe = document.querySelector(".kabe");
    let kabeHeight = kabe.offsetHeight;
    let kabeWidth = kabe.offsetWidth;
    ⋮
    function emergeText() {
        ⋮
        // 新規作成したテキストの配置場所をランダムに指定
        let rndPosY = Math.floor(Math.random() * kabeHeight);
        let rndPosX = Math.floor(Math.random() * kabeWidth);
        newElement.style.top = rndPosY + "px";
        newElement.style.left = rndPosX + "px";
            

CSS

.kabe {
    width: 300px;
    height: 300px;
    ⋮
    position: relative;
    ⋮
.text {
    ⋮
    position: absolute;
            

変数 kabeHeight、kabeWidth に <div class=”kabe”> の高さ、幅を代入しています。

emergeText 関数の中で rndPosY、rndPosX に <div class="kabe"> の高さ、幅を上限とした整数を代入し、
新しく作成した要素 newElement のCSSプロパティ top、left に 数値が rndPos、 rndPosY の px を指定しています。

テキストを含む span 要素に position:absolute の親要素(<div class="kabe">)に position:relative を指定しているので、
span 要素が <div class="kabe"> 要素の左上を起点に、top、left で指定された位置に配置されます。

function startAnime() {
    ⋮
    // テキストを設定した要素を追加する回数
    let textCount = 5;
    ⋮
    // テキストを含む新しく要素を作成しテキストを配置する処理
    function emergeText() {
        --textCount;
        ⋮
        // 作成した要素を追加する
        kabe.appendChild(newElement);
        // 設定したテキスト数に達するまでテキスト作成の処理を実行する
        if (textCount == 0) {
            kabe.classList.remove("play");//なくなった場合は親要素のplayクラスを削除
        } else {
            setTimeout(function () { emergeText(); }, 500);	//0.5秒間隔でアニメーションをスタート
        }
    }
  }
      

変数 textCount にテキストを設定した要素を追加する回数を代入してます。

emergeText 関数を実行するたびに textCount をカウントダウンし、0 になるまで emergeText を呼び出しています。

emergeText 関数を呼び出す時は、setTimeout を使用して、0.5秒の間隔を置いています。
これでテキストが一つずつ時間を置いて現れるようになります。

CSS

.text {
    ⋮
    /* 要素にアニメーション text_anime_on を適用 */
    animation-name: text_anime_on;
    /* アニメーション完了まで5s */
    animation-duration: 5s;
    /* アニメーションの変化が最初ゆっくりで終了まで加速する */
    animation-timing-function: ease-in;
    /* keyframesで最後に設定された値を保持する */
    animation-fill-mode: forwards;
}
⋮
@keyframes text_anime_on {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
      

@keyframes でアニメーションの動きを指定しています。 5秒間かけて文字が透明(opacity: 0;)の状態から透明度を下げて表示されるように指定しています。