Как реализовать такой дизайн сайта в один экран и анимационными переходами между экранами?

Question

[Faber Estello]

Как можно реализовать подобный дизайн для сайта, т.е. сверстать? (ссылка на dribbble.com )

Один экран.

Но слайдер это или FullPage или танцы с бубнами canvas и прочие технологии?

Comments

[Виталий Першин]

Для перехода между страницами без проблем подойдет FullPage, нечто похожее даже недавно делал. Правда горизонтальный слайдер в FullPage уже платный, последний раз использовал Slick Slider, но там эффект перехода конечно не такой. Все остальные действия можно повесить на колбеки FullPage или slick. Смену линии маршрута можно реализовать через svg, встречал даже библиотеку для рисования и смены таких маршрутов, если вспомню дам ссылку..

[lukoie]

Виталий, библиотеку и я бы хотел глянуть

Answer 1

[Ivan Bogachev]

Для переходов между страницами можно использовать Barba.js. А как именно делать сами анимации - смотрите сами, что вам проще будет делать. По идее в WebGL здесь нет необходимости - все можно сделать на CSS-трансформациях.

Comments

[Kadzi]

Иван, а есть ли у вас коллекция подобных библиотек, т.ч интересные примеры CSS эффектов? не приложите ссылоки? :)

[Ivan Bogachev]

Kadzi, Нет, специальной коллекции у меня нет :) А интересных примеров для вдохновения на codepen много.

Answer 2

[profesor08]

Ну сделать такой фон на css просто, подобрать нужное время и кривую анимации. Но производительность такого добра будет оставлять желать лучшего. И чем больше экран, тем хуже. Лучше делать на webgl (glsl), примеров подобных смен картинок - валом.