Из чего сделан сайт Sony(www.sony.com/be-moved/)?

Question

[Arteaga71]

Добрый день! Большинство посещало сайт Sony (www.sony.com/be-moved/), как вы думаете, какие технологии стоит освоить, чтобы сделать отдаленно на это похожее?

Answer 1

[Дима Паутов]

Могучий - JavaScript, вот и вся технология. На деле все просто, только реализовывается довольно трудно!

Суть самого эффект кроется в скролле! Заменить стандартный скрол своим, что бы при прокрутке колесиком, крутить по 1px, а не по 100!

Далее, отслеживая кол-во скролла, проматывать на основе этого видео ролики, а так же показывать различные текстовые элементы! Так как мы будем использовать видео ролики, то сайт без проблем можно сделать адаптивным, ну или резиновым!

Comments

[Arteaga71]

Большое спасибо!)

Answer 2

[mr-molodoy]

Если говорить непосредственно про реализацию на этом сайте, то здесь можно увидеть анимацию canvas элемент растянутый на размер окна в котором прокручиваются кадры из анимации привязанные к scroll и управляемые через javascript.

Если разбить весь процесс по этапам, то получим следующее:
1. Продумать концепт.
2. Создать наброски отдельных элементов.
3. Смоделировать отдельные элементы по эскизам в любом 3D редакторе.
4. Скомпоновать сцену, проработать освещение.
5. Создать анимацию.
6. Экспортировать в видео и разбить по кадрам либо экспортировать сцену сразу набором изображений.
7. Оптимизировать изображения (скорее всего изображения будут обрезаться с сохранением только части изображения которое анимируется при этом статические элементы (которые на протяжении определенного времени не изменяются будут подложены как отдельное изображение на заднем)). Т.е в конечном итоге у нас получится на выходе независимых 3-4 слоя с изображениями, которые размещены на холсте друг под другом и с идеально подобранными позициями, что бы в целом картинка смотрелась целостно. Самый сложный, на мой взгляд, этап, которым можно пренебречь в прототипах и случаях когда анимация не очень долгая.
8. На javascript пишется специальный "движек" для позиционирования слоев, подготовленных на пред. этапе и размещения на холсте (элемент canvas на странице).
9. Пишется обработчик для события scroll в браузере, отслеживающий положение view порта относительно высоты страницы.
10. Пишется контроллер инициализирующий обработчик события и передающий параметры прокрутки в "движек" для рендеринга нужного кадра на холсте основываясь на положение viewport'а (скролла).
11. Помимо этого так же подготавливается css анимация для появления некоторых элементов на странице, таких как текст.
12. кадры из CSS анимации подгоняют под кадры основной анимации внутри canvas, что бы она проходила синхронно и так же управление воспроизведением css анимацией включается в контроллер обрабатывающий анимацию в canvas.
13. СSS анимация подключается к страницы поверх Canvas элеменета.
14. Утверждаем работу с заказчиком.
15. Получаем деньги и незабываем выдать зарплату всем трудящимся.

Comments

[Arteaga71]

Большое спасибо за развернутый ответ!)

Answer 3

[Ilya Bobkov]

Технологии:

<script src="/static/js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    <script src="/static/js/jquery-1.11.0.min.js"></script>
    <script src="/static/js/jquery-mobile-1.3.2-stripped.min.js"></script>
    <script src="/static/js/util.js"></script>
    <script src="/static/js/libs.js"></script>
    <script src="/static/js/home.js"></script>