Inspiring

Answered

intersection observer wont scroll

Forum|Forum|2 years ago
December 2, 2023
2 replies
5134 views

Created a page for a friend using intersection observer js where the divs/images should appear as you scroll down except something is stopping it from scrolling further than the visible page-

https://andylilien.com/generalreel/

but works on mine with the same script and relevant css

https://toddheymandirector.com/reel/

Ive tried overflow:scroll etc nothing has worked

the js

let observer = new IntersectionObserver(function (entries, observer) {
let delay = 0;

entries.forEach(function (entry) {
if (entry.isIntersecting) {
setTimeout(function () {
entry.target.classList.add('fadeInVideo');
}, delay);

delay += 200;

observer.unobserve(entry.target);
}
});
}, { threshold: 0.15 } ); // only show elemenst when 15% inside bottom of viewport

// observe the elements to be animated
document.querySelectorAll( '.reelVideoContainer' ).forEach( function (el) {
observer.observe(el);
} );

}
</script>

thoughts?

This topic has been closed for replies.

Correct answer osgood_

i believe it was because the splash page i didnt want a visible header (it was a fullscreen video background) whereas the other pages i did - But Im going to revamp my site to have a consistent header after I help my friend

My main concern is how to get the overlay to fade out and the nav links to drop out of frame elegantly (they followed, home, campaigns, about, connect one after the other - essentially reversing the way they came in) upon toggling off the the burger menu or clicking one of the nav links - it suddenly stopped working and I dont know why - this was your orginal code for that (ive added the burger menu and logo styling onto the page : https://toddheymandirector.com/index_test5.html so there is no external css page possibly corrupting it):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todd Heyman - Page Overlay/Navigation</title>
<link rel="stylesheet" type="text/css" href="https://toddheymandirector.com/css/style_heyman_2020.css">
<style>
body {
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
position: relative;
z-index: 110;
}
/* OVERLAY WRAPPER */
.overlayWrapper {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: -100;
height: 100vh;
width: 100%;
top: 0;
background-color: #000;
opacity: 0;
}

/* MAIN NAV LINKS */
.mainNavLinks {
margin: 0;
padding: 0;
/*overflow: hidden;*/
}

.mainNavLinks li {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
transform: translateY(210px);
transition: all 700ms ease;
opacity: 0;
}

/* ANIMATE NAV LINKS FADE IN/UP */
.mainNavLinks li.fadeInUp {
transform: translateY(0);
animation: fadeInUp ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* ANIMATE NAV LINKS FADE OUT/DOWN */
.mainNavLinks li.fadeOutDown {
transform: translateY(210px);
animation: fadeInDown ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* MAIN NAV LINKS */
.mainNavLinks li a {
display: block;
text-decoration: none;
text-align: center;
color: orange;
}

/* ANIMATE OVERLAY WRAPPER FADE IN */
.overlayWrapper.fadeInOverlay {
animation: fadeInOverlay ease 700ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
z-index: 100;
}

/* ANIMATE OVERLAY WRAPPER FADE OUT */
.overlayWrapper.fadeOutOverlay {
animation: fadeOutOverlay ease 700ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

/* COPYRIGHT */
.copyRight {
color: orange;
position: fixed;
bottom: 30px;
transform: translateY(100px);
transition: all 1s ease;
}

.copyRight.copyRightSlideUp {
transform: translateY(0);
}

/* -------KEYFRAME ANIMATIONS-------- */
/* MAIN NAV LINKS FADE IN/UP */
@keyframes fadeInUp {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


@keyframes fadeInDown {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}

/* FADE IN OVERLAY */
@keyframes fadeInOverlay {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/* FADE OUT OVERLAY */
@keyframes fadeOutOverlay {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

</style>
</head>
<body>
<header class="header">
<h1 class="th_logo_white th_logo_white_home slideRight">
<a href="https://toddheymandirector.com/">
<img src="https://toddheymandirector.com/images/home/THLOGO.png" alt="image" width="27px" height="55px"></a>
</h1>
<div class="button_container button_container_home slideLeft" id="toggle">
<span class="top"></span>
<span class="middle"></span>
<span class="middle2"></span>
<span class="bottom"></span>
</div>
</header>

<div class="overlayWrapper">
<ul class="mainNavLinks">
<li data-link="https://toddheymandirector.com/"><a href="#">Home</a></li>
<li data-link="https://toddheymandirector.com/reel"><a href="#">Campaigns</a></li>
<li data-link="https://toddheymandirector.com/about"><a href="#">About</a></li>
<li data-link="https://toddheymandirector.com/connect"><a href="#">Connect</a></li>
<li>
<div id="social_overlay2">
<div id="social_overlay">
<a href="https://www.facebook.com/todd.heyman.18" target="_blank" >
<div class="social_font">f</div>
</a>
<a href="https://www.vimeo.com/toddheyman" target="_blank" >
<div class="social_font">9</div>
</a>
<a href="https://www.instagram.com/toddheyman" target="_blank" >
<div class="social_font">c</div>
</a>
</div>
</div>
</li>
</ul>

<div class="copyRight">Copyright Information</div>
</div>
<!-- End overlayWrapper-->



<script>
<!-- Assign variables-->
const mainNavLinks = document.querySelectorAll('.mainNavLinks li')
const toggle = document.querySelector('#toggle');
const overlayWrapper = document.querySelector('.overlayWrapper');
const copyRight = document.querySelector('.copyRight');

// Add onclick event listener to main nav links
mainNavLinks.forEach(function(mainNavLink) {
mainNavLink.addEventListener('click' , removeFadeInUp);
})

// Remove 'fade in up' returning links to default position
function removeFadeInUp() {
// Get the current link from the data-link attribute
let link = this.getAttribute('data-link');
// Loop through main nav links
let i = mainNavLinks.length - 1;
setInterval(function(){
if(i < 0) {
return false;
}
else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
copyRight.classList.remove('copyRightSlideUp');
i--;
}
}, 70);

// Go to current link after 1 second
setTimeout(function() {
window.location = link;
}, 1000)

}
// End removeFadeInUp function

toggle.onclick = function() {
// Animate burger icon
this.classList.toggle('active');
// Check if state of overlayWrapper and assign correct css class
if(overlayWrapper.classList.contains('fadeInOverlay')) {
overlayWrapper.classList.remove('fadeInOverlay');
overlayWrapper.classList.add('fadeOutOverlay');
copyRight.classList.remove('copyRightSlideUp');
// Remove 'fade in up' returning links to default position
mainNavLinks.forEach(function (mainNavLink) {
mainNavLink.classList.remove('fadeInUp');
mainNavLink.classList.remove('fadeOutDown');
});
} else {
overlayWrapper.classList.remove('fadeOutOverlay');
overlayWrapper.classList.add('fadeInOverlay');
// Call function to animate nav links up
animateNavUp();
setTimeout(function() {
copyRight.classList.add('copyRightSlideUp');
}, 1000)
}

}
// End toggle onclick function

function animateNavUp() {
let i = 0;
setInterval(function(){
if(i === mainNavLinks.length) {
return false;
}
else {
mainNavLinks[i].classList.add('fadeInUp');
i++;
}
}, 70);
}
// End animateNavUp function

</script>

</body>
</html>

here is our original thread link if that helps as well https://community.adobe.com/t5/dreamweaver-discussions/reverse-nav-bar-action-on-click/m-p/13698291#M224132

Just a slight adjustment of the 'toggle' function shown in bold/red below is that the effect you require?

toggle.onclick = function() {
// Animate burger icon
this.classList.toggle('active');
// Check if state of overlayWrapper and assign correct css class
if(overlayWrapper.classList.contains('fadeInOverlay')) {


let i = mainNavLinks.length - 1;
setInterval(function(){
if(i < 0) {
return false;
}
else {
mainNavLinks[i].classList.remove('fadeInUp');
mainNavLinks[i].classList.add('fadeOutDown');
copyRight.classList.remove('copyRightSlideUp');
i--;
}
}, 70);

setTimeout(function() {

overlayWrapper.classList.remove('fadeInOverlay');
overlayWrapper.classList.add('fadeOutOverlay');
copyRight.classList.remove('copyRightSlideUp');
// Remove 'fade in up' returning links to default position
mainNavLinks.forEach(function (mainNavLink) {
mainNavLink.classList.remove('fadeInUp');
mainNavLink.classList.remove('fadeOutDown');
});

}, 1000)

} else {
overlayWrapper.classList.remove('fadeOutOverlay');
overlayWrapper.classList.add('fadeInOverlay');
// Call function to animate nav links up
animateNavUp();
setTimeout(function() {
copyRight.classList.add('copyRightSlideUp');
}, 1000)
}

}
// End toggle onclick function

@REELHERO wrote:
it suddenly stopped working and I dont know why - this was your orginal code

It never worked in the first instance as the code I provided only worked when a list menu item was clicked NOT when the overlay was toggled to disappear.........it should do now though with the additions as outlined above.

osgood_

Legend

Created a page for a friend using intersection observer js where the divs/images should appear as you scroll down except something is stopping it from scrolling further than the visible page-
https://andylilien.com/generalreel/
but works on mine with the same script and relevant css
https://toddheymandirector.com/reel/

Ive tried overflow:scroll etc nothing has worked

thoughts?

By @REELHERO

Badly formatted code is causing the problem, as a result the </body> tag is unclosed. Is the editor you are using NOT showing the errors?

Marked in bold/red should not be there:

</a>
</div>
</div>
</li>
</ul>

<div class="copyRight">© 2023 Andy Lilien // All Rights Reserved</div>
</div>
<!-- End overlayWrapper-->

There's some issue with the code between the 'header_andy" container. If you remove it the page will scroll.

<div id="header_andy">     </div>

I can't find any reason why the below code should be present?

</div> <!-- End of slider -->

</div>

Make the changes suggested and rebuilt the code between the 'header_andy" container. Something in that is the main culprit I think.

Plus the website is not secure, for some reason. I get a big warning in the browser not to proceed to the page. Only reason I did was because I know you.............so you need to get that fixed as soon as is possible.

REELHEROAuthor

Inspiring

Osgood you are always my favorite person on these forums and no one has taught me more -

definitely an issue with the header - Ill rebuild it but by cleaning up the code errors and removing the header it scrolled -

https://andylilien.com/generalreel/index4.html

thank you!

re the unsecure site - yes I know! its because while im using https for the test pages Im making - most of the functioning site uses http - i will correct that when I replace those pages--

while i have your attention 🙂

one other little glitch im having

I created a bento box menu and Im having trouble getting it to stay in the active state onclick - as soon as you hover away it returns to the original state

https://andylilien.com/index_test.html

click on the upper right menu it will become an "X" but it should stay that way when you navigate to the page options - but it immediately reverts to bento when you move the cursor away - does 'active' not work here?

osgood_

Legend

I created a bento box menu and Im having trouble getting it to stay in the active state onclick - as soon as you hover away it returns to the original state

https://andylilien.com/index_test.html

click on the upper right menu it will become an "X" but it should stay that way when you navigate to the page options - but it immediately reverts to bento when you move the cursor away - does 'active' not work here?

By @REELHERO

I clicked on it but it doesnt become an X........sort of flashes briefly and goes back to its normal state but I don't see an X at any point?

EDITED.

OK I see what you mean. If I click on it and hold the mouse down it become an X but as soon as I release the mouse it returns to its original format.

BenPleysier

Community Expert

This could be a factor.

A page which is secured with SSL (or TLS) cannot be accessed via HTTP, as that would mean that the page is not secured anymore. To redirect http URLs to https, you can rewrite the URL to use https instead of http. HTTPS is HTTP with encryption and verification, and is far more secure than HTTP

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

REELHEROAuthor

Inspiring

thanks Ben - yes Im doing a testing page (see my response to Osgood below) so my links are https - but the current site has http - Ill clear it up when i getrid of those

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded