Created
April 5, 2019 15:52
-
-
Save qpre/cb1bc57fc8891d6744c83a66e4d72a18 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>Raphaelle && QQ's Funtime Zone</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> | |
| </head> | |
| <body> | |
| <div style="position: absolute; top: 200px; left: 300px"> | |
| <div style="position: relative; width: 400px; height: 200px; overflow: hidden; background-color: black" id="container"> | |
| <div style="position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden;" id="pane-left"> | |
| <video style="position: absolute; top: 0; left: 0; width: 400px;" muted autoplay loop src="videos/toystory.mp4" /> | |
| </div> | |
| <div style="position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden;" id="pane-right"> | |
| <video style="position: absolute; top: 0; right: 0; width: 400px;" muted autoplay loop src="videos/videoplayback.mp4" /> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const videosContainerElement = document.getElementById('container'); | |
| const leftPaneElement = document.getElementById('pane-left'); | |
| const rightPaneElement = document.getElementById('pane-right'); | |
| function changeWidth(newWidth) { | |
| leftPaneElement.style.width = `${newWidth}px`; | |
| rightPaneElement.style.width =`calc(100% - ${newWidth}px)`; | |
| } | |
| function handleMouseMove(event) { | |
| console.log(event); | |
| changeWidth(event.offsetX) | |
| } | |
| videosContainerElement.addEventListener('mousemove', handleMouseMove) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment