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

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 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 {
  /* 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;
  }
}

Когда пользователь нажимает кнопку «Пуск», мы добавляем класс 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, чтобы показать / скрыть интересующую вас точку) ,

 

Вот и всё!

---