Как называются сайты с анимированным содержимым, которое меняется при скроллинге, и как такие сайты делают?

Question

[ixon]

Сайты с анимированным содержимым, анимация которого меняется при скроллинге сайтов. Какой набор инструментон для этого нужен? Есть ли специальные фреймворки для создания таких сайтов и как такие сайты называются?

Примеры таких сайтов:
www.alchemy-digital.co.uk
www.exsus.com/highway-one-roadtrip
neomam.com/interactive/13reasons
everylastdrop.co.uk

Answer 1

[Евгений Петров]

Всё построено на animation.

Для картинок может использоваться SVG.
Инфо где можно изучить SVG?

Для сложной графики canvas.
Какую книгу посоветуете по Canvas HTML5?

Примеры
Полно реализаций с анимацией как HTML, так и SVG.

Comments

[ixon]

Мне интересно, именно то, как они всё это связали с скроллингом, анимацию css3, canvas, svg я уже летом осилял.

[Евгений Петров]

@ixon Какие технологии организуют движение объектов по скроллу на сайте?

[Евгений Петров]

@ixon codepen.io/cleric/pen/AzoIi

[Сергей Сова]

Вообще это FlatUI дизайн!
Там есть и FullScreen Slides и анимация и Flat изображения.

[Сергей Сова]

fltdsgn.com

[Евгений Петров]

@LestaD этим признакам соответствует и Metro Design. Собственно, с лёгкой руки Microsoft Flat пошёл в массы. И, судя по комментарию, дошёл:)

Однако, вопрос-то был про анимацию при скроллинге, которая не зависит от выбранного типа оформления элементов.

Answer 2

[Родион Мещеряков]

Это называется параллакс-скроллинг.

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

Answer 3

[ixon]

Например skrollr.

Answer 4

[gekh]

Вот хороший обзор эффектов при скроллинге с описанием и демками: Скролл-эффекты. Разновидности, тонкости, проблемы,...

Answer 5

[andy-007]

я с этого сайта вообще балдею

Comments

[adisos]

www.world-of-swiss.com а с этого наверное описаетесь ))

Answer 6

[dmitryosipov]

Parallax JS

Comments

[ixon]

parallax JS довольно таки много, можно ссылку того, что вы имеете ввиду?

Answer 7

[Гаджимари Качаев]

Есть такая программа наз-ся Adobe Muse, там можно создавать подобные штуки. А тут есть туториалы по работе с ней.

Comments

[ixon]

Не нужен.

Answer 8

[Сергей Сова]

FlatUI дизайн!
fltdsgn.com
Гуглите

Comments

[Сергей Сова]

designmodo.github.io/Flat-UI

[ixon]

Про flat оно понятно, тут вопрос не за графику, а за технологию скролла. Он может быть и не флатным.

Answer 9

[xmoonlight]

Как передать анимацию разработчику 1 в 1?