Эффекты переходов для страниц сайта на CSS

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

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

Шаг 1. HTML
Нам необходимо организовать разметку, которая нам понадобиться для отображения демонстрации:

Код
<div id="pt-main" class="pt-perspective">
  <div class="pt-page pt-page-1">
  <h1><span>Коллекция</span><strong>Page</strong> переходов</h1>
  </div>
  <div class="pt-page pt-page-2"><!-- ... --></div>
  <!-- ... -->
</div>

Шаг 2. CSS
Теперь рассмотрим стили, у нас есть контейнер с классом «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;
}

Шаг 3. jQuery
Для правильного отображения демонстрации нам понадобится небольшой код 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;

// ...

Я надеюсь, что Вы нашли подходящий для себя эффект.

  • FalleN

  • 7486

  • 1

  • 325

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!