если хочешь, чтобы оно работало адаптивно и пропорционально масштабировались твои маркеры с изображением - то только через svg.
p.s. картинку в svg загнать тоже можно
ну там же видно как сделано. position: sticky вешается на секции, когда они доходят до начала экрана и создается такой эффект. пару строк в js https://codepen.io/ibird/pen/rNdGBmo
эта белая полоса должна быть по обе стороны одинаковая) т.е. то что в макете - должно быть по середине страницы.
вот пример, где вместо 1180px представь что там 1440px:
1) при клике создаешь под курсором div. он должен быть круглым и нужного тебе цвета.
2) после этого запускаешь анимацию transform scale для этого дива.
3) выбираешь время анимации и анализируешь когда этот круг займет все пространство.
4) и с таймаутом этого выбранного времени закрашиваешь body в нужный цвет у удаляешь круг
