-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
143 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Scroll - Media - Interactive Information</title> | ||
| <style> | ||
| body { | ||
| margin: 0; | ||
| height: 1000vh; /* Make the page scrollable */ | ||
| background-color: black; | ||
| font-family: sans-serif; | ||
| } | ||
|
|
||
| .video-container { | ||
| position: fixed; | ||
| top: 50%; | ||
| left: 50%; | ||
| transform: translate(-50%, -50%); | ||
| width: 100%; | ||
| z-index: 0; | ||
| } | ||
|
|
||
| video { | ||
| margin: auto; | ||
| width: 100%; | ||
| max-width: 1000px; | ||
| display: block; | ||
| } | ||
|
|
||
| h1, h2, h3 { | ||
| color: white; | ||
| position: absolute; | ||
| z-index: 1; | ||
| text-align: center; | ||
| width: 100%; | ||
| } | ||
|
|
||
| h1 { font-size: 3em; top: 35vh; } | ||
| h2 { font-size: 2.5em; top: 50vh; } | ||
| h3 { font-size: 2em; } | ||
|
|
||
| </style> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="video-container"> | ||
| <video id="video" src="https://fhpcloud.fh-potsdam.de/s/cQCaBpTMfxfEgFJ/download/video.mp4" muted playsinline></video> | ||
| </div> | ||
|
|
||
|
|
||
| <h1>Never Gonna Give You Up</h1> | ||
| <h2>Rick Astley</h2> | ||
|
|
||
| <h3>We're no strangers to love</h3> | ||
| <h3>You know the rules and so do I</h3> | ||
| <h3>A full commitment's what I'm thinking of</h3> | ||
| <h3>You wouldn't get this from any other guy</h3> | ||
| <h3>I just wanna tell you how I'm feeling</h3> | ||
| <h3>Gotta make you understand</h3> | ||
| <h3>Never gonna give you up</h3> | ||
| <h3>Never gonna let you down</h3> | ||
| <h3>Never gonna run around and desert you</h3> | ||
| <h3>Never gonna make you cry</h3> | ||
| <h3>Never gonna say goodbye</h3> | ||
| <h3>Never gonna tell a lie and hurt you</h3> | ||
| <h3>We've known each other for so long</h3> | ||
| <h3>Your heart's been aching but you're too shy to say it</h3> | ||
| <h3>Inside we both know what's been going on</h3> | ||
| <h3>We know the game and we're gonna play it</h3> | ||
| <h3>And if you ask me how I'm feeling</h3> | ||
| <h3>Don't tell me you're too blind to see</h3> | ||
| <h3>Never gonna give you up</h3> | ||
| <h3>Never gonna let you down</h3> | ||
| <h3>Never gonna run around and desert you</h3> | ||
| <h3>Never gonna make you cry</h3> | ||
| <h3>Never gonna say goodbye</h3> | ||
| <h3>Never gonna tell a lie and hurt you</h3> | ||
| <h3>Never gonna give you up</h3> | ||
| <h3>Never gonna let you down</h3> | ||
| <h3>Never gonna run around and desert you</h3> | ||
| <h3>Never gonna make you cry</h3> | ||
| <h3>Never gonna say goodbye</h3> | ||
| <h3>Never gonna tell a lie and hurt you</h3> | ||
| <h3>Never gonna give, never gonna give</h3> | ||
| <h3>(Give you up)</h3> | ||
| <h3>(Ooh) Never gonna give, never gonna give</h3> | ||
| <h3>(Give you up)</h3> | ||
| <h3>We've known each other for so long</h3> | ||
| <h3>Your heart's been aching but you're too shy to say it</h3> | ||
| <h3>Inside we both know what's been going on</h3> | ||
| <h3>We know the game and we're gonna play it</h3> | ||
| <h3>I just wanna tell you how I'm feeling</h3> | ||
| <h3>Gotta make you understand</h3> | ||
| <h3>Never gonna give you up</h3> | ||
| <h3>Never gonna let you down</h3> | ||
| <h3>Never gonna run around and desert you</h3> | ||
| <h3>Never gonna make you cry</h3> | ||
| <h3>Never gonna say goodbye</h3> | ||
| <h3>Never gonna tell a lie and hurt you</h3> | ||
| <h3>Never gonna give you up</h3> | ||
| <h3>Never gonna let you down</h3> | ||
| <h3>Never gonna run around and desert you</h3> | ||
| <h3>Never gonna make you cry</h3> | ||
| <h3>Never gonna say goodbye</h3> | ||
| <h3>Never gonna tell a lie and hurt you</h3> | ||
| <h3>Never gonna give you up</h3> | ||
| <h3>Never gonna let you down</h3> | ||
| <h3>Never gonna run around and desert you</h3> | ||
| <h3>Never gonna make you cry</h3> | ||
|
|
||
|
|
||
| <script> | ||
|
|
||
| // adjust video frame along scrolling progress | ||
| const video = document.getElementById('video'); | ||
|
|
||
| document.addEventListener('scroll', () => { | ||
| video.removeAttribute("autoplay"); | ||
|
|
||
| // scrolling progress | ||
| const bar = document.getElementById('progress-bar'); // progress bar | ||
| const pct = (window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight)); | ||
|
|
||
| video.currentTime = video.duration * pct; | ||
| }); | ||
|
|
||
|
|
||
| // select all h3 elements | ||
| const headers = document.querySelectorAll('h3'); | ||
| const start = 100; // start position for first line | ||
| const end = 950; // end position for last line | ||
|
|
||
| const step = (end - start) / (headers.length - 1); // space between headers | ||
|
|
||
| // vertically distribute the elements | ||
| headers.forEach((header, index) => { | ||
| const topPosition = start + (index * step); | ||
| header.style.top = `${topPosition}vh`; // set top position | ||
| }); | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |