【5秒間の混乱】JavaScriptでブラウザを上下反対の世界に変えるエイプリルフール・スクリプトを解説する

エイプリルフールといえば、ちょっとした遊び心が許される日

今回は、Webサイトを訪れたユーザーを一瞬だけ「えっ、自分の目が狂った？」と思わせるような、JavaScriptによる画面反転ギミックを解説します。

このコード解説

このコードは、「4月1日にサイトを閲覧した際、ページ全体を5秒間だけ左右反転させる」という即時実行関数（IIFE）です。

aprilfool.js

(function() {
    const now = new Date();
    // 4月1日判定 (JavaScriptのMonthは0から始まるため 3 = 4月)
    if (now.getMonth() === 3 && now.getDate() === 1) {
        const target = document.documentElement.style;
        const ORIGINAL_TRANSITION = target.transition;
        const REVERT_MS = 5000;

        // 反転実行
        target.transition = 'transform 0.5s ease';
        target.transform = 'scaleX(-1)';

        // 5秒後に復元
        setTimeout(() => {
            target.transform = 'scaleX(1)';
            // アニメーション完了後にスタイルをクリーンアップ
            setTimeout(() => {
                target.transition = ORIGINAL_TRANSITION;
            }, 500);
        }, REVERT_MS);
    }
})();