Автор

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

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


Чего вы можете добиться с помощью 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

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

Полоса прокрутки это неотъемлемая часть интерфейса, зачастую полоса прокрутки зависит от браузера и операционной системы, но если вы не хотите следовать установленным правилам, а установить свои, тогда вам потребуется небольшой плагин Tiny Scrollbar, который позволит создать собственную, плавную, полосу прокрутки с приятным интерфейсом. данный плагин позволяет реализовать как вертикальную так и горизонтальную полосу прокрутку. В данном уроке мы детально рассмотрим как подойти к данной реализации.


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

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


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

Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close