scroll/index.html at main · basedlsg/scroll · GitHub

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Video Player</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #videoContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        #scrollVideo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .controls {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: rgba(0,0,0,0.5);
            color: white;
            padding: 5px;
            font-family: Arial, sans-serif;
            font-size: 12px;
            display: none; /* Hidden by default */
        }
    </style>
</head>
<body>
    <div id="videoContainer">
        <video id="scrollVideo" muted playsinline preload="auto">
            <!-- Video source will be set by JavaScript -->
        </video>
    </div>

    <div class="controls" id="debugControls">
        Scroll: <span id="scrollPercent">0%</span> |
        Video: <span id="videoTime">0.0</span>/<span id="videoDuration">0.0</span>
    </div>

    <script>
        (function() {
            // Configuration (these will be replaced with URL parameters)
            let config = {
                videoUrl: 'https://example.com/your-video.mp4', // Default, will be overridden
                scrollMultiplier: 5,                            // How many viewport heights to scroll
                showDebug: false,                               // Show debug controls
                smoothing: 0.05                                 // Smoothing factor (0-1)
            };

            // Parse URL parameters
            const params = new URLSearchParams(window.location.search);
            if (params.has('video')) config.videoUrl = decodeURIComponent(params.get('video'));
            if (params.has('multiplier')) config.scrollMultiplier = parseFloat(params.get('multiplier'));
            if (params.has('debug')) config.showDebug = params.get('debug') === 'true';
            if (params.has('smooth')) config.smoothing = parseFloat(params.get('smooth'));

            // Elements
            const video = document.getElementById('scrollVideo');
            const scrollPercentEl = document.getElementById('scrollPercent');
            const videoTimeEl = document.getElementById('videoTime');
            const videoDurationEl = document.getElementById('videoDuration');
            const debugControls = document.getElementById('debugControls');

            // Show debug controls if enabled
            if (config.showDebug) {
                debugControls.style.display = 'block';
            }

            // Set video source
            video.innerHTML = `<source src="${config.videoUrl}" type="video/mp4">`;

            // Variables for animation
            let targetTime = 0;
            let currentTime = 0;
            let videoDuration = 0;

            // Set up communication with parent window
            window.addEventListener('message', function(event) {
                if (event.data && event.data.type === 'scroll') {
                    // Calculate target time based on scroll percentage
                    const scrollPercent = event.data.percent;
                    targetTime = videoDuration * scrollPercent;

                    // Update debug display
                    if (config.showDebug) {
                        scrollPercentEl.textContent = Math.round(scrollPercent * 100) + '%';
                    }
                }
            });

            // Wait for video to load
            video.addEventListener('loadedmetadata', function() {
                videoDuration = video.duration;

                // Update debug info
                if (config.showDebug) {
                    videoDurationEl.textContent = videoDuration.toFixed(1);
                }

                // Let parent know video is ready and send its duration
                window.parent.postMessage({
                    type: 'videoReady',
                    duration: videoDuration
                }, '*');

                // Start animation loop
                requestAnimationFrame(updateVideo);
            });

            // iOS compatibility - needs user interaction
            document.addEventListener('touchstart', function() {
                video.play();
                video.pause();
            }, {once: true});

            // Animation loop for smooth video time updates
            function updateVideo() {
                // Smooth lerp to target time
                currentTime += (targetTime - currentTime) * config.smoothing;

                // Update video time if changed enough
                if (Math.abs(video.currentTime - currentTime) > 0.01) {
                    try {
                        video.currentTime = currentTime;

                        // Update debug info
                        if (config.showDebug) {
                            videoTimeEl.textContent = currentTime.toFixed(1);
                        }
                    } catch (e) {
                        console.error('Error updating video time:', e);
                    }
                }

                // Continue animation
                requestAnimationFrame(updateVideo);
            }

            // Tell parent window we're ready
            window.parent.postMessage({
                type: 'iframeReady',
                multiplier: config.scrollMultiplier
            }, '*');
        })();
    </script>
</body>
</html>