Красиві переходи між сторінками

Сьогодні ми створимо гарний ефект при прокручуванні сторінки. А точніше переходи між сторінками, але це не окремі HTML сторінки, а блоки (контейнери) на одній сторінці, які будуть красиво зникати і з`являтися при Скролл сторінки. Даний плагін буде корисний тим, хто хоче красиво організувати галерею на сайті. Також за допомогою даного плагіна можна зробити красиве оформлення новин, тоді читати їх стане набагато приємніше, а сайту з таким ефектом це додасть оригінальності.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися? - Красиві переходи між сторінками

HTML частина

Для початку потрібно скачати бібліотеку jQuery (тут) І плагін jQuery.tiltedpage_scroll.js зі стилями (тут), А потім підключити:

Відео: 131 - Spring. Перехід між сторінками

123

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.tiltedpage-scroll.js"gt; lt;/scriptgt;lt;link rel="Stylesheet" type="Text / css" href="Css / tiltedpage-scroll.css" /gt;

Відео: Блискавична AJAX завантаження сторінок сайту з jQuery PJAX

HTML код наступний:

1234567891011121314151617

lt;bodygt; ..lt;div class="Main"gt;
class="Page1"gt; ...lt;/sectiongt;
class="Page2"gt; ...lt;/sectiongt; ...
class="Last-page"gt; ...lt;/sectiongt;lt;/divgt; ..lt;/bodygt;

Клас для елемента є необов`язковим, але з його допомогою можна легко надалі поставити стилі відповідному блоку.

jQuery частина

І для того щоб ці всі блоки красиво представити, необхідно написати невелику функцію:

Відео: PowerPoint Анімація в PowerPoint

1234567

$(".main").tiltedpage_scroll({sectionContainer: "Gt; section",angle: 50,opacity: true,scale: true,outAnimation: true})-

Пояснення якостей, які використовуються у функції:

Відео: ГАРНИЙ ПЕРЕХІД ЗА 1 ХВИЛИНУ // AFTER EFFECTS // ПОСИЛАННЯ ОНОВЛЕНА

• sectionContainer - це блок, в якому знаходиться весь вміст однієї «сторінки». За замовчуванням це елемент.
• angle - кут, під яким будуть з`являтися попередню і наступну «сторінка». За замовчуванням це значення дорівнює 50.
• opacity - прозорість блоку перед повним появою. Коли нова «сторінка» з`являється, поступово змінюється її прозорість. Ви можете змінити це значення на false. За замовчуванням варто true.
• scale - масштаб при появі. «Сторінка» разом з тим як з`являється що й одночасно змінюється в масштабі. Ви можете відключити це властивість виставивши значення false. За замовчуванням стоїть значення true.
• outAnimation - анімація при зникненні «сторінки». За замовчуванням вона включена, але її можна вимкнути виставивши значення false.

висновок

Даний плагін, як я вже говорив на початку, можна використовувати для створення красивої і креативної галереї на сайті. Але також за допомогою її можна оформити висновок новин. Звичайно не всім сайтам підійде даний формат.

Успіхів!

джерело: https://onextrapixel.com/2014/03/13/create-a-cool-3d-tilted-layout-with-tilted-page-scroll/