Продолжаем цикл статей на тему создания правильной посадочной страницы. Первая часть, вторая часть, третья часть. В этой - четвёртой части пойдёт речь о правильном параллаксе. Что это вообще такое? Параллакс - это красивый приём, создающий эффект 3d пространства на странице сайта. Суть его заключается в том, что элементы, находящиеся "ближе" к зрителю при скроллинге двигаются быстрее, чем элементы, которые находятся "дальше". Вы можете сразу посмотреть тут на то, что у меня получилось в итоге. Как сделать параллакс на сайте? Да, в общем-то, как оказалось, не сложно. Есть несколько хороших JQuery плагинов, позволяющих творить с параллаксом такое, такое... В общем, месье знает толк в извращениях, если интересно, можно посмотреть примеры тут. Но наша задача несколько иная. Нам не нужно делать сейчас эксклюзивный дизайн, нам нужно сделать просто три параллакс слайда на посадочной странице, которая по совместительству у нас является и главной страницей сайта. При этом у нас имеются некоторые принципиальные ограничения. Во-первых, у нас есть принципы. Согласно этим принципам мы не используем JQuery и вообще плагины за некоторым обоснованным здравым смыслом исключением. Наша самая главная задача - сделать нашу страницу быстрой, важно добиться чтобы она корректно работала на мобильных устройствах. Всё это, увы, недостижимо с использованием существующих инструментов. Мы будем писать наш параллакс на чистом Javascript без использования JQuery. Выберем какой-нибудь самый простой вариант и перепишем его с JQuery на js. Хорошо, выбор был сделан, кратко опишу, с какими проблемами пришлось столкнуться и что получилось в итоге. Первое, что удивило: все параллакс-элементы на странице перебирались в цикле. Боже мой, зачем? Их же не двадцать и не тридцать, почему бы не сделать инициализацию для каждого отдельно, ручками? Да, это некрасиво, но зато гораздо быстрее. Второе, нельзя сказать, что это было удивление, скорее, мне надо было по другому. "Дальняя" часть слайда является фоновым рисунком, это понятно. Но ближняя - тоже рисунок. Нам это не подходит - зачем дополнительно подгружать файлы с фотографиями? Скорость, скорость. Заменяем фотографии на обычный htmlcss блок. В результате имеем выигрыш в скорости загрузки страницы. А вот приятно удивило, что, (может быть для кого-нибудь покажется банальным, а вот для меня странным), что на деле весь параллакс свёлся к css. На js по делу потребовалось написать всего-то пару строчек кода (если исключить проверки), а можно было запихнуть всё и вообще в одну строчку. Смысл работы эффекта параллакса оказался очень прост. По крайней мере, если судить по взятому исходнику. Берётся значение скролла (onscroll), уменьшается в заданное число раз, и полученное значение вставляется в background-position "дальнего" элемента. В результате при скроллинге "передний" элемент движется с нормальной скоростью, а "задний" - в n раз медленнее. Отлично, всё заработало, я был рад. Но появилась необходимость вставить второй блок с параллаксом в середину страницы. И он не стал работать. Оказалось, что этот вариант корректен только если параллакс-элемент стоит в начале страницы. А в середине - нет. Тут уж пришлось призадуматься. И в итоге решение было найдено. Оказалось, что всё ещё проще. Надо только идти до конца и не умножать число сущностей. Вместо значения прокрутки было просто взята координата верхней границы паралакс-элемента. getBoundingClientRect().top И всё заработало. Что получилось в результате. Теперь у двух сайтов - thlaspi.com и ferula.ru есть главная страница и мы знаем как создавать быстрые посадочные страницы.

---