Сегодня мы рассмотрим интересные и эффектные переходы страниц, которые можно применить для создания необычной навигации.
Обратите внимание, что данный пример, будет работать лишь в тех браузерах, в которых поддерживаются необходимые CSS3 свойства.
HTML код
Для демонстрации переходов страниц нам понадобится следующая HTML разметка. Выполним ее в следующем виде:
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1">
<h1><span>Коллекция</span> <strong>Переходов</strong> на страницу</h1>
</div>
<div class="pt-page pt-page-2"><!-- ... --></div>
<!-- ... -->
</div>
CSS стили
К контейнеру с классом pt-perspective
добавим свойство перспективы со значением 1200px. Остальные стили необходимы для анимации (мы опустили браузерные префиксы, чтобы минимизировать код на странице. Не забудьте их добавить сами):
.pt-perspective {
position: relative;
width: 100%;
height: 100%;
perspective: 1200px;
transform-style: preserve-3d;
}
.pt-page {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
visibility: hidden;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.no-js .pt-page,
.pt-page-current{
visibility: visible;
}
.no-js body {
overflow: auto;
}
.pt-page-ontop {
z-index: 999;
}
Блок .pt-page-ontop
благодаря большому значению z-index всегда будет находиться поверх остальных блоков, поэтому наша навигация всегда будет видимой.
Далее давайте познакомимся с классами анимации и ключевыми кадрами, с помощью которых мы будем изменять направление анимации, масштаб и степень прозрачности:
/* масштабирование и прозрачность */
.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); }
}
Без jQuery никуда
В целях демонстрации работы примера, давайте разберем следующий код, в котором к текущей и следующей странице, применяются соответствующие классы:
//...
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;
// ...
Взгляните на демонстрационные примеры, чтобы увидеть коллекцию переходов страниц. Тот, или иной переход можно выбоать в выпадающем меню демо-навигации.