Раздельчики: AppleApple SEO Smashing JournalSmashing Journal ДизайнДизайн Для вдохновениеДля вдохновение НовостиНовости Социальные сетиСоциальные сети СтартапыСтартапы ТехногретТехногрет

Делаем красивые переходы между страницами

Всем доброе утро! Сегодня я хочу вам показать небольшой скрипт, который делает крутые переходы между страницами сайта. Мы взяли один небольшой скрипт, который включает в себя различные вариации переходов между страницами. Переходы в данном скрипте очень разнообразные, начиная от простых перемещений (вертикальных и горизонтальных) и заканчивая 3D трансформацией.

Посмотреть демо


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

A collection ofPage Transitions

Потом добавляем в наш CSS файл:

.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;
}

Добавляем различные параметры эффектов в виде CSS:

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

Также рекомендую зайти на сайт и посмотреть полное демо и вы сами увидите, сколько различных переходов включает данный скрипт. Ну и увидите его в работе.

Посмотреть демо | Скачать

P.S. А кто-нибудь может посоветовать на сайт online консультант бесплатный? Приведите примеры. Нужен бесплатный.

Метки: ,

Опубликовал: Дизайнер от 22 Май 2013 в 12:09

  • Roman

    Не нужно вводить людей в заблуждение! Эт не переход между страницами! Это всего лишь переход между блоками на одной странице.

  • shame

    Полное говно