Коллекция переходов страниц

Сегодня я хотел бы поделиться с Вами коллекцией необычных переходов страниц. Мы собрали несколько анимаций, которые могут быть применены к «страницам» для создания интересных эффектов навигации при переходе на новую страницу. Некоторые эффекты очень упрощенны, то есть используют простое перемещение, другие используют перспективу и 3D-преобразования для создания некоторой глубины и динамики.

Демо
Исходные файлы

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> 

Контейнер с классом pt-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;   // ... 

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

Демо
Исходные файлы