3D бумажная открытка с помощью jQuery и CSS3

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Данный эффект отлично подойдет для оформления миниатюр на сайте, или создания оригинального портфолио. И так, приступим к первому шагу.

Шаг 1. HTML

Для начала мы рассмотрим разметку, в которой произведем разделение классом fc-flip который будет содержать передняя часть и задняя часть открытки. Задняя часть не будет видна, потому что мы поверните ее на 180 градусов по оси координат. Также мы добавим ручку-переключатель, которая будет приводить в действие данную открытку.

<div class="fc-wrapper">
 <div class="fc-handle fc-handle-pull"></div>
 <div class="fc-perspective">
 <div class="fc-overlay fc-overlay-reverse"></div>
 <div class="fc-handle fc-handle-out"><div></div></div>
 <div class="fc-bottom">
 <div class="fc-bottom-bg">
 <div class="fc-content">
 <p>I can live with doubt, and uncertainty, and not knowing. <span>Richard Feynman</span></p>
 </div>
 </div>
 <div class="fc-overlay fc-overlay-solid"></div>
 </div>
 <div class="fc-flip">

 <div class="fc-front">

 <div class="fc-inner">

 <div class="fc-overlay fc-overlay-left"></div>
 <!-- left-most part of handle -->
 <div class="fc-handle fc-handle-in"><div></div></div>

 <div class="fc-content">
 <h3>Free revelations</h3>

 </div>

 </div>

 </div><!-- //fc-front -->

 <div class="fc-back">

 <div class="fc-inner">

 <div class="fc-content">
 <div class="feynman">
 <span>1918 – 1988</span>
 </div>
 </div>

 <div class="fc-overlay fc-overlay-right"></div>
 </div>
 </div>
 </div>
 </div>
</div>

<p>I can live with doubt, and uncertainty, and not knowing. <span>Richard Feynman</span></p>

</div>

</div>

<h3>Free revelations</h3>

</div>

</div>

</div>

</div>

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

Шаг 2. CSS

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

