Как эффективнее реализовать подобный бекграунд?

Question

[deniskins23]

Доброго времени суток!
С праздником!
Кто может подсказать как лучше реализовать подобное.
Вот изображение. На нем красным обвел логотип. Под логотипом(или на нем) видно что есть изображение(но это не фоновое изображение страницы, а другое, просто похоже). Необходим следующий эффект. Когда кликается по стрелочкам навигационным или скроллится страница, то вся страница кроме логотипа уезжает налево и заменяется другой, а вот изображение под логотипом(или на нем) уезжает вправо и тоже заменяется другим. То есть сам логотип(его обрисовка) всегда присутствует на странице.
Как реализовать листание страниц то я знаю и смогу, а вот как быть с этим изображением под логотипом?Кто может подсказать эффективное решение?

Заранее спасибо.

Answer 1

[Олег]

svg clip-path + js

Comments

[deniskins23]

у него поддержка ведь слабая.. А еще варианты есть?

[Олег]

deniskins23, Все современные браузеры поддерживают. https://caniuse.com/#search=clip-path
Имхо - не имеющие доступных современных девайсов - не мой контингент

[deniskins23]

Олег, -)))отличный ответ.-)То есть более френдли решения не сможешь подсказать?

[Олег]

deniskins23, Но опять же для современных))
тыц

[deniskins23]

Олег, -)Час отчасу не легче..-)

[Олег]

deniskins23, Остальное отдельными картинками или болком с заменой background

[deniskins23]

Олег, Понял. Спасибо за ответ.Учту

[RAX7]

deniskins23, посмотри поддержку clipPath в SVG
https://developer.mozilla.org/en-US/docs/Web/SVG/E...

[deniskins23]

RAX7, Спасибо. А я на кенайюз глянул, там что-то не очень все..

[RAX7]

deniskins23, там для css, у svg поддержка лучше.

[deniskins23]

RAX7, Понял. учту. Спасибо за совет и подсказку..

[deniskins23]

Олег, Есть вопрос..В целом все понятно по clippath вопрос только в том, как сделать чтобы вот это изображение на фоне логотипа растягивалось на все svg?Не подскажешь?