Лого SiteHere.ru

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

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

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

4 комментария к записи
  • Vlad

    Да у вас тут целая энциклопедия полезностей! Буду заходить почаще 😉

     
    • Юрий

      Спасибо! Конечно заходите 🙂 .

       
      • Сергей

        А я здесь уже почти живу!… правда я только учусь. 😳 😳 😳

         
  • Евгений

    блин, у меня страница получилась больше разрешения экрана..около 2000px..как сделать, чтоб он начал анимацию после того, как страница закончится, а не сразу, когда она достигнет верхнего края монитора?.

     

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *