Автор

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

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


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

 

Вот и всё!


vk.com/club.ssdru

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


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

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

Порой разработчик не особо заморачивается дизайном своего ресурса и приходит к выводу, что будет использовать готовые шаблоны для сайта. Это весьма упрощает жизнь верстальщику, так как приходиться работать с готовым материалом, который уже можно изменить на свое усмотрение не создавая дизайн с нуля. В данном посте мы рассмотрим подборку замечательных, на мой взгляд, готовых шаблонов для сайта, которые вы можете скачать и использовать на свое усмотрение. Уверен, что каждый из посетителей найдет что-нибудь примечательное на свой вкус..

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


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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

Мировая глобализация операционной системы от майков продолжатся, дизайнеры уже массово переделывают свой дизайн под стиль Metro UI, кому-то он нравится, у других-вызывает отвращение, но тем не менее что-то новое всегда имеет место быть. В данном уроке мы рассмотрим как создать замечательную галерею с эффектом увеличения и слайдом в стиле дизайна Metro UI. Галерея будет полностью копировать интерфейс пуска нашумевшей восьмерки. Кроме этого мы добавили настройки, где вы сможете применить различные эффекты.


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

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close