生成AI+スマホで作成「WordPress(ブログ)で使えるJavaScript」 斬撃「一閃」

<div class="slash-wrapper">
    <div class="slash-container" id="slashTarget">
        <div class="layer revealed-text">REVEALED</div>
        <div class="layer front-text top-slice">SLASHED</div>
        <div class="layer front-text bottom-slice">SLASHED</div>
    </div>
</div>

const container = document.getElementById('slashTarget');
const line = document.createElement('div');
line.classList.add('slash-line');
container.appendChild(line);

container.addEventListener('mouseenter', () => {
    // 1. まず光線を走らせる (超高速)
    const lineAnim = line.animate([
        { transform: 'translateY(-50%) rotate(0deg) scaleX(0)', opacity: 0, left: '-20%' },
        { transform: 'translateY(-50%) rotate(0deg) scaleX(1)', opacity: 1, offset: 0.1 },
        { transform: 'translateY(-50%) rotate(0deg) scaleX(1)', opacity: 1, offset: 0.4 },
        { transform:
'translateY(-50%) rotate(0deg) scaleX(0)', opacity: 0, left: '120%' }
    ], {
        duration: 250, // 速度を速く
        easing: 'ease-out'
    });

    // 2. 光線が走り始めてすぐに文字を割る (50ms〜100ms程度のディレイ)
    setTimeout(() => {
        container.classList.add('is-sliced');
    }, 80); 
});

container.addEventListener('mouseleave', () => {
    // マウスが離れたらリセット
    container.classList.remove('is-sliced');
});

    .slash-wrapper {
        display: block;
        text-align: center;
        padding: 40px 0;
        background-color: #000;
        overflow: hidden;
    }

    .slash-container {
        position: relative;
        display: inline-block;
        width: 300px;
        height: 50px;
        font-family: 'Arial Black', sans-serif;
        font-size: 40px;
        line-height: 60px;
        cursor: pointer;
    }

    .layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        text-align: center;
    }

    .revealed-text { color: #ff8c00; text-shadow: 0 0 20px #ff4500; z-index: 1; opacity: 0; transition: opacity 0.2s; }
    .front-text { color: #fff; background-color: #000; z-index: 3; transition: all 0.3s cubic-bezier(0.15, 0.85, 0.35, 1.2); }
    
    .top-slice { clip-path: inset(0 0 50% 0); }
    .bottom-slice { clip-path: inset(50% 0 0 0); }

    /* JSで付与されるクラスによるアニメーション */
    .slash-container.is-sliced .top-slice { transform: translateY(-30px) rotate(0deg); }
    .slash-container.is-sliced .bottom-slice { transform: translateY(35px) rotate(0deg); }
    .slash-container.is-sliced .revealed-text { opacity: 1; transform: scale(1.1); }

    .slash-line {
        position: absolute;
        top: 50%;
        left: -20%;
        width: 140%;
        height: 2px; /* 細く鋭い切れ味 */
        background: white;
        box-shadow: 0 0 20px 3px #fff, 0 0 40px 6px #ff8c00;
        z-index: 4;
        pointer-events: none;
        transform: translateY(-50%) rotate(0deg) scaleX(0);
        transform-origin: left;
        opacity: 0;
    }