—»     —»   Подборка переходов между страницами
  Раздел: Руководства   Комментариев: 1  

Подборка переходов между страницами



Сегодня мы хотим поделиться с вами подборкой с креативными эффектами перехода между страницами. Здесь мы собрали несколько анимаций, которые можно применять к «страницам» для создания интересных эффектов при переходах. Хотя некоторые эффекты очень простые (например, скольжение), в других используется перспектива и 3d transforms для создания эффекта глубины и динамичности.

Подборка переходов между страницами

Пожалуйста, учтите, что данная подборка была опубликована только лишь как источник вдохновения. Это не слайдер или что-то вроде того. Мы просто применили отдельные классы, чтобы навигация по страницам происходила наглядно.

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 используется для некоторых переходов между страницами, когда нам нужно, чтобы страницы оставались поверх всего остального.

Примерами классов анимации и анимаций ключевых кадров являются те эффекты, где страницы перелистываются в разных направлениях, либо появляются и исчезают:

/* scale and fade */

.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 ************/

/* scale and fade */

@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;

// ...

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

Надеемся, вам понравилось это руководство, и помогло вам придумать кое-что для собственных проектов!

Посмотреть демо | Скачать исходник
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 9388   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 мая 2015 @ 09:17
Написал: Иван — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо очень полезный ресурс!!!
подскажите как сделать отдельную ссылку на каждую страницу
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930