Создаем 3D календарь на anime.js

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

Сложность

3d календарь

Обратите внимание, представленные демонстрационные примеры работают только в браузерах поддерживающие свойства Flexbox и transform-style: preserve-3d.

3d calendar

календарь jquery

Для нашего календаря мы будем использовать Flexbox макет. Кубики созданы в виде "плоской" структуры и превращаются в много-элементную структуру, что позволяет воссоздать трехмерный вид. Все элементы контента будут находиться в контейнере content__block:

<div class="calendar-wrap">

   <div class="calendar">
      
      <div class="cubes">

         <div class="cube">
            <div class="cube__side cube__side--back"></div>
            <div class="cube__side cube__side--left"></div>
            <div class="cube__side cube__side--right"></div>
            <div class="cube__side cube__side--bottom"></div>
            <div class="cube__side cube__side--top"></div>
            <div class="cube__side cube__side--front">
               <div class="cube__number">1</div>
            </div>
         </div>

         <div class="cube">
            <!-- ... -->
         </div>
         <!-- ... -->
      </div><!-- /cubes -->

      <h2 class="title">The Title</h2>

   </div><!-- /calendar -->

   <div class="content">

      <div class="content__block">
         <h3 class="content__title">The Title</h3>
         <p class="content__description">If everyone demanded peace instead of another television set, then there'd be peace.</p>
         <p class="content__meta">John Lennon</p>
      </div>

      <div class="content__block">
         <!-- ... -->
      </div>

      <div class="content__number">0</div>

      <button class="btn-back" aria-label="Back to the grid view">↵</button>

   </div>
   <!-- /content -->
</div>

Стандартные стили всех демонстрационных вариантов находятся в файле common.css, индивидуальные стили - в файлах style1.css, style2.css и style3.css

css календарь

calendar jquery

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

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

.calendar {
   position: relative;
   width: 100%;
   height: 100%;
   margin: 0 auto;
   overflow: hidden;
   /* we always want 7 boxes in a row */
   padding: 3em calc((100vw - (7 * (7vw + 1vw)))/2);
}

.js .calendar {
   position: absolute;
   perspective: 1000px;
   padding: 0 calc((100vw - (7 * (7vw + 1vw)))/2) 5em;
}

.no-js .calendar {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-items: center;
}

/* Cubes container */

.cubes {
   display: flex;
   flex-wrap: wrap;
   align-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
}

Куб представляет собой 3D-конструкцию, которая должна иметь правильные соотношения сторон. Мы используем единицы измерения viewport, чтобы сделать наш куб адаптивным, пример таких единиц измерений вы можете увидеть на сайте продвижение сайта москва.

/* Single cube */

.cube {
   position: relative;
   display: block;
   flex: none;
   width: 7vw;
   height: 7vw;
   margin: 0.5vw;
}

.js .cube {
   flex: auto;
   transform-style: preserve-3d;
}

/* Push to the right weekday (we have to push 3 boxes) */

.js .cube:first-child {
   margin-left: calc(((7vw + 1vw) * 3) + 0.5vw);
}

.js .cube:not(.cube--inactive) {
   cursor: pointer;
}

/* Cube sides and rotations */

.cube__side {
   position: absolute;
   top: 0;
   left: 0;
   width: inherit;
   height: inherit;
   backface-visibility: hidden;
}

.cube__side--front {
   position: relative;
   transform: translateZ(3.5vw);
}

.cube__side--back {
   transform: rotateY(180deg) translateZ(3.5vw);
}

.cube__side--right {
   transform: rotateY(90deg) translateZ(3.5vw);
}

.cube__side--left {
   transform: rotateY(-90deg) translateZ(3.5vw);
}

.cube__side--top {
   transform: rotateX(90deg) translateZ(3.5vw);
}

.cube__side--bottom {
   transform: rotateX(-90deg) translateZ(3.5vw);
}

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

calendar css

ДЕМО СКАЧАТЬ Перевод статьи Cubes Advent Calendar

Тэги: animateanime.jscalendar

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.