Недавно мне было поручено создать микросайт для одного из наших клиентов на работе. Этот конкретный клиент хотел небольшой сайт, который продемонстрировал бы их новую линию чипсов и погружения. Это мой первый клиент, вынужденный в AMP, я был очень взволнован, чтобы начать работу и показать своей команде, что я больше, чем просто красивое лицо.
Поэтому я встречаюсь со своим менеджером проекта, и мы рассмотрим проекты и обсуждаем функциональность, которую страница будет иметь за различными разделами. Это было довольно прямо, герой, сетка с изготовленными продуктами, локатор магазина, карусель продукта и нижний колонтитул. Единственное, что герой будет иметь эффект параллакса, когда некоторые чипы выскакивают и перемещаются по странице, когда пользователь прокручивает вниз. Хотя это потребовалось немного работы, для меня основным бонусом было то, что большинство других частей сайта уже были построены для меня благодаря моему коллеге Итану, который является профессионалом в том, чтобы выпустить эти микроситы для наших клиентов Анкет Поэтому я сбиваю его репозиторий GitHub и настраиваю свой локальный, мы используем фонд Zurb Foundation для этого клиента. Я начинаю собирать кусочки и создавать страницу в соответствии с компанией дизайнера. Примерно через 3 – 4 часа я заканчиваю то, что считаю базой страницы. У меня есть все разделы, и все компоненты функционируют, как и ожидалось. Пришло время добраться до эффекта параллакса.
9 строк JavaScript
Без балды. После нескольких часов игры с различными библиотеками Parallax, чтобы попытаться создать эффект, который я хотел, мой босс случайно скользит на своем стуле и говорит: «Это выглядит весело. Отправьте это мне, позвольте мне попробовать ». Так что я делаю. Через 15 минут он отправляет меня через файл JavaScript и говорит, что все установлено. Я копирую его код в свой файл JavaScript, составляю его и открываю в Firefox, чтобы проверить его. Это сработало. Это сработало красиво. Я был так удивлен, что я продолжал прокручивать взад и вперед, заставляя чипсы двигаться так, как казалось часами. Смотрите код ниже.
Довольно круто. И злой простой тоже. Конечно, с этой версией вам нужна jQuery, чтобы она запустила, но создание того же результата в Vanilla JS возможно.
Оригинал: “https://dev.to/amp_agency/quick-and-easy-js-parallax-effect-591l”