Автор

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

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


Чего вы можете добиться с помощью 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> в соответствии с поддержкой браузера.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

Отображение информации на странице в виде jQuery вкладок.


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

Я уже не раз рассказывал о эффектах jQuery и что можно создать при помощи их. Но сегодня я хочу рассказать как можно создать отличную галерею просмотра миниатюр при помощи данного эффекта, галерея достаточно простая но в тоже время будет отлично смотреться на Вашем сайте, особенностью данной галереи является анимированное  превью интересующих изображений и вывод картинки в правом сайтбаре, и так, смотрим что у нас получилось.


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

Какова цель таймера, для сайта? Когда мы ожидаем, какого то события, мы пытаемся найти способ показать пользователям, сколько времени осталось. Таймер дает чувство важности события, и если его связать с email полем ввода, то вы получите намного больше подписчиков на ваши новости.

Что мы ожидаем от jQuery таймера? Сегодня мы будем создавать jQuery плагин для отображения обратного отсчета времени. Он будет показывать оставшиеся дни, часы, минуты и секунды до начала события. Что же, начнем…


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

Список разделенных блоков, которые воссоединяются при прокрутке, имитируя движение по оси Z с помощью преобразований CSS и jQuery.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close