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

от автора

image

Сегодня я хотел бы поделиться с Вами коллекцией необычных переходов страниц. Мы собрали несколько анимаций, которые могут быть применены к «страницам» для создания интересных эффектов навигации при переходе на новую страницу. Некоторые эффекты очень упрощенны, то есть используют простое перемещение, другие используют перспективу и 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;   // ... 

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

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

ссылка на оригинал статьи http://habrahabr.ru/post/180471/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *