What's new

How to remove class from siblings using enter view

Fever

Active member
Staff member
I am trying to use enter-view https://github.com/russellgoldenberg/enter-view/blob/master/README.md to create a video explainer. When i enter one section, the class "entered" is added. As I leave that section i want the class to be removed but it is not working all the time. If I scroll down, the class is added to each element but not removed from the other elements. When I scroll up out of the element the class is removed from the sibling elements correctly.

My goal is to have the section elements fade out as another one fades in.


body {
background-color: #c6d7de;
font-family: 'Montserrat';
margin: 0;
}

#v0 {
position: fixed;
bottom: 0;
right: 0;
width: 70%;
}

#set-height {
display: block;
}

section {
z-index: 1;
position: relative;
}

.content {
position: sticky;
position: -webkit-sticky;
width: 100%;
height: 50vh;
top: 0;
}

.home-slide-1 {
height: 100vh;
/* background: blue; */
}

.scroll-snapping-box {
scroll-snap-type: y mandatory;
}

.scroll-snapping-box section {
scroll-snap-align: start;
}

h1 {
font-size: 3em;
background: #fff;
display: inline-block;
padding: 10px 15px;
border-radius: 5px;
margin: 0;
}
p { font-size: 1.5em; }

section:nth-of-type(1) {
height: 100vh;
}
section:nth-of-type(2) {
height: 100vh;
}
section:nth-of-type(3) {
height: 100vh;
}

.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;
}
}

<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div class="scroll-snapping-box">
<section class="container home-section-1">
<div class="content">
<div class="home-slide-1">
<h1>Section 1</h1>
<p>Small info...</p>
</div>
</div>
</section>

<section class="container home-section-2">
<div class="content">
<div class="home-slide-2">
<h1>Section 2</h1>
<p>Small info...</p>
</div>
</div>
</section>

<section class="container home-section-3">
<div class="content">
<div class="home-slide-3">
<h1>Section 3</h1>
<p>Small info...</p>
</div>
</div>
</section>
</div>

<!-- <div id="set-height"></div> -->

<video id="v0" tabindex="0", autobuffer preload>
<source type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' src="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);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: '.home-section-1',
enter: function(el) {
el.classList.add('entered');
},
exit: function(el) {
el.classList.remove('entered');
},
})

enterView({
selector: '.home-section-2',
enter: function(el) {
el.classList.add('entered');
},
exit: function(el) {
el.classList.remove('entered');
}
})

enterView({
selector: '.home-section-3',
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 = 750,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option

// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});


// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}

window.requestAnimationFrame(scrollPlay);
</script>
</body>
</html>

Continue reading...
 
Top