×

Создать сайт или лендинг бесплатно

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

ВСЕ ОЧЕНЬ ПРОСТО

1 Войдите или зарегистрируйтесь.
2 На соответствующих страницах появятся ссылки для перехода к инструментам.
3 Ознакомьтесь с инструкцией и приступайте.

Если у вас возникнут проблемы пишите на support@saitostroika.com . Благодарим что вы с нами!

О сайте

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

FORGOT YOUR DETAILS?

CREATE ACCOUNT

CSS анимация. 3D блокнот

CSS анимация. Создаем 3D блокнот на CSS3 и JQuery

Like our page

5894

Follow Us

25374

Circle Us

3841

css анимация

CSS АНИМАЦИЯ. Исходники и урок

CSS анимация. Исходники и урок по созданию 3D открывающегося блокнота. Тема - создание сайта,  раздел веб дизайн обучение.

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

Идея

Идея основана на бумажном эффекте, найденном в видео из "Рассказов разработчиков Google". Может быть, вы создавали такого рода бумажные эффекты, когда были ребенком, что-то открывается или вращается при потягивании или толкании некоей ручки.

Интересно и оригинально. Может быть предпочтительно для ресурсов соответствующей тематики. Подробное толкование эффекта вы можете посмотреть здесь.

 

CSS3 АНИМАЦИЯ. РАЗМЕТКА

Итак, давайте начнем с разметки 3D блокнота. Мы будем использовать несколько подразделений для эффектов затенения css анимации, частей ручки и частей круга. Что нам нужно, это основная обертка с классом FC-обертки , которая будет круг. 

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

Блок с классом fc-handle-pull будет самым правым фрагментом ручки за пределами круга. Мы добавим контейнер на перспективу, и внутри с помощью css анимации добавим указанную накладку для правой части и также, часть второй ручки (она выглядит как одно, но на самом деле это две части), которая имеет класс fc-handle-out.

Теперь нам нужно разделение на левой части, которое будет видно только тогда, когда мы открываем другую половину. Здесь мы добавим наш текст или цитату. Примечание, мы также добавим некоторые накладки, которые помогут нам сделать открытие css анимации более реалистичным.

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

 

<div class="fc-wrapper">

<!-- right-most handle piece -->
<div class="fc-handle fc-handle-pull"></div>

<div class="fc-perspective">

<!-- right part overlay; get's darker -->
<div class="fc-overlay fc-overlay-reverse"></div>

<!-- middle handle piece -->
<div class="fc-handle fc-handle-out"><div></div></div>

<!-- inner bottom content part -->
<div class="fc-bottom">
<div class="fc-bottom-bg">
<div class="fc-content">
<p>I can live with doubt, and uncertainty, and not knowing. I think it's much more interesting to live not knowing than to have answers which might be wrong. <span>Richard Feynman</span></p>
</div>
</div>
<div class="fc-overlay fc-overlay-solid"></div>
</div><!-- //fc-bottom -->

<!-- front and back of the flipping half -->
<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>
<p>by Codrops</p>
</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><!-- //fc-back -->

</div><!-- //fc-flip -->

</div><!-- //fc-perspective -->

</div><!-- //fc-wrapper -->

 

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

Давайте, теперь наша css анимация приобретет стиль.

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);
}
Давайте взглянем на ручки 3D Flipping circle более детально. Все параметры css анимации будут иметь общий класс 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-out {
    right: -65px;
    width: 65px;
}
Значению fc-handle-in зададим немного большую величину:
.fc-handle-in {
    right: 80px;
}
Внутренние подразделения обеих ручек, которые на верхней части нашей css анимации будут служить в качестве тени. Когда мы "тянем" за ручку справа, тень падающая на окружность будет стремится к форме треугольника, уже получается симпатичная css анимация. Мы будем использовать два повернутых контейнера с диагональным градиентом, имитируя именно это:
.fc-handle div {
position: absolute;
height: 0px;
width: 80px;
top: 30px;
content: '';
opacity: 0.3;
}.fc-handle-in div {
background:
linear-gradient(
75deg,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) 73%,
rgba(0,0,0,0.65) 100%
);
}

.fc-handle-out div {
background:
linear-gradient(
170deg,
rgba(0,0,0,0.65) 0%,
rgba(0,0,0,0) 27%,
rgba(0,0,0,0) 100%
);
}

Наша css анимация обретает все более четкие формы. Следующий псевдо-элемент будет использоваться для создания эффекта тени на средней части:
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;
}
Давайте дадим нашей css анимации некоторую глубину с помощью градиента:
.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%
        );
}
Нижняя часть css анимации, которая будет содержать контент, будет иметь следующий стиль:
.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%;
}
Теперь давайте взглянем на накладки, которые помогут нам придать реалистичности. И наша css анимация будет выглядеть как настоящая. Давайте сначала определим общий стиль для всех из них:
.fc-overlay {
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
    position: absolute;
    border-radius: 50%;
}

Сплошное наложение будет просто полупрозрачным черным разделением. Это будет использоваться, чтобы часть css анимации выглядела темной первоначально (как нижнее содержание). При открытии круга, мы понизим уровень прозрачности, чтобы скрыть его ("открытые" области будут показаны в конце):

 

