Эффекты параллакса в сети работают только со свойством 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.