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

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

Размер контейнера рассчитан на 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;

// ...

Взгляните на демо для большего эффекта. Надеюсь данная коллекция вам пригодится!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/jnMKoEcz43E/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Коллекция эффектов переходов для страниц | | 2013-06-16 01:38:42 | | Статьи Web-мастеру | | Сегодня мы хотим поделиться с вами набором анимаций для ваших страниц. Получилась довольно-таки интересная коллекция, которую вы можете использовать в своих нуждах. Эффекты есть как и простенькие, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: