Video Scrolling

Developer
El Alemaño
Size
2,178 Kb
Views
16,192
  1. Video Scrolling Previews
  2. Video Scrolling HTML Codes
  3. Video Scrolling CSS Codes
  4. Video Scrolling JS Codes

How do I make an video scrolling?

What is a video scrolling? How do you make a video scrolling? This script and codes were developed by El Alemaño on 15 November 2022, Tuesday.

Video Scrolling Previews
IQ Test

Video Scrolling - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Video Scrolling</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="set-height"></div>
<video id="video" tabindex="0" autobuffer="autobuffer" preload="preload">	<source src="http://www.cloud.elalemanyo.de/tmp/videoscroll-XHsoS4LiWm.webm" type="video/webm">	<source src="http://www.cloud.elalemanyo.de/tmp/videoscroll-hKhnCZa6Pi.mp4" type="video/mp4"> <source src="http://www.cloud.elalemanyo.de/tmp/videoscroll-dnVsv89RGB.ogv" type="video/ogg">	<p>Sorry, your browser does not support the &lt;video&gt; element.</p>
</video> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Video Scrolling - Script Codes CSS Codes

#set-height {	display: block;	height: 9000px;	position: absolute;	top: 0;	right: 0;	width: 100%;	background-color: #000;
}
#video {	position: fixed;	top: 0;	left: 0;	width: 100%;
}
p {	font-family: Arial;	font-size: 24px;
}

Video Scrolling - Script Codes JS Codes

/** * Thanks to brancuzi for the Video!!! * http://www.brancuzi.com * http://www.brancuzi.com/lab1/ * http://www.brancuzi.com/lab2/ * http://www.brancuzi.com/lab3/ * http://www.brancuzi.com/lab4/
**/
$(document).ready(function() {	var video = $('#video').get(0),	$window = $(window),	$document = $(document);	function updateVideo() {	var duration = video.duration,	scrollPosition = window.scrollY;	if (duration) {	video.currentTime = (scrollPosition / ($document.height() - $window.height())) * duration;	}	}	$window.scroll(updateVideo);	// update video when metadata has loaded	$(video).on('loadedmetadata', updateVideo);	//video.load();
});
Video Scrolling - Script Codes
Video Scrolling - Script Codes
Home Page Home
Developer El Alemaño
Username elalemanyo
Uploaded November 15, 2022
Rating 3.5
Size 2,178 Kb
Views 16,192
Do you need developer help for Video Scrolling?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

El Alemaño (elalemanyo) Script Codes
Name
Highlighttextarea
Playing with Trianglify
RGB Loading
Twitter Loading Animation
Spin
RGB Hover
Button - rainbow border
Sticker
Telefon Ring
Flexslider Playground
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!