Анимация с липкими элементами ⇐ CSS

[Anonymous]

У меня есть макет, который включает изображение во всю ширину и два столбца с текстом ниже.
https://codepen.io/Matteokr/pen/rNgedKL

Код: Выделить всё

[img]https://placehold.co/1200x600[/img]




TEXT 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit tempus lectus, eu tincidunt tellus volutpat in.

TEXT 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit tempus lectus, eu tincidunt tellus volutpat in.
Aenean ac nunc rutrum, sagittis dui pellentesque, malesuada lorem. Sed sed bibendum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu neque neque. Fusce quis enim interdum, efficitur arcu at, dignissim turpis. Quisque bibendum risus nec tempus congue. Ut at libero ut ipsum venenatis dignissim id non purus. Vestibulum et bibendum dui, a sollicitudin lectus. Morbi mollis auctor risus at sodales.
Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.
Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.

• Вначале я хотел бы скрыть текстовые столбцы, чтобы это было что-то вроде изображения, закрывающего весь текст в области просмотра.
• Когда вы начинаете прокручивать, изображение перемещается вверх (как при обычной прокрутке), а затем обнаруживает «фиксированное» значение в левом верхнем столбце.

Шаг 1.1
Шаг 1.2

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

Шаг 2
Шаг 3

• После достижения позиции начнется обычная прокрутка.

Я попробовал несколько методов с фиксированными, фиксированными позициями, но остановился на этом.
Какая-нибудь помощь?

Подробнее здесь: https://stackoverflow.com/questions/785 ... y-elements