De promotiewebsite die de reguliere site vervangt tijdens de Kick-In.
https://join.harambee.utwente.nl
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
7.4 KiB
108 lines
7.4 KiB
6 years ago
|
# Расширение параллакс
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
Прочтите раздел [Использование расширений](https://github.com/alvarotrigo/fullPage.js/tree/dev/lang/russian#%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D0%B9) перед использованием опции параллакс.
|
||
|
|
- [Живое демо](http://alvarotrigo.com/fullPage/extensions/parallax.html)
|
||
|
|
- [Необходимая HTML-структура](#Необходимая-html-структура)
|
||
|
|
- [Добавление фона](#Добавление-фона)
|
||
|
|
- [Опции](#Опции)
|
||
|
|
- [Эффекты параллакс](#Эффекты-параллакс)
|
||
|
|
- [Функции](#Функции)
|
||
|
|
|
||
|
|
## Необходимая HTML-структура
|
||
|
|
Чтобы использовать эффект параллакс в разделах и слайдах, необходимо добавить новый элемент с классом `fp-bg`. Это должен быть пустой `div`, который следует разместить как первый дочерний элемент раздела или слайда. Например:
|
||
|
|
```html
|
||
|
|
<div class="fp-bg"></div>
|
||
|
|
```
|
||
|
|
|
||
|
|
Это будет элемент, к которому вы должны будете добавить фон, вместо добавления его к разделу или слайдам, где он должен отобразиться.
|
||
|
|
|
||
|
|
Например:
|
||
|
|
```html
|
||
|
|
<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>
|
||
|
|
```
|
||
|
|
|
||
|
|
Данную структуру можно увидеть в исходном коде [демо-страницы параллакс](http://alvarotrigo.com/fullPage/extensions/parallax.html).
|
||
|
|
|
||
|
|
> Если по какой-либо причине вы не желаете добавлять новый элемент в вашу разметку, вы можете установить опцию `property` в `parallaxOptions` для `background`, чтобы применить эффект к фону текущего раздела или слайда.
|
||
|
|
> Как объясняется в параграфе Эффекты параллакс, я рекомендую делать это только в случае крайней необходимости, так как воспроизведение будет не таким, как при использовании элементов `fp-bg`.
|
||
|
|
|
||
|
|
<br>
|
||
|
|
|
||
|
|
## Добавление фона
|
||
|
|
Фон должен добавляться к элементу `fp-bg` точно так же, как вы добавляли бы его к разделу или слайду.
|
||
|
|
Вы можете использовать CSS или встроенные стили.
|
||
|
|
|
||
|
|
Например:
|
||
|
|
|
||
|
|
```css
|
||
|
|
#section1 .fp-bg{
|
||
|
|
background-image: url('imgs/alvaro-genious.jpg');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center 80%;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
## Опции
|
||
|
|
|
||
|
|
| Опция | Описание |
|
||
|
|
| ------------- | ------------- |
|
||
|
|
| **parallax** | (по умолчанию: `false`). [Расширение fullPage.js](http://alvarotrigo.com/fullPage/extensions/). Определяет, будут ли использоваться эффекты параллакс для фона разделов / слайдов. |
|
||
|
|
| **parallaxOptions:** | (по умолчанию: `{ type: 'reveal', percentage: 62, property: 'translate'}`). Позволяет изменять параметры эффекта параллакс для фона при использовании опции `parallax:true`. |
|
||
|
|
<br>
|
||
|
|
|
||
|
|
### Эффекты параллакс
|
||
|
|
Вы можете увидеть их в действии [на демо-странице](http://alvarotrigo.com/fullPage/extensions/parallax.html)
|
||
|
|
|
||
|
|
Описание изменяемых опций, доступных в `parallaxOptions`:
|
||
|
|
|
||
|
|
| parallaxOptions | Описание |
|
||
|
|
| ------------- | ------------- |
|
||
|
|
| **type** | (по умолчанию: `reveal`) Возможные значения `cover` и `reveal`. Обеспечивает возможность выбрать, будет ли текущий раздел/слайд отображаться выше или ниже заданного. При использовании `cover` следующий раздел или слайд появится, закрывая часть текущего. Использование `reveal` произведёт обратный эффект и закроет часть заданного при его отображении. |
|
||
|
|
| **percentage** | (по умолчанию: 62 ) обеспечивает возможность определить процентное соотношение эффекта параллакс к окну просмотра. Меньшее значение даст меньший эффект параллакс, а значение 100, являющееся максимальным, даст полностью статичные фоны. |
|
||
|
|
| **property** | Определяет, применять ли эффект параллакс к элементу `fp-bg` или непосредственно к свойству фона раздела или слайда. Для этой опции рекомендуется использовать значение по умолчанию.
|
||
|
|
|
|
||
|
|
|
||
|
|
Обратите внимание, что использование элемента `fp-bg` обеспечивает лучшее воспроизведение, так как в этом случае используется аппаратное ускорение translate3d. Опция пригодится тем, кто по тем или иным причинам не желает добавлять элемент `fp-bg` в каждом разделе или слайде или просто не может изменить HTML-разметку.
|
||
|
|
|
||
|
|
## Функции
|
||
|
|
Вы можете увидеть их в действии [на демо-странице](http://alvarotrigo.com/fullPage/extensions/parallax.html)
|
||
|
|
|
||
|
|
### setOption(optionName, значение)
|
||
|
|
Устанавливает значение для данной опции. `optionName` может быть любой из опций, доступных в `parallaxOptions`. (`type`, `percentage` или `property`).
|
||
|
|
```javascript
|
||
|
|
//изменение значения для свойства `type`
|
||
|
|
fullpage_api.parallax.setOption('type', 'cover');
|
||
|
|
|
||
|
|
//изменение значения для свойства `percentage`
|
||
|
|
fullpage_api.parallax.setOption('percentage', '30');
|
||
|
|
```
|
||
|
|
---
|
||
|
|
|
||
|
|
### init()
|
||
|
|
Активирует эффект параллакс. Функция полезна, если вам необходимо активировать эффект в динамическом режиме в определённый момент.
|
||
|
|
```javascript
|
||
|
|
fullpage_api.parallax.init();
|
||
|
|
```
|
||
|
|
---
|
||
|
|
### destroy()
|
||
|
|
Отключает эффект параллакс.
|
||
|
|
```javascript
|
||
|
|
fullpage_api.parallax.destroy();
|
||
|
|
```
|