Как называется данный эффект?

Question

[lloydbanks]

Подскажите скрипт, который умеет делать то, что отображено на статичной картинке: т.е выставлять на объекте определенные координаты и давать им описание с эффектами и анимацией.

Как я это вижу: когда мы доскроливаем до фото, запускается анимация как линия от заданной точки, напр, от купола зонта движется вправо и появляется поясняющий текст, потом также линия от спиц и ручки со своим текстом.

Знаю, что можно реализовать такое самому, возможно даже на css, но лень и придется повозиться, т.к картинка responsive и нужно, чтобы работало на любых экранах. Существуют уже готовые решения, видел когда-то у кроссовок Nike, где его можно было крутить 360 градусов и читать про наведенный элемент (подошву, шнурки, материал), смотрелось круто.

Comments

[alvvi]

Существуют уже готовые решения, видел когда-то у кроссовок Nike, где его можно было крутить 360 градусов и читать про наведенный элемент (подошву, шнурки, материал), смотрелось круто.

Так почему бы вам не найти там где уже видели это решение?

Но что-то мне подсказывает, что это лишь ваша фантазия, вряд-ли есть готовое решения для чего-то настолько специфичного.

[alex]

спокойно делается на обычном css animation

[Satangelus]

наиболее похожее готовую шнягу видел https://www.sony.com/be-moved/
а так мультислойный параллах. при скроллинге один слой едет вниз, а второй, третий и т.д. едут вбок.

Answer 1

[Ольга Ветер]

Наверняка оптимальнее будет вооружиться scrollMagic, возможно + GSAP, и сделать все самому.

Answer 2

[Sergiu Mitu]

как по мне так вы и не найдете, а если и найдете что-то хоть на 70% покрывающие ваши требования то в итоге переделка остальных 30% под себя в месте с поиском, займет куда больше времени чем написать все самому.

Comments

[kulaeff]

Соглашусь, довольно специфичная вещь, быстрее запилить самому. Но можно хотя бы подсмотреть, как сделано у той же Икеи.

Answer 3

[Satangelus]

похоже на то, что Вам нужно, имеет название multiple layer parallax