Интересный эффект шредера с помощью CSS3 | RUDEBOXЕсли вам необходимо организовать красивое уничтожение каких либо бумаг на сайте, к примеру, вам необходимо очистить корзину покупок в весьма нестандартном интернет-магазине, ведь дизайн данного шредера весьма специфичный, то данная реализация весьма порадует взор. В данном уроке мы рассмотрим как создать весьма интересный измельчитель бумаги реализованный с помощью трансформаций CSS3 Clip. Кроме этого мы добавили jQuery  для запуска анимации при нажатии на кнопку “измельчить”. Мы можем сделать анимацию без каких-либо скриптов jQuery, но нам необходимо точно контролировать процесс измельчения.

У нас есть блок с содержимым и мы хотим разрезать его на 10 полосок. Нам поможет свойство CSS clip. Оно определяет область элемента, в котором будет показано его содержимое. Всё, что не вошло в эту область – обрезается. Область задаётся несколькими числами, которые вы укажете. И так, давайте приступим.

Шаг 1. HTML

Данная HTML-разметка будет состоять с одинаковой структуры для каждой полоски. Блок с классом content является нашей оболочкой, а все остальные блоки – это как раз полоски:

С разметкой все достаточно понятно,давайте перейдем к следующему шагу.

Интересный эффект шредера с помощью CSS3 RUDEBOX

Шаг 2. CSS

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

Итак, shredShake 0.12s 26 0.5s говорит о том, что нужно выполнить анимацию с именем shredShake за 0.12 секунды, повторить 26 раз с задержкой в 0.5 секунды.
Контроль над анимацией выполняется с помощью ключевых кадров (keyframes) и, т.к. браузеры на webkit требуют свой префикс, мы будем использовать две версии каждой анимации(да, меня это тоже раздражает).

Теперь нам необходимо все это красиво оформить:

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

Шаг 3. JS

Последним шагом будет написание небольшого javascript-кода, который будет запускать анимацию и добавлять нужные классы к элементам:

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

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

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