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

 

Мы получили параллакс, который реагирует на вертикальное передвижение мыши, при этом некоторые элементы будут немного спрятаны за полем зрения посетителя, при движении они будут появляться.

Шаг 1. HTML

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

Все это будет обвернуто в единый класс, которые будут определять параметры контейнера и общее положение его на странице, давайте перейдем к следующему шагу.

Потрясающий эффект параллакса для сайта на JS

Шаг 2. CSS

Для начала мы устанавливаем общие параметры для контейнера заливаем фон необходимым нам цветом и указываем интервалы трансформации, затем мы устанавливаем изображение, которое будет основой для нашей картины:

Затем мы по очередности заливаем картину изображениями, в результате чего мы получаем готовую картинку, разделенную по слоям, но это еще не все, нам необходимо все оживить.

Шаг 3. JS

Нам осталась маленькая деталь, это подключения параллакса и его привязке к движению курсора мыши, для этого нам понадобится небольшой скрипт:

В результате мы получаем интересную картинку. Которая будет отзывчивой на движение курсора.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: