『やりたいことを自分らしく』
ダンスエンタメ事業と映像制作事業であなたの思いを実現する。
二つのサービスを提供する宮崎を拠点とする企業です。



/* ▼▼▼ この下から全てコピーして、既存のJSと差し替えてください ▼▼▼ */
<script>
/* ▼▼▼ この下から全てコピーして、既存のJSと差し替えてください ▼▼▼ */

(function() {
    "use strict";

    const INITIAL_ANIMATION_DELAY = 50; // ms
    const OBSERVER_THRESHOLD = 0.2; // 20%
    const VIDEO_FADEIN_DELAY = 1500; // 動画をフェードインさせるまでの時間(ms)

    /**
     * 背景YouTube iframeのサイズを調整する
     */
    function setupVideoResizing() {
        const videoIframe = document.getElementById('background-video-iframe');
        if (!videoIframe) return;

        const resizeVideo = () => {
            const viewportWidth = window.innerWidth;
            const viewportHeight = window.innerHeight;
            const targetRatio = 16 / 9;
            const viewportRatio = viewportWidth / viewportHeight;

            let newWidth, newHeight;
            if (viewportRatio > targetRatio) {
                newWidth = viewportWidth;
                newHeight = viewportWidth / targetRatio;
            } else {
                newHeight = viewportHeight;
                newWidth = viewportHeight * targetRatio;
            }
            videoIframe.style.width = `${newWidth}px`;
            videoIframe.style.height = `${newHeight}px`;
        };

        resizeVideo();
        window.addEventListener('resize', resizeVideo);
    }

    /**
     * ファーストビューのテキストアニメーションを実行する
     */
    function initFirstViewAnimation() {
        const visionContent = document.querySelector('.vision-content');
        if (!visionContent) return;
        
        const visionItems = visionContent.querySelectorAll('.fade-in-item');
        const delayMap = [0.25, 0.35, 0.50, 0.65];

        setTimeout(() => {
            document.body.classList.remove('is-loading');

            visionItems.forEach((item, index) => {
                const delay = delayMap[index] || (0.25 + (index * 0.1));
                item.style.transitionDelay = `${delay}s`;
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
            });
        }, INITIAL_ANIMATION_DELAY);
    }

    /**
     * カードセクションのスクロールアニメーションを設定する
     */
    function initScrollAnimations() {
        const target = document.getElementById('service-cards');
        if (!target) return;

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                entry.target.classList.toggle('is-visible', entry.isIntersecting);
            });
        }, {
            threshold: OBSERVER_THRESHOLD
        });

        observer.observe(target);
    }

    /**
     * 動画プレイヤーを遅れてフェードインさせる
     */
    function initVideoFadeIn() {
        const videoIframe = document.getElementById('background-video-iframe');
        if (!videoIframe) return;

        setTimeout(() => {
            videoIframe.classList.add('is-loaded');
        }, VIDEO_FADEIN_DELAY);
    }

    /**
     * 【NEW】カードの接近に応じてビジョンコンテンツをフェードさせる関数
     */
    function setupContentFadeOnScroll() {
        const visionContent = document.querySelector('.vision-content');
        const serviceCards = document.getElementById('service-cards');
        if (!visionContent || !serviceCards) return;

        const observerOptions = {
            root: null, // ビューポートを基準にする
            // 画面の下側50%を監視エリアから除外（＝画面の上半分に達したら検知）
            rootMargin: '0px 0px -50% 0px',
            threshold: 0
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                // isIntersectingがtrue = カードが画面の上半分に入ってきた
                // isIntersectingがfalse = カードが画面の上半分から出ていった
                visionContent.classList.toggle('is-obscured', entry.isIntersecting);
            });
        }, observerOptions);

        observer.observe(serviceCards);
    }


    // DOMの読み込みが完了したら、全ての初期化処理を実行
    document.addEventListener('DOMContentLoaded', () => {
        setupVideoResizing();
        initFirstViewAnimation();
        initScrollAnimations();
        initVideoFadeIn();
        setupContentFadeOnScroll(); // ← この一行を追加
    });

})();
</script>

The Sea House

ダンスコミュニティ運営、写真撮影・映像制作事業を手掛けるThe Sea Houseのトップページです

Sea House LAB