Создание измельчителя бумаги с кнопкой удаления при помощи CSS3

23 июня 2014 | Опубликовано в css | 1 Комментарий »

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

Демонстрация работы – Скачать исходный код

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

Как же мы это сделаем?

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

clip: rect(0,40px,300px,0);

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

Обратите внимание на 10 разных частей, созданных при использовании свойства clip.

Теперь мы сделаем другую, необрезанную версию нашего содержимого и прикрепим ее наверх, всем элементам будет задано свойство position: absolute, так что все появится как одна часть. Эта необрезанная версия будет прикрытием, которое будет медленно исчезать, показывая отдельные полоски, когда содержимое проходит через измельчитель, и наш эффект готов! Выглядит так, как будто бумага разрезана на 10 частей блоком, но мы знаем правду.

Наш код HTML, следовательно, выглядит так, с одним и тем же содержимым в каждой части. Блок содержимого — это прикрытие, необрезанное содержимое, и каждая часть — это отдельная полоска:

<div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div class="part-7">
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
<div>
<div class="alert">
<i class="ss-alert"> </i>
</div>
<div class="shred-me">
DELETE ME!
</div>
</div>
</div>

Для начала немного CSS, в котором мы определим анимацию:

body {
background: #333;
overflow: hidden;
font-family: sans-serif;
padding: 0;
margin: 0;
}

.animate-shredded-paper {
-webkit-animation: shredGo 3.5s 1 forwards;
animation: shredGo 3.5s 1 forwards;
}

.animate-content {
animation: cover 2.6s 1 forwards 1s;
-webkit-animation: cover 2.2s 1 forwards 1s;
}

.shredded-holder-animate {
animation: shredShake 0.12s 26 0.5s;
-webkit-animation: shredShake 0.12s 26 0.5s;
}

.shredded-paper-p-animate {
animation: Animation1 3.6s 1 forwards 1s;
-webkit-animation: Animation1 3.6s 1 forwards 1s;
}
.shredded-paper-q-animate {
animation: Animation2 3.6s 1 forwards 1s;
-webkit-animation: Animation2 3.6s 1 forwards 1s;
}

Эта анимация будет добавлена, когда мы будем использовать jQuery. Если мы просто добавим ее прямо в CCS, мы не сможем управлять моментом запуска анимации. Когда мы задаем значение shredShake 0.12s 26 0.5s, мы хотим, чтобы анимация shredShake выполнялась 0.12 секунд, 26 раз, с задержкой в 0.5 секунды. Анимация задается с использованием опорных кадров, и, так как движку webkit требуются приставки, нам придется прописать каждую анимацию по два раза. Анимация выглядит так:

@-webkit-keyframes shredGo {
10% { top: 20px; }
12% { top: 15px; }
30% { top: 150px; }
32% { top: 145px; }
60% { top: 320px; }
62% { top: 315px; }
68% { top: 380px; }
100% { top: 400px; }
}

@keyframes shredGo {
10% { top: 20px; }
12% { top: 15px; }
30% { top: 150px; }
32% { top: 145px; }
60% { top: 320px; }
62% { top: 315px; }
68% { top: 380px; }
100% { top: 400px; }
}

@-webkit-keyframes shredShake {
50% { top: 352px; }
100% { top: 348px; }
}

@keyframes shredShake {
50% { top: 352px; }
100% { top: 348px; }
}

@-webkit-keyframes cover {
30% { top: -25px; }
80% { height: 20%; }
100% { top: 0; height: 0; }
}

@keyframes cover {
30% { top: -25px; }
80% { height: 20%; }
100% { height: 0; top: -5px; }
}

@keyframes Animation1 {
20% { transform: scaleY(1.1) rotateX(5deg); }
50% { transform: scaleY(1.1) rotateX(-5deg); top: 0; }
90% { transform: scaleY(1.1) rotateX(10deg); top: 400px; }
100% { transform: scaleY(1.1) rotateX(10deg); top: 1200px; }
}

@-webkit-keyframes Animation1 {
20% { -webkit-transform: scaleY(1.1) rotateX(5deg); }
50% { -webkit-transform: scaleY(1.1) rotateX(-5deg); top: 0; }
90% { -webkit-transform: scaleY(1.1) rotateX(10deg); top: 400px; }
100% { -webkit-transform: scaleY(1.1) rotateX(10deg); top: 1200px; }
}

@keyframes Animation2 {
20% { transform: scaleY(1.1) rotateX(-5deg); }
50% { transform: scaleY(1.1) rotateX(-5deg); top: 0; }
90% { transform: scaleY(1.1) rotateX(-10deg); top: 400px; }
100% { transform: scaleY(1.1) rotateX(-10deg); top: 1200px; }
}
@-webkit-keyframes Animation2 {
20% { -webkit-transform: scaleY(1.1) rotateX(-5deg); }
50% { -webkit-transform: scaleY(1.1) rotateX(-5deg); top: 0; }
90% { -webkit-transform: scaleY(1.1) rotateX(-10deg); top: 400px; }
100% { -webkit-transform: scaleY(1.1) rotateX(-10deg); top: 1200px; }
}

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

