I think you just need to use the container’s “scrollTop” property.
Replace your “scrollPlay” function with this:
function scrollPlay() {
var scrollTop = document.querySelector(".container").scrollTop;
var frameNumber = scrollTop/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
Right now I am trying to make a scroll snapping section that displays information over a video. As the user scrolls down, I need the video to play and html that pertains to it will popup. I have created a full page layout that works in every way but the video playing on scroll down and up.
Right now I am attempting to use pageYOffset but I believe because the div “container” is set to scroll it is not using pageYOffset as intended.
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #000;
height: 100vh;
line-height: 1.6;
overflow: hidden;
}
#v0 {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
z-index: -1;
}
.container {
width: 100%;
height: 100%;
z-index: 1;
/* CSS Smooth Scroll */
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
.lead {
font-size: 1.5rem;
}
.navbar {
position: fixed;
top: 0;
z-index: 1;
display: flex;
width: 100%;
height: 60px;
background: rgba(0,0,0,0.7);
}
.navbar ul {
display: flex;
list-style: none;
width: 100%;
justify-content: center;
}
.navbar ul li {
margin: 0 1rem;
padding: 1rem;
}
.navbar ul li a {
text-decoration: none;
text-transform: uppercase;
color: #f4f4f4;
}
.navbar ul li a:hover {
color: skyblue;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
/* Scroll Snap */
scroll-snap-align: center;
scroll-snap-stop: always;
}
section h1 {
font-size: 4rem;
}
/* Section Images */
/* section#link1 {
background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;;
}
section#link2 {
background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;;
}
section#link3 {
background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;;
} */
.entered {
-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
@keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
#footer {
height: 200px !important;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<nav class="navbar">
<ul>
<li><a href="#link1">Home</a></li>
<li><a href="#link2">About</a></li>
<li><a href="#link3">Service</a></li>
</ul>
</nav>
<section id="link1">
<h1>Welcome To My Site</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!</p>
</section>
<section id="link2">
<h1>About</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!</p>
</section>
<section id="link3">
<h1>Service</h1>
<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Commodi, quis!</p>
</section>
<section id="footer">
<h1>footer</h1>
</section>
</div>
<video id="v0" tabindex="0", autobuffer preload>
<source type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' src="http://implantlogic.wpengine.com/wp-content/uploads/2020/06/fingers.mp4"></source>
</video>
<script type="text/javascript">
"use strict";!function(e){"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module&&module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i<e;if(o&&!n.__enter_view){if(m(n),_)return!1}else!o&&n.__enter_view&&w&&w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i<n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&&m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&&p,g=null,y=!1,A=[],q=0;s()};return e});
</script>
<script type="text/javascript">
enterView({
selector: 'section',
enter: function(el) {
el.classList.add('entered');
},
exit: function(el) {
el.classList.remove('entered');
},
})
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 1000,
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
</script>
</body>
</html>Thank you this worked perfectly. I appreciate the quick help.