Автор

Анимационный 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, что значительно ускорит загрузку страницы.


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

Ранее я уже писал о подобном скрипте Highlight.js в статье «Подсветка синтаксиса в примерах кода» который я использую на своем сайте, в этой статье речь пойдет о подсветке синтаксиса кода на SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.


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

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


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close