.shredded-paper {
width: 400px;
height: 300px;
position: absolute;
-webkit-perspective: 1000px;
perspective: 1000px;
left: 525px;
top: 20px;
z-index: 5;
}

.shredded-paper > div[class^='part-'] {
height: 100%;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 99;
top: 0;
}

.shredded-paper > .content {
background: #fff;
height: 100%;
overflow: hidden;
box-sizing: border-box;
width: 100%;
-moz-box-sizing: border-box;
position: absolute;
-webkit-transform: translateZ(180px) scale(0.82);
top: 0;
z-index: 9999;
}

.shredded-paper .part-1 {
clip: rect(0,40px,300px,0);
background: #fff;
background: -webkit-radial-gradient(32% 97%, 29% 62%, rgba(0,0,0,0.3), rgba(255, 255, 255, 0)) #fff;
background: radial-gradient(circle at 64% 0% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-2 {
clip: rect(0,80px,300px,40px);
background: #fff;
background: -webkit-radial-gradient(28% 11%, 16% 62%, rgba(0,0,0,0.3), rgba(255,255,255,0)) #fff;
background: radial-gradient(circle at 109% 0% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-3 {
clip: rect(0,120px,300px,80px);
background: #fff;
background: -webkit-radial-gradient(12% 88%, 23% 62%, rgba(0,0,0,0.3), rgba(255,255,255,0)) #fff;
background: radial-gradient(circle at 167% 173% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-4 {
clip: rect(0,160px,300px,120px);
background: #fff;
background: -webkit-radial-gradient(73% 9%, 65% 52%, rgba(0,0,0,0.3), rgba(255, 255, 255, 0)) #fff;
background: radial-gradient(circle at 118% -54% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-5 {
clip: rect(0,200px,300px,160px);
background: #fff;
background: -webkit-radial-gradient(23% 97%, 29% 62%, rgba(0,0,0,0.3), rgba(255,255,255,0)), -webkit-radial-gradient(72% 20%, 29% 62%, rgba(0,0,0,0.3), rgba(255,255,255,0)) #fff;
background: radial-gradient(circle at 127% 57% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-6 {
clip: rect(0,240px,300px,200px);
background: #fff;
background: -webkit-radial-gradient(85% 97%, 46% 57%, rgba(0,0,0,0.3), rgba(255, 255, 255, 0)) #FFF;
background: radial-gradient(circle at 116% -103% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-7 {
clip: rect(0,280px,300px,240px);
background: #fff;
background: -webkit-radial-gradient(85% 24%, 29% 62%, rgba(0,0,0,0.3), rgba(255,255,255,0)) #fff;
background: radial-gradient(circle at 155% 143% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-8 {
clip: rect(0,320px,300px,280px);
background: #fff;
background: -webkit-radial-gradient(104% 93%, 46% 52%, rgba(0,0,0,0.3), rgba(255, 255, 255, 0)) #FFF;
background: radial-gradient(circle at 241% 154% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-9 {
clip: rect(0,360px,300px,320px);
background: #fff;
background: -webkit-radial-gradient(39% 18%, 73% 52%, rgba(0,0,0,0.3), rgba(255, 255, 255, 0)) #FFF;
background: radial-gradient(circle at 170% -219% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}
.shredded-paper .part-10 {
clip: rect(0,400px,300px,360px);
background: #fff;
background: -webkit-radial-gradient(77% 97%, 29% 62%, rgba(0,0,0,0.3), rgba(255,255,255,0)) #fff;
background: radial-gradient(circle at 217% 150% , rgb(134, 134, 134), rgba(255, 255, 255, 0)) repeat scroll 0% 0% rgb(255, 255, 255);
}

.shredder-holder {
position: relative;
top: 350px;
left: 500px;
width: 450px;
}

.shredder {
font-weight: bold;
font-size: 1.7em;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
padding: 33px 0;
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
background: #FF0012;
width: 100%;
border-radius: 2px;
height: 100px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
z-index: 9999999;
background: rgba(176, 189, 186, 1);
text-align: center;
color: #FFF;
}

.shred-me {
font-weight: bold;
background: #61BAFF;
color: #FFF;
cursor: pointer;
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 18px 10px;
font-size: 1.5em;
position: absolute;
top: 235px;
}

.shred-me:hover {
background: rgb(30, 112, 176);
}

.shred-me:active {
box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}
.alert {
padding: 23px 20px 20px 28px;
border-radius: 100px;
background: #BB4040;
color: #FFF;
font-size: 2.6em;
width: 100px;
height: 100px;
box-sizing: border-box;
-moz-box-sizing: border-box;
margin: 10px auto;
z-index: 999;
position: relative;
top: 52px;
z-index: 999;
position: relative;
top: 52px;
}

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

Старые версии браузера Opera не поддерживают объемные переходы, так что обрезки не будут поворачиваться, но новые версии на движке Webkit поддерживают их.

Надеемся, вам понравился этот урок.

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

Опубликовано в css, июня 23, 2014
Метки: css, css-анимация, верстка, урок css, урок верстка

�

Создание измельчителя бумаги с кнопкой удаления при помощи CSS3

Как же мы это сделаем?

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые