Lay Theme Forum

Hello everybody,

I would like to know if there is a way of applying some simple CSS transition effect FadeIn and Out for some text or div every time you slide up or down a row when the Fullscreen slider is activated.

I was trying to adapt the JS proposed in this thread Change nav and logo text to white/black when scrolling, but unfortunately I didn't have any success. The code doesn't work when the Fullscreen slider is activated, but it does work when it is not.

Anybody that could help on this?
Thanks

Melo

If anybody needs it, here is the script I used.
It was tricky because there was an annoying phenomena between the hover and the scroll functions. Basically while scrolling the page, the browser (Chrome especially) doesn't send any other mouse coordinates, therefore the hovered video was constantly there till the scroll was stopped.

Here is a script that avoid this problem:

<script>
let hoveredElement;
let mouseX = 0, mouseY = 0;

document.addEventListener('DOMContentLoaded', () => {
  document.addEventListener('mousemove', event => {
    mouseX = event.clientX;
    mouseY = event.clientY;

    hover(event.target);
  });

  document.addEventListener('scroll', () => {
    const hoverTarget = document.elementFromPoint(mouseX, mouseY);
    if (hoverTarget) {
      hover(hoverTarget);
    }
  });
});

function hover(targetElement) {
  // If the target and stored element are the same, return early
  // because setting it again is unnecessary.
  if (hoveredElement === targetElement) {
    return;
  }
// On first run, `hoveredElement` is undefined.
  if (hoveredElement) {
    if (hoveredElement.hasAttribute("data-videoid")) {
document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.remove('hoverscrolled');
     console.log(hoveredElement.getAttribute("data-videoid"));
     console.log(document.getElementById(hoveredElement.getAttribute("data-videoid")));

}

  }

  hoveredElement = targetElement;
if (hoveredElement.hasAttribute("data-videoid")) {
document.getElementById(hoveredElement.getAttribute("data-videoid")).classList.add('hoverscrolled');
      console.log(hoveredElement.getAttribute("data-videoid"));
     console.log(document.getElementById(hoveredElement.getAttribute("data-videoid")));
}

}
</script>

HTML:

<div data-videoid="one_data"  >
</div>

<video id="one_data" class="vid_background" autoplay muted loop>
  <source src="https://somevideo.mp4" type="video/mp4">  Your browser does not support HTML5 video.
</video>

CSS:

video.vid_background{
     opacity: 0;
     left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -5;
    width: 40%;
    position: fixed;
    height: 50%;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
 }
 
video.vid_background.hoverscrolled  {
    opacity: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -5;
    width: 40%;
    position: fixed;
    height: 50%; 
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
 }

Nothing of that kind. Everything is set the same: 0 margin or padding.
It's a Carousel problem.
But thanks for checking! :)