Как делать сайты с 3D
В этот раз расскажем, как можно использовать 3D для сайтов. Как создавать трехмерные объекты, на что смотреть при разработке дизайна с 3D, как оптимизировать работу таких сайтов и пару слов о WebGL. Статья поможет более корректно ставить задачи 3D-шникам.
5959 показов
15K15K открытий
Комментарий недоступен
По видео можно перемещаться.
Покадрово, с возможными небольшими «подлагами» при переходе на конкретный фрейм. А что если вам требуется при наведении курсора мыши проиграть какую-то анимацию, а при уводе — запустить ее в обратном направлении?
Попробуйте средствами JavaScript проиграть видео в обратном направлении. Наверное, вы будете очень удивлены, но у вас это не получится сделать без предварительной отрисовки каждого кадра видео на canvas и сохранения получаемых изображений в некий массив.
А последняя операция достаточно ресурсоемкая, поэтому и ставит крест на реальном практическом применении такого подхода. Так что если без видео обойтись никак — нужно будет сделать два ролика: один для «прямой» анимации на ховер, а один для ее реверса.
Большинство форматов видео являются потоковыми и оптимизированы для проигрывания только «вперед». Вы же не хотите дожидаться загрузки всего видео, чтобы его посмотреть, верно?
К тому же есть ленивая загрузка и плейсхолдеры.
Если анимация находится на главном экране сайта и играет важную роль по задумке дизайнера (например, параллельно вместе с ней появляются какие-то элементы интерфейса и т.д.), никакая «ленивая загрузка» вас не спасет. Вам придется делать «прелоадер» на всю страницу, что, согласитесь, уже не так здорово.
youtube страницы же не весят много.
Откройте средства разработчика браузера и посмотрите, какой объем данных передается на странице с видео в youtube. Взял первое попавшееся — сразу же грузятся 5.5 MB, чуть-чуть поскроллил комментарии и запустил видео — уже 12 MB, и т.д.