Как реализован этот эффект?

Question

[jeruthadam]

При прокручивании, справа логотип отодвигается наезжающей на него картинкой. themarcus.com

Как это сделано? Казалось бы, ерунда, какой-нибудь sticky или fixed с трансформацией по скроллу в момент пересечения с блоком картинки - а вот хер! Нету (я не нашел) ничег опохожего на эти два случая. Элементы расположены в совершенно невзаимосвязанных местах и как происходит этот эфект для меня загадка.

Answer 1

[Ankhena]

Логотип разбит на 2 части, буква и "хвост".
На js узнается "высота" (в кавычках, потому что это ширина) логотипа вместе с его отступом от верха окна браузера и позиция блока, который наезжает.
Когда второе становится меньше первого, то у "хвоста" изменяется координата left.

Comments

[jeruthadam]

Тогда почему нету никаких инлайн стилей добавляемых JS?

[jeruthadam]

А нет, прошу прощения, увидел left! Там 3 вложенных спана. Спасибо!

Answer 2

[dicem]

Тут однозначно можно запилить на гридах с анимацией на anime.js ну или scrollmagic.io

Ну а вобще, у них используется Barba.JS, PictureFill, в качестве плеера PlyrJS

Comments

[jeruthadam]

Я спрашиваю конкретно о логотипе, как он смещается. Какой нафиг anime.js и Barba? Какой PlyrJS??? Какие гриды, чувак?))) Ты вообще о чем?

[dicem]

jeruthadam, да я чет завтыкал и тупо на сайт посмотрел, а то что ты там про лого спрашивал я чет не воспринял, но тут впринципе тоже ничего сложного, видно что лого на 2 части разделен, 1 часть фиксирована, вторая sticky

[jeruthadam]

dicem, там нету даже намека на sticky. Где оно тебе померещилось? Я херею с ответов))

[Kadzi]

dicem, а ещё ссылочек не покидаете посмотреть?)