Data stellar background ratio

Data stellar background ratio

Одним из самых обсуждаемых трендов в веб-дизайне является параллакс-скроллинг. Нравится вам это или нет, но параллакс использует множество веб-сайтов. В этой статье я познакомлю вас с основами параллакс-скроллинга и покажу как можно создать параллакс-скроллинг, используя jQuery плагин Stellar.js.

Что такое параллакс-скроллинг?

Параллакс-скролллинг включает фон, движущийся со скоростью отличной от скорости контента, создавая при прокрутке страницы 3D-эффект. Этот эффект может быть отличным дополнением к любому сайту, но, к сожалению, при злоупотреблении вызывающий раздражение. Время от времени попадаются сайты полностью построенные на этом эффекте и, как правило, опыт работы с такими сайтами не очень располагает. И все потому, что параллакс-эффект обычно анимирует изображения в фоне, при этом полный вес сайта сильно увеличивается и как результат сайт медленно загружается.

Некоторые примеры таких злоупотреблений, на мой взгляд, the Saukoni website that presented the Kinvara 3 и Oakley – I am invincible website, чей все около 20 Мб (раньше было приблизительно 50 Мб!).

Теперь, когда вы имеете представление о том как выглядит этот эффект, давайте посмотрим как мы можем использовать Stellar.js, чтобы воссоздать его.

Что такое Stellar.js

Stellar.js — это jQuery плагин, который позволяет вам легко добавить параллакс-скроллинг эффект к вашему сайту. Несмотря на то что проект больше не поддерживается, плагин по-прежнему стабилен и совместим с последними версиями jQuery; используется разработчиками для своих сайтов. Этот jQuery плагин популярен в реестре jQuery плагинов, и вы, вероятно, уже слышали о нем.

Сейчас, после описания работы плагина, давайте рассмотрим, как вы можете использовать его на вашем сайте.

Приступая к работе с Stellar.js

Начать работы со Stellar.js довольно просто. Сперва скачайте плагин и подключите его к вашей странице.

Теперь ваша страница готова к работе с плагином для реализации паралакс-эффекта. Плагин позволяет применить эффект к любому прокручиваемому элементу на странице, например, к объекту window и т.д.. Для этого выбираем элемент при помощи jQuery и затем на нем вызываем метод stellar() .

Минимальный код, который использует данную библиотеку для объекта window, показан ниже:

jQuery

Для объекта window библиотека также обеспечивает краткую запись:

jQuery

В этом случае библиотека будет искать любые параллакс фоны или элементы внутри заданного элемента и изменять их позицию при скроллинге элемента.

Если вы хотите увидеть работу плагина Stellar.js по реализации параллакс-эффекта при скроллинге страницы, то взгляните на это.

Настройки

Stellar.js, как и многие другие плагины, хорошо управляем. Фактически вы можете установить несколько параметров и настроить плагин в зависимости от ваших потребностей. Stellar.js позволяет вам установить как общие настройки для всех элементов, так и настройки для каждого элемента в отдельности. Общие настройки передаются методу stellar(); опции для конкретного элемента устанавливаются посредством data-* атрибутов (атрибут data). В этой секции я не буду рассматривать все возможные опции, но вы можете прочитать о них в спецификации.

Читайте также:  Autoit как остановить скрипт

Первая основная опция определяет направление эффекта. Классический скроллинг эффект основан на прокрутки сверху вниз или наоборот, но вы можете также указать скроллинг слева направо и наоборот, или оба одновременно. Для этого вы можете использовать два булевых свойства horizontalScrolling и verticalScrolling . Для них значением по умолчанию является true .

Другая интересная опция responsive . Обновляет параллакс контент при загрузки страницы и изменении размеров окна. По умолчанию стоит false .

Последнее опцией, которую стоит рассмотреть, является hideDistantElements . Значение по умолчанию этого свойства true и оно указывает на то, что необходимо скрывать параллакс элементы в случае их нахождения за пределами окна просмотра. Если вы не хотите такого поведения, установите эту опцию в false . (примечание от переводчика: честно говоря я так и не понял работает ли эта опция; кто владеет информацией оставляйте комментарии).

Для отдельных элементов наиболее часто используемым свойством является data-stellar-background-ratio . Это свойство принимает положительное число в качестве значение и позволяет изменить скорость эффекта к конкретному элементу. Например, data-stellar-background-ratio= «0.5» означает, что скорость элемента станет равной половине от фактической скорости прокрутки. Если вы хотите использовать этот атрибут со значением меньше 1-цы, документация предлагает установить background-attachment: fixed; (значение fixed делает фоновое изображение элемента неподвижным: фоновое изображение не прокручивается, в отличие от содержимого элемента) в стилях к элементу.

Зная о том, что делает плагин и как его настроить, приступим к рассмотрению действительного примера.

В этом разделе мы создадим рабочий пример на основе плагина Stellar.js с рассмотренными выше опциями. Сперва гам необходимо создать разметку. В следующем коде мы создаем 6 блоков текстом.

Далее нам необходимо описать CSS с использованием фоновых изображений. Так как для последних 4-х блоков мы используем data-stellar-background-ratio со значением 0.5 , воспользуемся объявлением background-attachment: fixed; .

Финальный CSS выглядит так:

Наконец, нам потребуется запустить эффект через вызов методы stellar() . В этом примере мы также устанавливаем некоторые общие опции:

Живой пример для вышеописанного кода показан ниже:

Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте.

Библиотеку stellar.js качаем здесь, подробную документацию по stellar.js читаем здесь.

Далее подключаем stellar.js для всего документа

Parallax для элементов

