Viewport-Action
Плагин для создания эффектых лейдинг страниц. Добавляет динамику для элементов при появлении их в области просмотра.
###Использование
- Подключить jQuery
- Подключить файлы плагина jquery.viewportaction.js и effect.css
- Вызвать плагин, где elem - ваш элемент
$('elem').viewportaction({})
####Деление страницы на блоки соответсвующие области видимости
- Объединить элемент единым классом, например .row
- Вызвать плагин с параметром oneRowViewport в значении true
$('.row').viewportaction({ oneRowViewport: true})
####Создание навигации по блокам
- Для блоков добавить служебный атрибут data-nav-viewport со значением true
data-nav-viewport="true" - Для блоков добавить атрибут data-nav-viewport-title со значением, которые вы хотите видеть в качестве текста в навигации к текущему блоку
data-nav-viewport-title="Секрет успеха"
(Навигации работает только при если параметр oneRowViewport установлен в true.)
###Параметры Список доступных параметров:
| Параметр | Описание | Тип |
|---|---|---|
| effect | Эффект, который будет применен к элементу | Строка |
| offsetTop | На сколько px элемент должен войти в область просмотра, чтобы начать анимацию | Число |
| repeat | Будет ли анимация повторятся, если скролить страницу несколько раз | Boolean |
| customClass | Пользовательский класс для более гибкой настройки анимации | Строка |
| oneRowViewport | Деление страницы на блоки соответсвующие области видимости | Boolean |
| viewportNav | Включить навигацию по блокам страницы | Boolean |
| scrollSpeed | Скорость скролла по блокам страницы | Число |
###Доступные эффекты Список доступных эффектов:
| Эффект | Описание |
|---|---|
| fade | Плавное появление элемента |
| fadeTop | Плавное появление элемента сверху |
| fadeBottom | Плавное появление элемента снизу |
| fadeLeft | Плавное появление элемента слева |
| fadeRight | Плавное появление элемента справа |
###Демонстрация
Пример смотреть здесь