ДИЗАЙН САЙТА
Что такое параллакс-прокрутка?
Параллакс-прокрутка — это графический метод веб-дизайна, при котором фоновые изображения движутся медленнее, чем передний план, создавая иллюзию трехмерного эффекта глубины, когда посетители прокручивают веб-страницу вниз. Эта техника выросла из техники многоплоскостной камеры, используемой в традиционной анимации с 3-х годов.
Параллакс основан на оптической иллюзии. Поскольку человеческий глаз воспринимает объекты, находящиеся рядом с нами, как большие, чем предметы, находящиеся дальше, мы воспринимаем удаленные объекты так, как будто они движутся медленнее.
Иллюзия уже давно используется в качестве параллакса в различных средах, создавая реалистичный эффект. Впервые он использовался в традиционной анимации, начиная с диснеевских мультфильмов «Белоснежка и семь гномов», а также в видеоиграх, таких как «Супер Марио».
С развитием CSS и HTML эффекты параллакса позже превратились в мир веб-дизайна, каким мы его знаем сегодня.
Параллаксная прокрутка — это специальная техника прокрутки, используемая в веб-дизайне, при которой фоновые изображения по всей веб-странице перемещаются медленнее, чем изображения переднего плана, создавая иллюзию глубины на двухмерном сайте.
На данный момент это одна из наиболее часто используемых техник веб-дизайна, но вы, вероятно, даже не подозреваете, что уже сталкивались с ней.
Это простое движение, к которому вы уже привыкли, и оно помогло многим веб-сайтам выглядеть динамичными и интерактивными.
Если вы решите его использовать, важно провести мозговой штурм, как параллакс может повлиять на работу мобильных устройств. Чтобы увеличить скорость сайта и не сильно ухудшить удобство использования на мобильных устройствах, обычно рекомендуется либо уменьшить прокрутку параллакса, либо полностью удалить его.
Не забудьте подумать обо всех случаях, когда вы, возможно, захотите использовать его в первую очередь, и о том, как его нужно настроить для пользователей на нескольких устройствах.
Читать далее здесь.
Дополнительная ссылка:
[optin-monster slug=”em8z7q6hga9elmy1dbgb”]