.fc-overlay-solid {
    background: rgba(0,0,0,0.6);
}
Следующее наложение будет делать противоположное: оно не будет видно изначально, но затем мы будем использовать его, чтобы затемнить вещи, как только мы открываем:
.fc-overlay-reverse {
    background: rgba(0,0,0,0);
}
Это наложение будет использоваться для правой части, которая будет полностью открываться.
Следующие две накладки css анимации будут иметь полупрозрачные градиенты, которые мы будем контролировать, используя непрозрачность:
.fc-overlay-left {
    background: linear-gradient(to right, transparent 27%, rgba(0,0,0,0.30) 80%);
    opacity: 0.5;
}

Левое наложение будет использоваться на передней части и правое наложение на задней. Обе перейдут в непрозрачность, при открытий буклета в первый раз.

Центральный контейнер css анимации, конечно, есть перспектива, и мы сделаем его немного уже. Идея состоит в том, чтобы отрезать круговые подразделения, которые мы будем иметь внутри:

 

.fc-perspective {
    width: 220px;
    height: 300px;
    position: relative;
    perspective: 1000px;
}
Оборотной контейнер будет поворачиваться, чтобы открыть все содержимое, откидывая заднюю часть. Чтобы перевернуть в нужном месте, мы должны установить трансформацию-происхождение где складка, которая находится на 220 пикселя:
.fc-flip {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-origin: 220px 0px;
}
Заднее и переднее подразделения будут иметь следующий общий стиль:
.fc-flip > div {
    display: block;
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    position: absolute;
}

Их ширина будет 220px и так как переполнение установлено "скрытым", круговые формы внутренних блоков css анимации будут отрезаны.

Задняя часть будет вращаться -180 градусов в 3D (на оси ординат):

 

.fc-flip .fc-back {
    transform: rotate3d(0,1,0,-180deg);
}

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

Внутренние части css анимации будут иметь круглую форму, и мы дадим им текстуру бумаги:

 

.fc-flip .fc-inner {
    border-radius: 50%;
    width: 300px;
    height: 100%;
    position: absolute;
    background: #846aa7 url(../images/paper.png) repeat top right;
}
.fc-flip .fc-back .fc-inner {
    margin-left: -80px;
    background-color: #553c77;
    box-shadow: inset 2px 0 3px rgba(0,0,0,0.1);
}

Обратное движение будет производиться влево так, что css анимация будет обрезана на левой стороне, а не справа.

Теперь давайте зададим стиль элементам контента:

 

.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);
}

 

Соберем все классы, которые будут иметь css анимационный переход:

 

.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;
}
Следующие свойства сделают что бы css анимация правильно 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-wrapper-open к главной обертке. Давайте определим "открытые" государства для всех элементов.

Самый левый кусок ручки сократится до ширины 0. Если вы посмотрите на эффект бумаги в видео, вы заметите, что он получается сместившимся вправо:

 

.fc-wrapper.fc-wrapper-open .fc-handle-in {
    width: 0px;
}
Диагональные градиенты будут служить тенями для двух ручек,которые имеет наша css анимация:
.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 {
    background-color: #513a70;
}
Самая правая ручка css анимации получится шире, потому что мы имитируем потягивание всей ручки:
.fc-wrapper.fc-wrapper-open .fc-handle-pull {
    width: 155px;
    background: #775b9d;
}
Цвет фона задней части содержания станет легче:
.fc-wrapper.fc-wrapper-open  .fc-flip .fc-back .fc-inner {
    background-color: #846aa7;
}
В надписях увеличится непрозрачность:
.fc-wrapper.fc-wrapper-open .fc-overlay {
    opacity: 1;
}
Сплошные наложения css анимации будут исчезать, а наоборот наложения становиться темнее:
.fc-wrapper.fc-wrapper-open .fc-overlay-solid {
background: rgba(0,0,0,0);
}
.fc-wrapper.fc-wrapper-open .fc-overlay-reverse {
background: rgba(0,0,0,0.4);
}
Нижняя часть css анимации будет сразу же видна (убираем переход здесь, но, когда она закрывается он исчезнет):
.fc-wrapper.fc-wrapper-open .fc-bottom{
    opacity: 1;
    transition: none;
}
И, конечно, самое главное, что должно случиться: вращение флип контейнера:
.fc-wrapper.fc-wrapper-open .fc-flip {
    transform: rotate3d(0,1,0,175deg);
}
И это все в отношении стилей,которые приобрела наша css анимация. Теперь, давайте посмотрим на несколько строк JavaScript, которые помогут нам применить классы и добавить некоторую поддержку для мобильного телефона.
css анимация + JAVASCRIPT

Когда мы нажимаем на правую ручку объекта css анимации, мы применяем класс 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 );
    }
} );

 

Вот и все, надеюсь, вам понравится наша css анимация, и вы найдете в ней Вдохновение!  

Мэри Лу  (Маноэла Илич).

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

TOP SQL requests:93. Generation time:0,265 sec. Memory consumption:16.34 mb