Сегодня мы хотим поделиться с вами подборкой креативных страничных переходов. Мы сложили вместе пару анимаций, применимых с целью создания интересных навигационных эффектов при открытии новой страницы. Тогда как некоторые из них очень упрощены, например, обычный сдвиг, в других для создания глубины и динамики применяются перспективы и 3d-преобразования.
Пожалуйста, обратите внимание, что это просто для показа интересных вдохновляющих эффектов. Это не слайдер или его подобие. Мы применим несколько классов не для навигации, а просто для того, чтобы переход страницы был видимым.
Анимация CSS делится на разные наборы в зависимости от того, что она делает.
Пожалуйста, заметьте: эффекты работают так, как положено, только в браузерах, поддерживающих соответствующие свойства CSS.
Для демонстрации страничных переходов мы использовали следующую структуру:
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1">
<h1><span>A collection of</span><strong>Page</strong> Transitions</h1>
</div>
<div class="pt-page pt-page-2"><!-- ... --></div>
<!-- ... -->
</div>
Контейнер perspective относителен, и мы добавляем в него perspective в 1200px. Для работы анимации потребуются следующие стили:
.pt-perspective {
position: relative;
width: 100%;
height: 100%;
perspective: 1200px;
transform-style: preserve-3d;
}
.pt-page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.pt-page-current,
.no-js .pt-page {
visibility: visible;
}
.no-js body {
overflow: auto;
}
.pt-page-ontop {
z-index: 999;
}
.pt-page-ontop применяется в некоторых переходах, где требуется, чтобы одна страница оставалась над другой.
Примеры классов анимации и анимации ключевого кадра – следующие, которые масштабируют страницы в различных направлениях и постепенно проявляют или убирают их:
/* масштабирование и проявление */
.pt-page-scaleDown {
animation: scaleDown .7s ease both;
}
.pt-page-scaleUp {
animation: scaleUp .7s ease both;
}
.pt-page-scaleUpDown {
animation: scaleUpDown .5s ease both;
}
.pt-page-scaleDownUp {
animation: scaleDownUp .5s ease both;
}
.pt-page-scaleDownCenter {
animation: scaleDownCenter .4s ease-in both;
}
.pt-page-scaleUpCenter {
animation: scaleUpCenter .4s ease-out both;
}
/************ ключевые кадры ************/
/* масштабирование и проявление */
@keyframes scaleDown {
to { opacity: 0; transform: scale(.8); }
}
@keyframes scaleUp {
from { opacity: 0; transform: scale(.8); }
}
@keyframes scaleUpDown {
from { opacity: 0; transform: scale(1.2); }
}
@keyframes scaleDownUp {
to { opacity: 0; transform: scale(1.2); }
}
@keyframes scaleDownCenter {
to { opacity: 0; transform: scale(.7); }
}
@keyframes scaleUpCenter {
from { opacity: 0; transform: scale(.7); }
}
Для этой демонстрации к текущей странице и следующей за ней мы применяем соответствующие классы анимации. Например:
//...
case 17:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromRight pt-page-ontop';
break;
case 18:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromLeft pt-page-ontop';
break;
case 19:
outClass = 'pt-page-scaleDown';
inClass = 'pt-page-moveFromBottom pt-page-ontop';
break;
// ...
Посмотрите демо-пример, где с помощью первой кнопки повторяется целый набор переходов страниц. Кроме того, из выпадающего меню можно выбрать отдельный эффект.
Надеюсь, вам понравится эта статья и вдохновит на создание чего-нибудь впечатляющего!
Автор: Pedro Botelho
Источник:
http://tympanus.net/