Расширение параллакс

Прочтите раздел Использование расширений перед использованием опции параллакс.

Живое демо
Необходимая HTML-структура
Добавление фона
Опции
- Эффекты параллакс
Функции

Необходимая HTML-структура

Чтобы использовать эффект параллакс в разделах и слайдах, необходимо добавить новый элемент с классом fp-bg. Это должен быть пустой div, который следует разместить как первый дочерний элемент раздела или слайда. Например:

<div class="fp-bg"></div>

Это будет элемент, к которому вы должны будете добавить фон, вместо добавления его к разделу или слайдам, где он должен отобразиться.

Например:

<div id="fullpage">
    <div class="section" id="section1">
        <div class="fp-bg"></div>
        Слайд 1.1
    </div>
    <div class="section" id="section2">
        <div class="slide" id="slide2-1">
            <div class="fp-bg"></div>
            Слайд 2.1
        </div>
        <div class="slide" id="slide2-2">
            <div class="fp-bg"></div>
            Слайд 2.2
        </div>
    </div>
</div>

Данную структуру можно увидеть в исходном коде демо-страницы параллакс.

Если по какой-либо причине вы не желаете добавлять новый элемент в вашу разметку, вы можете установить опцию property в parallaxOptions для background, чтобы применить эффект к фону текущего раздела или слайда. Как объясняется в параграфе Эффекты параллакс, я рекомендую делать это только в случае крайней необходимости, так как воспроизведение будет не таким, как при использовании элементов fp-bg.

Добавление фона

Фон должен добавляться к элементу fp-bg точно так же, как вы добавляли бы его к разделу или слайду. Вы можете использовать CSS или встроенные стили.

Например:

#section1 .fp-bg{
    background-image: url('imgs/alvaro-genious.jpg');
    background-size: cover;
    background-position: center 80%;
}

Опции

Опция	Описание
parallax	(по умолчанию: `false`). Расширение fullPage.js. Определяет, будут ли использоваться эффекты параллакс для фона разделов / слайдов.
parallaxOptions:	(по умолчанию: `{ type: 'reveal', percentage: 62, property: 'translate'}`). Позволяет изменять параметры эффекта параллакс для фона при использовании опции `parallax:true`.

Эффекты параллакс

Вы можете увидеть их в действии на демо-странице

Описание изменяемых опций, доступных в parallaxOptions:

parallaxOptions	Описание
type	(по умолчанию: `reveal`) Возможные значения `cover` и `reveal`. Обеспечивает возможность выбрать, будет ли текущий раздел/слайд отображаться выше или ниже заданного. При использовании `cover` следующий раздел или слайд появится, закрывая часть текущего. Использование `reveal` произведёт обратный эффект и закроет часть заданного при его отображении.
percentage	(по умолчанию: 62 ) обеспечивает возможность определить процентное соотношение эффекта параллакс к окну просмотра. Меньшее значение даст меньший эффект параллакс, а значение 100, являющееся максимальным, даст полностью статичные фоны.
property	Определяет, применять ли эффект параллакс к элементу `fp-bg` или непосредственно к свойству фона раздела или слайда. Для этой опции рекомендуется использовать значение по умолчанию.

Обратите внимание, что использование элемента fp-bg обеспечивает лучшее воспроизведение, так как в этом случае используется аппаратное ускорение translate3d. Опция пригодится тем, кто по тем или иным причинам не желает добавлять элемент fp-bg в каждом разделе или слайде или просто не может изменить HTML-разметку.

Функции

Вы можете увидеть их в действии на демо-странице

setOption(optionName, значение)

Устанавливает значение для данной опции. optionName может быть любой из опций, доступных в parallaxOptions. (type, percentage или property).

//изменение значения для свойства `type`
fullpage_api.parallax.setOption('type', 'cover');

//изменение значения для свойства `percentage`
fullpage_api.parallax.setOption('percentage', '30');

init()

Активирует эффект параллакс. Функция полезна, если вам необходимо активировать эффект в динамическом режиме в определённый момент.

fullpage_api.parallax.init();

destroy()

Отключает эффект параллакс.

fullpage_api.parallax.destroy();

7.4 KiB Raw Permalink Blame History