Автор

Анимационный 3D макет

Анимационный 3D макет


Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.

 

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

 

Благодаря преобразованиям CSS 3D, поддерживаемым большинством современных браузеров, мы можем обогатить наши веб-проекты мощными анимациями и быть уверенными, что большинство пользователей получат полный опыт. Сегодняшний шаблон - это просто пример того, как превратить экран плоского приложения в 3D-макет и оживить его.

 

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

HTML структурирован в 2 основных элемента <div> (.cd-product-intro и .cd-product-mockup) - первый, содержащий ввод продукта (название, кнопки действий ..), а второй - макет (и точки ) - завернутый в section.cd-product.

<section class="cd-product">
<div class="cd-product-intro">
<h1><!-- Product name --></h1>
<p><!-- Product description --></p>
<div class="cd-triggers">
<a href="#0" class="cd-btn">Download</a>
<a href="#cd-product-tour" id="cd-start" class="cd-btn">Start</a>
</div>
</div> <!-- cd-product-intro -->

<div id="cd-product-tour" class="cd-product-mockup">
<img src="img/cd-app-image.png" alt="Preview image"> <!-- mockup image -->
<ul class="cd-points-container">

<li class="cd-single-point">
<a class="cd-img-replace" href="#0">More info</a>
<div class="cd-more-info cd-left">
<h2><!-- Point of interest title --></h2>
<p><!-- Point of interest description --></p>
<a href="#0" class="cd-close-info cd-img-replace">Close</a>
</div>
</li> <!-- .cd-single-point -->

<!-- other points of interest here -->

</ul> <!-- .cd-points-container -->

<div class="cd-3d-right-side"></div>
<div class="cd-3d-bottom-side"></div>

</div> <!-- .cd-product-mockup -->
</section> <!-- .cd-product -->

Два дополнительных элемента <div> (.cd-3d-right-side и .cd-3d-bottom-side) были использованы для создания трех сторон макета, в то время как cd-product-mockup::before -элемент использовался для создания тени.

 

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

На небольших устройствах CSS довольно прост (вы можете посмотреть код для получения дополнительной информации / комментариев).
На настольных устройствах (ширина окна просмотра более 1170 пикселей) мы назначили position: absolute и width: 50% для ввода .cd-product-intro и установите left: 0, чтобы поместить ее в левую часть экрана.

Одно замечание

Мы использовали псевдоним элемента .cd-product-intro::before, чтобы обнаружить текущий запрос CSS Media в jQuery: трюк выполняется с назначением разных значений контента в разных запросах CSS Media.

.cd-product-intro::before {
  /* never visible - this is used in jQuery to check the current MQ */
  content: 'mobile';
  display: none;
}
@media only screen and (min-width: 1170px) {
  .cd-product-intro {
    position: absolute;
    left: 0;
    width: 50%;
    padding: 0;
    text-align: left;
    transition: transform 0.6s, opacity 0.6s;
  }
  .cd-product-intro::before {
    /* never visible - this is used in jQuery to check the current MQ */
    content: 'desktop';
  }
}

Для .cd-product-mockup мы устанавливаем width: 450px и margin: 0 auto, чтобы поместить ее в центр своего контейнера cd-product, а затем повернули с помощью 3D-преобразований:

.cd-product-mockup {
  width: 90%;
  /* set here the max-width for the mockup */
  max-width: 450px;
  margin: 0 auto;
}
@media only screen and (min-width: 1170px) {
  .cd-product-mockup {
    transform-style: preserve-3d;
    transform-origin: center top;
    transform: rotateX(-60deg) rotateZ(-40deg) translateX(50px) translateY(300px);
    transition: transform 0.6s;
  }
}

transform-style: preserve-3d гарантирует, что .cd-3d-right-side и .cd-3d-bottom-side расположены в 3D-пространстве (а не сплющены в плоскости, как и по умолчанию).
Чтобы создать эффект трехмерных сторон, мы установили образ макета как backgorund-image для обоих .cd-3d-right-side и .cd-3d-bottom-side и назначили им дополнительное вращение CSS (rotateX или rotateY согласно В сторону):

@media only screen and (min-width: 1170px) {
  .cd-3d-right-side, .cd-3d-bottom-side {
    display: block;
    position: absolute;
    left: 0;
    background-image: url(../img/cd-app-image.png);
    /* Firefox bug - 3D CSS transform, jagged edges */
    outline: 1px solid transparent;
  }
  .cd-3d-right-side {
    top: -1px;
    width: 10px;
    height: 100%;
    background-size: auto 100%;
    transform-origin: left center;
    transform: translateZ(-1px) translateY(1px) rotateY(-90deg);
  }
  .cd-3d-bottom-side {
    bottom: 0;
    width: 100%;
    height: 10px;
    background-position: bottom center;
    background-size: 100% auto;
    transform-origin: center bottom;
    transform: translateZ(-1px) rotateX(-90deg);
  }
}

Для тени макета мы использовали .cd-product-mockup::before. Мы начали применять к нему blur() filter; Это свойство CSS не поддерживается в Firefox 33 (и ниже) и в Internet Explorer 11 (и ниже). Хотя это можно исправить в Firefox с помощью SVG-фильтра, для IE нет простого исправления. Таким образом, мы отказались от свойства blur () и выступили с трюком, основанным на теневой коробке: мы назначили width: 0 и сыграли с blur radius и spread radius, чтобы достичь реалистичного эффекта.

@media only screen and (min-width: 1170px) {
  .cd-product-mockup::before {
    /* mockup shadow */
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    /* play with these values to create a realistic shadow */
    height: 45%;
    box-shadow: 0px 0px 30px 225px rgba(0, 0, 0, 0.1);
    transform: translateZ(-100px) translateY(480px);
    
    transition: transform 0.6s;
  }
}

Одно замечание

Поскольку в IE11 (и ниже) transform-style: preserve-3d не поддерживается, вы не увидите трехмерных сторон макета.

Когда пользователь нажимает кнопку «Пуск», мы добавляем класс is-product-tour к элементу .cd-product translateX(-50%) назначается в .cd-product-intro и translateX(0) на .cd-product-tour. Для достижения плавной анимации были добавлены переходы CSS3 к значениям преобразования и непрозрачности.

 

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

Мы использовали jQuery для добавления / удаления классов (класс .is-product-tour в .cd-product, когда пользователь нажимает кнопку запуска, .is-open class для .cd-single-point, чтобы показать / скрыть интересующую вас точку) ,

 

Вот и всё!

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

vk.com/club.ssdru

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



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

Анимационный 3D макет

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


Анимационный 3D макет

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.


Анимационный 3D макет

Представляю вашему вниманию 4 интересных шаблона для сайта (скоро открытие сайта).


Анимационный 3D макет

Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close