Чтобы улучшить свое веб-приложение, я хотел создать эффект отображения контента, когда пользователь прокручивает домашнюю страницу. Ранее я использовал javascript, чтобы заставить элемент исчезнуть, манипулируя его свойством отображения, поэтому я использовал его, чтобы проинформировать свой подход.
Мой план состоял в том, чтобы манипулировать свойством непрозрачности элемента, увеличивая значение с десятичным приращением от 0 до 1, максимальное значение непрозрачности, когда пользователь прокручивал до определенной точки на странице. В псевдокоде:
load page & listen for scroll event
if user scrolls past breakpoint x, AND element opacity == 0:
increase element opacity slowly to 1
else:
element opacity = 0
Мы копнем глубже ниже. Во-первых, вот javascript:
window – это глобальная переменная Javascript, представляющая видимую часть документа для данного экрана. Он поставляется с событием onscroll, которое отслеживает прокрутку. Я решил, что хочу, чтобы элемент #homepageinfo начинал появляться, когда пользователь прокручивает 1/3 экрана вниз, поэтому я использовал встроенные свойства window.scrollY (представляющие, сколько пикселей в документе был прокручен по вертикали) и window.innerHeight (представляющий высоту окна в пикселях) для вычисления этой точки останова.
Затем я использовал setInterval() и свойство opacity, чтобы элемент отображался медленно. setInterval() принимает функцию appear() и интервал в миллисекундах в качестве аргументов. В функции появления() я использовал счетчик, который увеличивался с каждым вызовом функции появления(), чтобы вычислять новое значение непрозрачности (непрозрачность+.1) каждые 50 миллисекунд и останавливать вызовы функции появления() с помощью clearInterval() после того, как значение opacity= 1.
Вот как это выглядит в моем приложении:
Вот и все! Последнее замечание, если вы хотите попробовать этот подход: в зависимости от содержимого вашей страницы и предполагаемого дизайна, вычисление точки останова как «1/3 пути вниз по высоте окна» оставляет место для несогласованности между устройствами с разной шириной экрана, где содержимое может располагаться в другом месте относительно высоты окна. Есть и другие способы сделать это более точным.
