Простой параллакс изображения на jQuery

Чего вы можете добиться с помощью CSS 3D Transforms. Будут случаи, когда вы будете в полной мере использовать возможности CSS 3D.

 

ДЕМО
ИСХОДНИКИ

 

Данный пример - это эффект, который становится довольно популярным и зависит от 3D-трансформаций. В двух словах, мы распространили некоторые изображения по оси Z, затем мы использовали мышь как (фальшивую) 3D-камеру, чтобы перспектива изменилась при перемещении курсора мыши. То, что мы на самом деле делаем, - это поворот изображений в 3D-пространстве в соответствии с положением мыши.

Поскольку этот эффект зависит от движения мыши, на мобильных устройствах он не будет виден.

 

Создание структуры

Главная структура HTML - элемент <figure>, содержащий наше изображение героя (мы использовали 3 разных <img> s) и завернутые в элемент .cd-background-wrapper.

<div class="cd-background-wrapper">
    <figure class="cd-floating-background">
       <img src="img/cd-img-1.jpg" alt="image-1">
       <!-- images here -->
    </figure>
</div>

Используемые изображения должны иметь одинаковые размеры.

 

Добавление стиля

Чтобы создать изображение героя, мы помещаем элементы <img> один поверх других: у первого есть статическая позиция, в то время как остальные находятся в абсолютном положении; Каждому из них присваивается другое значение translateZ.

Идея эффекта параллакса: когда пользователь наводит курсор мыши на изображение героя, элемент cd-floating-background поворачивается (по осям X и Y) в соответствии с положением мыши. Поскольку элементы <img> имеют разные значения translateZ, для каждого из них воспринимается другое вращение.

Для правильного достижения этого эффекта мы должны убедиться, что наши <img> правильно расположены в 3D-пространстве: во-первых, мы присваиваем значение перспективы фрейму .cd-background-wrapper, который создает 3D-пространство, Его дети; Затем мы назначаем стиль преобразования: preserve-3d на .cd-floating-background, чтобы его дети размещались в трехмерном пространстве, а не сплющивались (по умолчанию). TranslateZ делает все остальное!

.cd-background-wrapper {
overflow: hidden;
perspective: 4000px;
}

.cd-floating-background {
transform-style: preserve-3d;
}

.cd-floating-background img:first-child {
transform: translateZ(50px);
}

.cd-floating-background img:nth-child(2) {
transform: translateZ(290px);
}

.cd-floating-background img:nth-child(3) {
transform: translateZ(400px);
}

IE

IE9 не поддерживает CSS3 3D Transforms, в то время как IE10 + не поддерживает свойство transform-style: preserve-3d. Таким образом, эффект параллакса не будет виден в IE, и вы увидите стандартное изображение.

 

Обработка событий

Мы привязываем функцию initBackground () к событию загрузки изображения: эта функция изменяет значение свойства position элемента <figure> относительно абсолютного (используется класс is-absolute). В этот момент нам нужно назначить правильную высоту элементу .cd-background-wrapper (поскольку его дочерний элемент находится в абсолютной позиции, его высота по умолчанию равна 0) и правильные размеры для .cd-floating-background (он должен Будет больше, чем его обертка - таким образом, вращение не покажет пустые границы).

Мы оцениваем соотношение сторон изображения и ширину видового экрана и назначаем для .cd-background-wrapper высоту, равную viewportWidth / heroAspectRatio. Высота и ширина фрейма cd-floating-background пропорциональны фреймам .cd-background-wrap, а его параметры left и top установлены так, чтобы изображение центрировалось внутри родительского.

Затем мы связываем событие mousemove с оболочкой .cd-background-wrap: позиция мыши оценивается с использованием event.pageX и event.pageY, а соответствующему значению rotateX и rotateY присваивается .cd-floating-background.

Примечание:

Modernizr не обнаруживает и не может сохранить-3d. Итак, чтобы настроить таргетинг на браузеры, которые этого не делают, мы использовали функцию getPerspective, которая присваивает классу preserve-3d / no-preserve-3d <html> в соответствии с поддержкой браузера.

 

Вот и всё!


Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!