.fc-wrapper {
 width: 300px;
 height: 300px;
 position: relative;
 margin: 30px auto 0;
 background: #846aa7 url(../images/paper.png) repeat center center;
 border-radius: 50%;
 box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.fc-wrapper {

width: 300px;

height: 300px;

position: relative;

margin: 30px auto 0;

background: #846aa7 url(../images/paper.png) repeat center center;

border-radius: 50%;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

}

Теперь зададим стили для параметров ручки, которой присвоен класс fc-handle:

.fc-handle {
 position: absolute;
 top: 50%;
 right: 0px;
 width: 80px;
 height: 30px;
 margin-top: -15px;
 background: #775b9d;
 box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.fc-handle {

position: absolute;

top: 50%;

right: 0px;

width: 80px;

height: 30px;

margin-top: -15px;

background: #775b9d;

box-shadow: 0 1px 1px rgba(0,0,0,0.1);

}

Следующий класс будет определять положение середины открытки:

.fc-handle-out {
 right: -65px;
 width: 65px;
}

.fc-handle-out {

right: -65px;

width: 65px;

}

Теперь зададим параметр для большой ручки:

.fc-handle-in {
 right: 80px;
}

.fc-handle-in {

right: 80px;

}

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

.fc-handle-out::after {
 position: absolute;
 right: 0px;
 width: 4px;
 height: 31px;
 content: '';
 background:
 linear-gradient(
 to right,
 rgba(0,0,0,0) 0%,
 rgba(0,0,0,0.15) 100%
 );
}

.fc-handle-out::after {

position: absolute;

right: 0px;

width: 4px;

height: 31px;

content: '';

background:

linear-gradient(

to right,

rgba(0,0,0,0) 0%,

rgba(0,0,0,0.15) 100%

);

}

Теперь стили для правого куска открытки, то есть тот, который вызовет открытие окружности буклета:

.fc-handle-pull {
 right: auto;
 left: 100%;
 margin-left: 5px;
 width: 30px;
 box-shadow:
 1px 0 1px rgba(0,0,0,0.1),
 inset 3px 0 2px rgba(0,0,0,0.2);
 cursor: pointer;
}

.fc-handle-pull {

right: auto;

left: 100%;

margin-left: 5px;

width: 30px;

box-shadow:

1px 0 1px rgba(0,0,0,0.1),

inset 3px 0 2px rgba(0,0,0,0.2);

cursor: pointer;

}

Зададим некоторые градиенты для открытия:

.fc-handle-pull::after {
 content: '';
 position: absolute;
 top: 0px;
 right: 0px;
 width: 30px;
 height: 100%;
 background:
 linear-gradient(
 to right,
 rgba(0,0,0,0) 0%,
 rgba(0,0,0,0) 69%,
 rgba(0,0,0,0.08) 100%
 );
}

.fc-handle-pull::after {

content: '';

position: absolute;

top: 0px;

right: 0px;

width: 30px;

height: 100%;

background:

linear-gradient(

to right,

rgba(0,0,0,0) 0%,

rgba(0,0,0,0) 69%,

rgba(0,0,0,0.08) 100%

);

}

В нижней части, которая будет содержать цитату, содержание будет иметь следующий стиль:

.fc-bottom {
 width: 220px;
 height: 100%;
 overflow: hidden;
 position: absolute;
 opacity: 0;
}

.fc-bottom {

width: 220px;

height: 100%;

overflow: hidden;

position: absolute;

opacity: 0;

}

Мы ставим прозрачность на 0, так как мы не хотим, чтобы вызвать зубчатые края круга, когда она закрыта.

.fc-bottom-bg {
 background: #846aa7 url(../images/paper.png) repeat center center;
 border-radius: 50%;
 width: 300px;
 height: 100%;
}

.fc-bottom-bg {

background: #846aa7 url(../images/paper.png) repeat center center;

border-radius: 50%;

width: 300px;

height: 100%;

}

Теперь давайте рассмотрим стиль содержания элементов которые будут находиться в открытке:

.fc-content {
 width: 220px;
 padding: 20px;
 text-align: right;
 position: relative;
 height: 100%;
}

.fc-back .fc-content {
 margin-left: 80px;
}

.fc-bottom-bg .fc-content {
 padding-top: 40px;
}

.fc-content p {
 font-size: 12px;
 line-height: 22px;
 font-family: "Montserrat", sans-serif;
 text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
 color: #3b2954;
 padding: 0 0 0 31px;
}

.fc-flip .fc-front h3,
.fc-flip .fc-front p {
 position: absolute;
 text-align: right;
 width: 180px;
 text-shadow: 0 -1px 1px rgba(255,255,255,0.1);
 color: #3b2954;
}

.fc-flip .fc-front h3,
.feynman span {
 font-family: "Montserrat", sans-serif;
 text-transform: uppercase;
 font-size: 17px;
 letter-spacing: 1px;
 font-weight: normal;
}

.fc-flip .fc-front h3 {
 top: 30px;
 left: 15px;
}

.feynman {
 width: 255px;
 height: 255px;
 position: absolute;
 overflow: hidden;
 top: 50%;
 left: -55px;
 border-radius: 50%;
 box-shadow: 2px 0 3px rgba(0,0,0,0.3);
 margin-top: -127px;
 background: transparent url(../images/feynman.png) no-repeat center right;
}

.feynman span {
 text-align: center;
 width: 100px;
 height: 5px;
 line-height: 30px;
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 bottom: 40px;
 right: 80px;
 font-size: 13px;
 position: absolute;
}

.fc-flip .fc-front h3 span{
 font-size: 40px;
}

.fc-flip .fc-front p,
.fc-bottom-bg .fc-content span {
 bottom: 50px;
 left: 15px;
 font-family: "Dancing Script", Georgia, serif;
 font-weight: 700;
 font-size: 22px;
}

.fc-bottom-bg .fc-content span {
 font-size: 18px;
 display: block;
 color: #fff;
 padding: 10px;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
 transform: rotate(-3deg);
}

.fc-content {

width: 220px;

padding: 20px;

text-align: right;

position: relative;

height: 100%;

}

.fc-back .fc-content {

margin-left: 80px;

}

.fc-bottom-bg .fc-content {

padding-top: 40px;

}

.fc-content p {

font-size: 12px;

line-height: 22px;

font-family: "Montserrat", sans-serif;

text-shadow: 0 -1px 1px rgba(255,255,255,0.1);

color: #3b2954;

padding: 0 0 0 31px;

}

.fc-flip .fc-front h3,

.fc-flip .fc-front p {

position: absolute;

text-align: right;

width: 180px;

text-shadow: 0 -1px 1px rgba(255,255,255,0.1);

color: #3b2954;

}

.fc-flip .fc-front h3,

.feynman span {

font-family: "Montserrat", sans-serif;

text-transform: uppercase;

font-size: 17px;

letter-spacing: 1px;

font-weight: normal;

}

.fc-flip .fc-front h3 {

top: 30px;

left: 15px;

}

.feynman {

width: 255px;

height: 255px;

position: absolute;

overflow: hidden;

top: 50%;

left: -55px;

border-radius: 50%;

box-shadow: 2px 0 3px rgba(0,0,0,0.3);

margin-top: -127px;

background: transparent url(../images/feynman.png) no-repeat center right;

}

.feynman span {

text-align: center;

width: 100px;

height: 5px;

line-height: 30px;

color: #fff;

text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

bottom: 40px;

right: 80px;

font-size: 13px;

position: absolute;

}

.fc-flip .fc-front h3 span{

font-size: 40px;

}

.fc-flip .fc-front p,

.fc-bottom-bg .fc-content span {

bottom: 50px;

left: 15px;

font-family: "Dancing Script", Georgia, serif;

font-weight: 700;

font-size: 22px;

}

.fc-bottom-bg .fc-content span {

font-size: 18px;

display: block;

color: #fff;

padding: 10px;

text-shadow: 1px 1px 1px rgba(0,0,0,0.2);

transform: rotate(-3deg);

}

Собираем вместе стили которые будут вызывать трансформации:

.fc-flip .fc-back .fc-inner,
.fc-overlay,
.fc-handle,
.fc-handle div,
.fc-flip,
.fc-bottom{
 transition: all 0.6s ease-in-out;
}

.fc-bottom{
 transition-delay: 0.6s;
}

.fc-flip .fc-back .fc-inner,

.fc-overlay,

.fc-handle,

.fc-handle div,

.fc-flip,

.fc-bottom{

transition: all 0.6s ease-in-out;

}

.fc-bottom{

transition-delay: 0.6s;

}

Следующие параметры отвечают за правильную работу элементов 3D:

.fc-flip,
.fc-flip .fc-inner,
.fc-handle {
 transform-style: preserve-3d;
}

.fc-flip > div,
.fc-flip .fc-inner,
.fc-flip .fc-front h3,
.fc-handle,
.fc-handle div,
.fc-overlay,
.fc-flip .fc-front p,
.fc-flip .fc-front span {
 backface-visibility: hidden;
}

.fc-flip,

.fc-flip .fc-inner,

.fc-handle {

transform-style: preserve-3d;

}

.fc-flip > div,

.fc-flip .fc-inner,

.fc-flip .fc-front h3,

.fc-handle,

.fc-handle div,

.fc-overlay,

.fc-flip .fc-front p,

.fc-flip .fc-front span {

backface-visibility: hidden;

}

Диагональные градиенты, которые будут служить в качестве теней для двух частей ручки:

.fc-wrapper.fc-wrapper-open .fc-handle-in div {
 height: 180px;
}

.fc-wrapper.fc-wrapper-open .fc-handle-out div {
 height: 100px;
}

.fc-wrapper.fc-wrapper-open .fc-handle-in div {

height: 180px;

}

.fc-wrapper.fc-wrapper-open .fc-handle-out div {

height: 100px;

}

Цвет фона первых двух частей ручки станет темнее:

.fc-wrapper.fc-wrapper-open .fc-flip .fc-back .fc-inner {
 background-color: #846aa7;
}

.fc-wrapper.fc-wrapper-open .fc-flip .fc-back .fc-inner {

background-color: #846aa7;

}

И конечно, самое главное, что должно случиться: вращение контейнера:

.fc-wrapper.fc-wrapper-open .fc-flip {
 transform: rotate3d(0,1,0,175deg);
}

.fc-wrapper.fc-wrapper-open .fc-flip {

transform: rotate3d(0,1,0,175deg);

}

Шаг 3. JavaScript

Когда мы нажимаем на открытку то происходит трансформация, мы будем применять класс fc-wrapper-open к основному контейнеру. Мы определим две простые функции для открытия и закрытия. Мы также добавим поддержку, используя скрипты Hammer.js и JQuery плагин:

$(function() {

 var $wrapper= $( '#fc-wrapper' ),
 $handle = $wrapper.children( 'div.fc-handle-pull' );

 $handle.on( 'click', function( event ) {

 ( $handle.data( 'opened' ) ) ? close() : open();

 } );

 $wrapper.hammer().bind( 'dragend', function( event ) {
 switch( event.direction ) {
 case 'right' : open(); break;
 case 'left' : close(); break;
 }
 });

 function open() {
 $wrapper.addClass( 'fc-wrapper-open' );
 $handle.data( 'opened', true );
 }

 function close() {
 $wrapper.removeClass( 'fc-wrapper-open' );
 $handle.data( 'opened', false );
 }

} );

$(function() {

var $wrapper= $( '#fc-wrapper' ),

$handle = $wrapper.children( 'div.fc-handle-pull' );

$handle.on( 'click', function( event ) {

( $handle.data( 'opened' ) ) ? close() : open();

} );

$wrapper.hammer().bind( 'dragend', function( event ) {

switch( event.direction ) {

case 'right' : open(); break;

case 'left' : close(); break;

}

});

function open() {

$wrapper.addClass( 'fc-wrapper-open' );

$handle.data( 'opened', true );

}

function close() {

$wrapper.removeClass( 'fc-wrapper-open' );

$handle.data( 'opened', false );

}

} );

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

3D бумажная открытка с помощью jQuery и CSS3

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи

3D бумажная открытка с помощью jQuery и CSS3

Шаг 1. HTML

Шаг 2. CSS

Шаг 3. JavaScript

Вот и все. Готово!

Читайте также:

Интересно:

Зайти

Не пропусти

Опрос блога

Подписывайтесь

Популярные статьи