Автор

Анимационный 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 макет

Тенденции в области инфографического дизайна 2018, безусловно, будут следовать правилам графического дизайна 2018 года. Однако инфографика имеет эту специфическую и обязательную функцию, которую вы должны иметь в виду при проектировании: информации.


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close