Оригинальный акцент – эффект параллакса


Параллакс представляет собой эффект изменения видимого положения какого-либо объекта относительно удаленного фона и в зависимости от угла зрения и расположения наблюдателя. Ранее данный термин использовался исключительно в сочетании с природными явлениями, в сфере астрономии и геодезии.

Сегодня эффект параллакса трансформировался в весьма эффектную и яркую «фишку» веб-дизайна. Параллакс-прокрутка является довольно выразительным и сравнительно простым способом придать сайту дополнительную выразительность, объем и глубину.


Суть параллакс-прокрутки



Как ни странно, но идея эффекта довольно проста – при скроллинге страницы фон сайта движется на порядок медленнее, чем остальные элементы. Технология нашла весьма широкое применение и выглядит потрясающе.

Достигать подобного эффекта веб-дизайнеры научились за счет наложения нескольких слоев друг на друга. Слои в процессе прокручивания движутся с разной скоростью, создавая искусственный трехмерный эффект. Следует отметить, что подобный инструмент можно использовать не только при скроллинге, но и в сочетании с иконками, изображениями или текстовыми элементами на странице.



Эффект параллакса наиболее полно раскрывается непосредственно в момент прокрутки. Поэтому веб-дизайнерам рекомендуется применять подобный механизм исключительно на «длинных» сайтах. В противном случае вся задумка будет выглядеть смазано.

Мера во всем



Используя эффект параллакс-прокрутки, настоятельно рекомендуется соблюдать принцип «лучше меньше, но лучше». Это действительно весьма яркая и оригинальная идея, но добавлять ее на все страницы без исключения – явный перебор.

Отличный совет – в качестве переднего плана (верхнего слоя) можно добавлять элементы с прозрачным фоном. В данном случае при прокрутке выбранный акцент будет двигаться, а фон оставаться на месте, удивляя пользователя.

Эффект параллакса можно использовать не на всей странице, а на ключевых элементах, на которых нужно акцентировать внимание пользователя.



Параллакс по праву считается одним из наиболее модных и действенных способов заинтересовать посетителя и ненавязчиво заставить его просмотреть страницу до самого конца. Параллакс-прокрутку можно добавить поверх видео, еще более добавив ресурсу выразительности.

Подобный эффект в сочетании с текстом создает ощущение, что буквы буквально парят над фоном. Весьма интересное решение, заставляющее пользователя увлечься и прочесть информацию до конца. Тем не менее, если текст идет сплошной «стеной», никакая прокрутка не поможет. Чтобы разбавить и «оживить» текст, следует разбить его на колонки, абзацы или списки, и только потом использовать параллакс.

Основной минус увлекательного визуального эффекта – существенная нагрузка и, как результат, проблемы с производительностью ресурса. Страница становится слишком «тяжелой», падает скорость ее загрузки. Подобный результат закономерен, так как JavaScript приходится контролировать положение каждого отдельного пикселя на экране устройства. Чтобы максимально сократить время загрузки многие разработчики рекомендуют применять эффект не для всей страницы, а не более, чем для одного-двух элементов.



Альтернатива – использование эффектов CSS3. Затраты ресурсов будут несколько ниже, но и полученный эффект нельзя назвать точной копией параллакс-прокрутки. Дело в том, что параллакс с разной скоростью изменения элементов просто невозможно создать, пользуясь исключительно CSS3. Зато веб-дизайнерам доступно следующее решение: параллакс-эффект размещен не на главной странице ресурса, а используется в качестве перехода к подстраницам сайта.
13 2016, 10:12    Creative Group Web-дизайн 0    3 0

comments (0)

    ticket_comment_err_no_auth