Эффекты параллакса в сети работают только со свойством CSS background-image, почему это так? Это непрактично.

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

  • Это наиболее естественный способ использования изображений в Интернете.
  • Свойство background-image не поддерживает эквивалент тега изображения, атрибутов srcset и sizes.
  • background-image с CMS не оптимален

Тот факт, что я нигде не мог найти такую ​​библиотеку / плагин, был удивительным, поэтому я решил создать новую.

Главная цель

Я хотел иметь возможность добавлять эффекты параллакса без каких-либо изменений в HTML или CSS. Причина в том, что у меня уже был почти законченный веб-сайт, и я не видел, как меняю все свои теги ‹img› на ‹div› с помощью background-image .

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

1-й вопрос: как не сломать верстку?

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

Параллакс должен быть легко добавлен везде, где есть изображение, даже если оно находится между двумя текстовыми блоками. И вы не хотите, чтобы изображение перемещалось где-либо на веб-сайте и потенциально перекрывалось с контентом.

Решение

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

<img src="image.jpg" alt="image" />

станет:

<div style="overflow: hidden">
    <img src="image.jpg" alt="image" />
</div>

2-й вопрос: как избежать пробелов?

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

Это было очень проблематично, учитывая, что вся суть заключалась в том, чтобы оставить исходный макет страницы неизменным. Не говоря уже о изначально запланированной плавной и естественной анимации.

Решение

Я выбрал это решение: добавить масштабирующее преобразование к изображению. Это означает, что в изображении будет больше материала для перехода. Этот диапазон можно легко рассчитать:

(imageHeight * scale - imageHeight) = range

Например, если изображение имеет высоту 500 пикселей и мы применяем масштаб 1,5, это означает, что изображение будет иметь диапазон в 250 пикселей для перевода.

Теперь нам нужно получить процентное соотношение положения изображения по сравнению с окном просмотра, используя более трудоемкие вычисления:

((viewportBottom - imageTop) / ((viewportHeight + imageHeight) / 100)) = percentage

И, наконец, переведите этот процент в диапазон:

((percentage / 100) * range - range / 2) = translation

Таким образом, перевод можно применять постепенно к изображению с помощью свойства transform: translate (translation);.

Минусы: качество изображения

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

На практике это практически незаметно, если масштаб установлен на 1,3 (это значение библиотеки по умолчанию). И даже меньше, если вы сделаете это, добавив изображение большего размера - то есть, если ваше изображение имеет размер 500 пикселей и вы хотите применить масштаб 1,5, компенсируйте это, используя изображение шириной 750 пикселей.

Окончательный рендер

Выступления

При параллаксной анимации появляется предупреждение о производительности. Благодаря Paul Irish и html5rocks многие ответы уже были предоставлены и объяснены. Тем не менее, здесь есть чем заняться, некоторые примеры:

  • Событие прокрутки требует высокой производительности, поэтому настоятельно рекомендуется использовать Request Animation Frame. Не буду вдаваться в подробности, так как эта тема уже была затронута другими.
  • Intersection Observer API действительно мощный и легкий инструмент для проверки того, какие элементы видны в области просмотра. Нет необходимости обслуживать изображения, которых нет в текущем окне просмотра.
  • Ключевым моментом является уменьшение перекомпоновки браузера. Одно (среди прочего) решение - максимально сократить выборку смещений области просмотра и элементов.
  • Аппаратное ускорение CSS не очень хорошо известно, но все же мощно. Изменение transform: translateX (); на transform: translate3D (); повысит мощность графического процессора и предложит лучшую производительность.

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

Этот пример и эта библиотека отражают только мою точку зрения. Приглашаем вас оспорить, обсудить или оспорить любое из того, что я сказал выше.

И последнее, но не менее важное: вы можете проверить библиотеку simpleParallax на simpleparallax.com и github.