Задаем скорость прокрутки для элементов

Задаем соотношение относительно стандартной скорости прокрутки.
Ratio 0.5 приведет к тому, что элемент будет прокручиваться с половинной скорость,
ratio 1 не будет иметь никакого эффекта,
ratio 2 приведет к тому, что элемент будет прокручиваться с удвоенной скоростью.

Если коэффициент меньше 1 вызывает ошибки в отображении элементов на странице, попробуйте задать для этого элемента position: fixed; .

Parallax для фона

Если необходимо, чтобы фоновое изображение прокручивалось вслед за прокруткой страницы, тогда нужно добавить следующий атрибут:

Как и в случае с параллаксом элементов, ratio – это соотношение к стандартной прокрутке.

Для коэффициента меньше 1, чтобы избежать ошибок в отображении фона, лучше установить для background-attachment значение fixed .

Читайте также:  Dying light описание игры

На мобильных телефонах параллакс для фона лучше не использовать.

Кстати background-attachment: fixed на мобильных так же может не сработать из-за сложности вычислений, поэтому нужно для мобильных ( @media (max-width: 768px) ) задать background-attachment: scroll .

Еще одно уточнение, что фоновая картинка должна быть больше по размеру, чем высота блока, в котором она используется.

Чтобы параллакс не срабатывал на мобильных устройствах ( @media (max-width: 768px) ), можно задать для блока свойство background-position: center center !important; .

Когда я тестировал горизонтальный параллакс и Offsets, то у меня возникло много вопросов, но я их отложил на потом и этот плагин использовал только для вертикального параллакса.

Может быть проблемы с IE из-за background-attachment: fixed; – фон может двигаться рывками при скролле.
Нужно использовать отдельные условия для IE:

Примитивный пример для тестирования

HTML

CSS

Подключаем необходимые библиотеки

Getting Started

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. The first step is to run .stellar() against the element:

If you’re running Stellar.js on ‘window’, you can use the shorthand:

This will look for any parallax backgrounds or elements within the specified element and reposition them when the element scrolls.

Mobile Support

Support in Mobile WebKit browsers requires a touch scrolling library, and a slightly tweaked configuration. For a full walkthrough on how to implement this correctly, read my blog post "Mobile Parallax with Stellar.js".

Please note that parallax backgrounds are not recommended in Mobile WebKit, only parallax elements.

Parallax Elements

If you want elements to scroll at a different speed, add the following attribute to any element with a CSS position of absolute , relative or fixed :

The ratio is relative to the natural scroll speed, so a ratio of 0.5 would cause the element to scroll at half-speed, a ratio of 1 would have no effect, and a ratio of 2 would cause the element to scroll at twice the speed.

If a ratio lower than 1 is causing the element to appear jittery, try setting its CSS position to fixed .

Parallax Backgrounds

If you want an element’s background image to reposition on scroll, simply add the following attribute:

As with parallax elements, the ratio is relative to the natural scroll speed. For ratios lower than 1, to avoid jittery scroll performance, set the element’s CSS ‘background-attachment’ to fixed .

Configuring Offsets

Stellar.js’ most powerful feature is the way it aligns elements.

All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset. This allows you to create intricate parallax patterns very easily.

To modify the offsets for all elements at once, pass in the options:

You can also modify the offsets on a per-element basis using the following data attributes:

Читайте также:  Cryptodataexception ошибка подписи cryptsignmessage 0xc000000d

Configuring Offset Parents

By default, offsets are relative to the element’s offset parent. This mirrors the way an absolutely positioned element behaves when nested inside an element with a relative position.

As with regular CSS, the closest parent element with a position of relative or absolute is the offset parent.

To override this and force the offset parent to be another element higher up the DOM, use the following data attribute:

The offset parent can also have its own offsets:

Similar to CSS, the rules take precedence from element, to offset parent, to JavaScript options.

Still confused? See what it looks like with its default offset parents. Notice how the alignment happens on a per-letter basis? That’s because each letter’s containing div is its default offset parent.

By specifying the h2 element as the offset parent, we can ensure that the alignment of all the stars in a heading is based on the h2 and not the div further down the DOM tree.

Configuring Scroll Positioning

You can define what it means for an element to ‘scroll’. Whether it’s the element’s scroll position that’s changing, its margins or its CSS3 ‘transform’ position, you can define it using the scrollProperty option:

This option is what allows you to run Stellar.js on iOS.

You can even define how the elements are repositioned, whether it’s through standard top and left properties or using CSS3 transforms:

Don’t have the level of control you need? Write a plugin!

Otherwise, you’re ready to get started!

Configuring Everything

Below you will find a complete list of options and matching default values:

Writing a Scroll Property Plugin

Out of the box, Stellar.js supports the following scroll properties:
‘scroll’, ‘position’, ‘margin’ and ‘transform’.

If your method for creating a scrolling interface isn’t covered by one of these, you can write your own. For example, if ‘margin’ didn’t exist yet you could write it like so:

Now, you can specify this scroll property in Stellar.js’ configuration.

Writing a Position Property Plugin

Stellar.js has two methods for positioning elements built in: ‘position’ for modifying its top and left properties, and ‘transform’ for using CSS3 transforms.

If you need more control over how elements are positioned, you can write your own setter functions. For example, if ‘position’ didn’t exist yet, it could be written as a plugin like this:

Now, you can specify this position property in Stellar.js’ configuration.

If, for technical reasons, you need to set both properties at once, you can define a single ‘setPosition’ function:

Questions or comments?

Contact me on Twitter. I’d love to hear from you 🙂

Ссылка на основную публикацию
Adblock detector