Апрель 27, 2015 Запись была обновлена
Красивые переходы между страницами
Сегодня мы создадим красивый эффект при прокрутке страницы. А точнее переходы между страницами, но это не отдельные HTML страницы, а блоки(контейнеры) на одной странице, которые будут красиво исчезать и появляться при скролле страницы. Данный плагин будет полезен тем, кто хочет красиво организовать галерею на сайте. Также с помощью данного плагина можно сделать красивое оформление новостей, тогда читать их станет намного приятнее, а сайту с таким эффектом это придаст оригинальности.
Реальный пример можно увидеть здесь:
Посмотреть примерСкачать
Как пользоваться? — Красивые переходы между страницами
HTML часть
Для начала нужно скачать библиотеку jQuery(здесь) и плагин jQuery.tiltedpage_scroll.js со стилями(здесь), а затем подключить:
1 2 3 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="js/jquery.tiltedpage-scroll.js"></script> <link rel="stylesheet" type="text/css" href="css/tiltedpage-scroll.css" /> |
HTML код следующий:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> .. <div class="main"> <section class="page1"> ... </section> <section class="page2"> ... </section> ... <section class="last-page"> ... </section> </div> .. </body> |
Класс для элемента <section> является необязательным, но с его помощью можно легко в дальнейшем задать стили соответствующему блоку.
jQuery часть
И для того чтобы эти все блоки красиво представить, необходимо написать небольшую функцию:
1 2 3 4 5 6 7 | $(".main").tiltedpage_scroll({ sectionContainer: "> section", angle: 50, opacity: true, scale: true, outAnimation: true }); |
Пояснение свойств, которые используются в функции:
- sectionContainer — это блок, в котором находится всё содержимое одной «страницы». По умолчанию это элемент <section>.
- angle — угол, под которым будут появляться предыдущая и следующая «страница». По умолчанию данное значение равно 50.
- opacity — прозрачность блока перед полным появлением. Когда новая «страница» появляется, постепенно изменяется ее прозрачность. Вы можете изменить данное значение на false. По умолчанию стоит true.
- scale — масштаб при появлении. «Страница» вместе с тем как появляется еще и одновременно изменяется в масштабе. Вы можете отключить это свойство выставив значение false. По умолчанию стоит значение true.
- outAnimation — анимация при исчезновении «страницы». По умолчанию она включена, но ее можно выключить выставив значение false.
Вывод
Данный плагин, как я уже говорил в начале, можно использовать для создания красивой и креативной галереи на сайте. Но также с помощью ее можно оформить вывод новостей. Конечно не всем сайтам подойдет данный формат.
Успехов!
Источник: http://www.onextrapixel.com/2014/03/13/create-a-cool-3d-tilted-layout-with-tilted-page-scroll/
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Да у вас тут целая энциклопедия полезностей! Буду заходить почаще 😉
Спасибо! Конечно заходите 🙂 .
А я здесь уже почти живу!… правда я только учусь. 😳 😳 😳
блин, у меня страница получилась больше разрешения экрана..около 2000px..как сделать, чтоб он начал анимацию после того, как страница закончится, а не сразу, когда она достигнет верхнего края монитора?.