1

I have a vertical slideshow that scrolls/sticks to the next panel when the user scrolls. Desired effect is https://www.tesla.com but I thought I could achieve this with CSS (example below).

Example 1: https://codepen.io/moy/pen/poNrVdO

The problem is I would like to add a class so I can fade in the text when the next panel becomes 'active' and I'm not sure what the best approach is. Due to the framework this is going into, a non-jQuery solution would be preferable. I tried using http://dbrekalo.github.io/whenInViewport/ but can't get that to play ball at the minute.

import * as whenInViewport from "https://cdn.skypack.dev/when-in-viewport@2.0.4";

var WhenInViewport = window.WhenInViewport;
var elements = Array.prototype.slice.call(
 document.getElementsByClassName("slideshow__panel")
);

elements.forEach(function (element) {
  new WhenInViewport(element, function (elementInViewport) {
    elementInViewport.classList.add("inViewport");
  });
});

Update

The JS I was trying to use would only add a class and not toggle (add/remove) when items entered/left the viewport. So I decided to try a few other options. I've used AOS (Animation On Scroll) before but this is also having problems...

Example 2: https://codepen.io/moy/pen/XWNavaO

I think this is done to the overflow-y: auto which is required to get the snap-scroll to work. Can anyone offer an advise on this or would I be better moving away from snap scroll - as it's more hassle than it's worth?

4

0 回答 0