Блог

Главная - Вопросы по программированию - Показывать при прокрутке вариант для текста HTML, CSS, JS

Показывать при прокрутке вариант для текста HTML, CSS, JS

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу получить эффект, подобный https://www.stpeterscollege.lk/history-of-our-college к моему HTML-коду. Может кто-нибудь помочь мне с этим, пожалуйста?

Комментарии:

1. Это не кажется очень сложным, играя с непрозрачностью и IntersectionObservers

Ответ №1:

Существует микро-библиотека с именем scroll-out, которая помогает в обнаружении прокрутки и которая облегчит вам получение такого эффекта. Вот ссылка на него.

Вам просто нужно добавить следующий CSS

 [data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}

И это в HTML, чтобы применить эффект прокрутки ко всем элементам.

 <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
<script>
  ScrollOut();
</script>

Следуйте документам для получения дополнительной информации.

Метки: , ,