Библиотека анимационных эффектов перехода, основанная на анимации CSS.
В файле для скачивания находятся 11 примеров переходов, я в днмонстрации хочу показать один из них.
Как использовать эффекты перехода
Мы создали отдельный файл html для каждого эффекта. Обратите внимание на класс, примененный к тегу <body>, который мы использовали в CSS для таргетинга на конкретный эффект.
<!doctype html>
<html lang="en" class="no-js">
<head>
<!-- ... -->
<title>Cartoon Transition Effect | CodyHouse</title>
</head>
<body class="cartoon-transition">
<main class="cd-main-content">
<!-- ... -->
</main>
<div class="cd-modal" id="modal-1">
<!-- ... -->
</div>
<div class="cd-transition-layer" data-frame="25">
<div class="bg-layer"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
if( !window.jQuery ) document.write('<script src="js/jquery-2.2.1-min.js"><\/script>');
</script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>Файл CSS организован в разных разделах. Для перехода к правильной работе вам необходимо включить стиль, общий для всех эффектов, стиль пользовательских эффектов и ключевые кадры для управления анимацией.
/* --------------------------------
Shared style
-------------------------------- */
.cd-btn {
display: inline-block;
padding: 1.6em 2.4em;
font-size: 1.4rem;
letter-spacing: .15em;
font-weight: 700;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: box-shadow .3s;
/*...*/
}
/* --------------------------------
Scrub Effect - Custom effect style
-------------------------------- */
.scrub-transition {
font-family: "PT Sans", sans-serif;
color: #2c1a32;
/*...*/
}
/* --------------------------------
Animations - remember to check the animation name to copy the correct keyframes
-------------------------------- */
@keyframes cd-sequence {
0% {
/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
transform: translateY(-50%) translateX(-2%);
}
100% {
/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
transform: translateY(-50%) translateX(-98%);
}
}Если вы хотите изменить цвет переходов, все, что вам нужно сделать, это импортировать спрайты изображений PNG в графический инструмент и изменить цвет заполненной области. Например, в Photoshop вы можете использовать стили слоя для применения наложения цвета. После редактирования изображения просто сохраните его в формате PNG. Если вас беспокоит размер, tinypng.com - отличный инструмент для сжатия изображений PNG.
