С помощью чего лучше делать параллакс эффект?

Question

[PlasterTom]

Как выбрать плагин для параллакс эффекта? Буду благодарен также на ссылки с туториалами. Лучше на русском, но английский тоже покатит. Также в приоритете простота, так как в программировании новичок.

Comments

[monochromer]

В целях своего обучения создавал репозиторий
https://github.com/monochromer/scroll-effects-tutorials
Там есть ссылки на оригинальные уроки (не только параллакс, но и просто эффекты при прокрутке) - к сожалению, все на английском.

Answer 1

[ForestEsprit]

Удобная штука scrollmagic.io/examples/advanced/parallax_sections.html
Для разбора пригодился в своё время урок: https://habrahabr.ru/post/142137/
может что-то лучше:
www.w3schools.com/howto/howto_css_parallax.asp
https://habrahabr.ru/post/280738/

Comments

[Nikolay Talanov]

1 ссылка - дерганное гуано

2 ссылка - древний тутор в котором анимируют top свойство. Боже упаси такое в 2016 людям делать.

3 ссылка - w3schools? Rly? Да еще и там не параллакс, а обыкновенный background-attachment: fixed

4 ссылка - весьма убогий туториал с кофескриптом, в комментах хабра люди уже высказались

[Ankhena]

Nikolay Talanov: А Вы какой хороший способ посоветуете?

Answer 2

[Igor Fedorov]

Для меня самый просто параллакс, это задать у блока background-size: cover и background-attachment:fixed

Comments

[PlasterTom]

Насколько я знаю, если делать на чистом css, то не на всех устройствах срабатывает, нет? Какие ограничения у этого способа?

[Максим Тимофеев]

PlasterTom: ограничения в древних устройствах, которые не дружат с css3, а именно не понимают background-size: cover - 97.19% пользователей
background-attachment - 87.6%

[Максим Тимофеев]

PlasterTom: Не уверен, что другие решения будут иметь лучшие результаты, так как есть черти которые выключают js в браузере.

[Ankhena]

Это должно заставить задуматься, а нужен ли параллакс древним устройствам?
Тем, кто выключает JS, точно ничего не нужно :)

[PlasterTom]

Максим Тимофеев: эмм...вот прямо такие цифры около 90-100% не понимают css3?? а с использованием библиотек jquery, parallax.js каких процентов ожидать?

[Ankhena]

Максим Тимофеев: PlasterTom:
Кстати, интересно, откуда взялись такие дикие %%

caniuse.com/#search=background-size
caniuse.com/#search=background-attachment

[Сергей delphinpro]

Максим Тимофеев:

97.19% пользователей

ну во-первых, эта цифра понимающих )
во-вторых, не пользователей, а браузеров. В чем разница? Если на ваш сайт все пользователи ходят исключительно через IE6, то процент пользователей с поддержкой фичи будет равен нулю, и наоборот, если все пользователи ходят через Хром, то этот процент будет равен ста.

[Максим Тимофеев]

Ankhena W: взялись отсюда - caniuse.com

[Максим Тимофеев]

Сергей: нет, как раз это пользователи. 97.19% пользователей используют для выхода в интернет браузеры поддерживающие background-size: cover.
Подробнее тут: caniuse.com

[Максим Тимофеев]

PlasterTom: по jquery и parallax.js у меня данных нет, там все сложнее чем с css, если найдете - было бы интересно посмотреть. Я так понимаю что все браузеры понимают javascript, а следовательно и jquery с parallax.js, но у некоторых пользователей в браузерах отключена поддержка js.

[Ankhena]

Максим Тимофеев: Вам уже написали, что это ПОНИМАЮЩИЕ, а не наоборот. И посетители, а не пользователи. Т.е. если человек открыл сайт сначала в хроме, а потом в ИЕ - это это 2 посетителя, а не 1 пользователь.

Can I use background-size? Yes, 97% will be able to see it.

[Максим Тимофеев]

Ankhena W: Не придирайтесь к словам.

Answer 3

[Максим]

Вот смотрите

Answer 4

[_ umr]

viewportChecker и манипуляции с css с помощью jquery. Какой хош параллакс можно устроить