Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> 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
Опубликовал: Сергей Кашурин
Просмотров: 1176
Правила перепечатки

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

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

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


24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
arcticModal - простые модальные окна jQuery
В поисках простого плагина для создания модальных окон, я перепробовал кучу вариантов, наткнувшись на arcticModal я остановился. Простота работы, вес самого плагина меня очень порадовали, поэтому поделюсь с вами я именно им, так как сам его проверял.
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.

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

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

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

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

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

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

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