Автор

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

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


Чего вы можете добиться с помощью 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, который позволяет плавно прокрутить страницу как вверх, так и вниз. Плюс простое решение на CSS для кнопок "Вверх" и "Вниз", без картинок.

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


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close