Блог

У меня есть вертикальное слайд-шоу, которое прокручивается / прилипает к следующей панели при прокрутке пользователем. Желаемый эффект https://www.tesla.com но я думал, что смогу добиться этого с помощью CSS (пример ниже).

Пример 1: https: //codepen.io/мой/ручка/poNrVdO

Проблема в том, что я хотел бы добавить класс, чтобы я мог исчезать в тексте, когда следующая панель становится «активной», и я не уверен, каков наилучший подход. Из-за структуры, в которую это входит, решение, отличное от jQuery, было бы предпочтительнее. Я пытался использовать http://dbrekalo.github.io/whenInViewport / но не могу заставить это играть в мяч в данный момент.

 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");
  });
});
 

Обновить

JS, который я пытался использовать, будет только добавлять класс, а не переключать (добавлять / удалять), когда элементы вводятся / покидают область просмотра. Поэтому я решил попробовать несколько других вариантов. Раньше я использовал AOS (анимацию при прокрутке), но с этим тоже возникают проблемы…

Пример 2: https://codepen.io/мой/ручка/XWNavaO

Я думаю, что это делается для overflow-y: auto того, что требуется snap-scroll для работы. Может ли кто-нибудь дать совет по этому поводу, или мне лучше отказаться от snap scroll — поскольку это больше хлопот, чем того стоит?