Автор

10 06.2017
Анимационный 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, чтобы показать / скрыть интересующую вас точку) ,

 

Вот и всё!


vk.com/club.ssdru

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


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

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

Слайд-шоу со скользящими панелями, которые открывают новые фиксированные фоновые изображения.


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

Blur или эффект размытого фона в последнее время становится весьма популярным. Он позволяет визуально подчеркнуть необходимую информацию. Но чтобы получить эффект размытого фона, или как говорят еще-боке, не надо иметь хорошую фотокамеру, все можно реализовать с помощью вспомогательных программ, к примеру: фотошоп или photoroom. Но что если надо такой эффект реализовать на сайте, чтобы эффект боке появлялся по желанию на необходимых элементах, к примеру размыть фон, чтобы подчеркнуть социальные закладки.


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

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


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

Модальное окно «product quick view», анимированное с использованием CSS3 и Velocity.js, которое обеспечивает пользователю быстрый доступ к основной информации о продукте.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close