Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

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


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


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

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

    Всю CSS – анимацию, мы поделили на группы, выполняющие свои уникальные действия.

    Пожалуйста, обратите внимание, что данный пример, будет работать лишь в тех браузерах, в которых поддерживаются необходимые CSS свойства.

    HTML

    Для демонстрации переходов страниц, мы использовали следующую разметку:

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

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

    Блок «.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;
 
// ...

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

    Я надеюсь, что вам понравится это, вы вдохновитесь, и создадите что-то необычное исходя из данного примера! Будем ждать ваших результатов в комментариях к этой статье =)

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 10.05.2013
Опубликовал: Сергей Кашурин
Просмотров: 1175
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!
BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: