Использование видео анимации на сайте без просадок по скорости
Для реализации задуманной дизайнером анимации есть несколько вариантов решения:
- Можно использовать чистый CSS или связку JS и CSS.
- Использовать “чистый” JS, создавая нужные эффекты с помощью canvas и WebGL.
- Либо реализовать эффект в видео и вывести его на страницу.
Стоит учитывать, что использование JS для реализации сложных эффектов может сказаться как на скорости загрузки сайта, так и на скорости его работы в браузере. Например, эффекты, связанные с частицами или анимациями 3D объектов, ощутимо увеличат размер вашего JS кода и испугают seo-специалистов. Поэтому иногда можно схитрить и получить хороший wow-эффект без просадок в скорости работы сайта. Для этого мы можем подготовить видео с желаемым анимационным эффектом и внедрить его на сайт, используя тег <video>.
Есть пара нюансов такого подхода:
- Ваш эффект не должен быть рассчитан на какое либо взаимодействие с пользователем. Например, частицы не должны следовать за курсором.
- Желательно использовать JS для загрузки видео, тем самым позволив браузеру отрендерить нашу страницу и загрузить css в первую очередь, а только после инициализации JS начать загружать видео.
- Использовать оптимальные форматы видео - webm для Chrome, Firefox и mp4/mov для Safari. Если в вашем видео используется альфа канал, то для Safari необходимо использовать mov, если нет, то тогда нужно использовать mp4.
Пример вставки видео в верстку HTML
<div class="video-block"><video muted="muted" autoplay="autoplay"
class="video-block__control">
<source src="/images/videos/video-main.webm" type="video/webm">
<source src="/images/videos/video-main.mp4" type="video/mp4">
</video>
</div>
Такой подход встраивания видео был реализован на главной странице нашего сайта seolt.ru.
{вставка loop gif-ки или видео с анимацией на главной странице}
По задумке дизайнера, при загрузке страницы частицы песка должны проявлять контуры картины. Как референс выступал пример, найденный на просторах интернета
https://codepen.io/Mamboleoo/details/GRJKoBw
После небольшого исследования и создания черновой версии стало понятно, что с помощью CSS данный эффект сделать невозможно. Можно было бы реализовать данный эффект используя JS и WebGL, но тогда увеличивалась скорость загрузки страницы и на слабых ПК проявлялись подлагивания анимации и подтормаживание самого браузера. Что доставляло бы дискомфорт посетителям нашего сайта и не являлось приемлемым решением для seo. Тогда было принято решение подготовить видео с желаемым эффектом в видео редакторе и вывести его на нашу страницу, не забывая о нюансах описанных выше. Так как наш front end в основном использует Vanilla JS и Vue, был написан небольшой универсальный компонент VideoBlock.vue
<template> <div class="video-block" > <video v-show="show && videos" ref="video" muted :autoplay="autoplay ? 'autoplay' : false" :loop="loop" :controls="controls" class="video-block__control" > <source v-for="video in videos" :key="video.src" :src="video.src" :type="typeVideo(video.type)" > </video> </div> </template> <script> export default { name: 'VideoBlock', props: { muted: { type: Boolean, default: false }, autoplay: { type: Boolean, default: false }, loop: { type: Boolean, default: false }, controls: { type: Boolean, default: false }, videos: { type: Array, default: () => {[]} } }, data(){ return { show: false } }, mounted() { this.show = true; this.$nextTick(()=> { this.$refs.video.play(); }) }, methods: { typeVideo(type) { return type ? `video/${type}` : 'video/mp4'; } } } </script> <style lang="scss"> .video-block { width: 100%; height: 100%; &__control { width: 100%; height: 100%; position: absolute; } } </style>
Получившийся результат вы можете оценить сами, посетив главную страницу seolt.ru.
Таким же приемом было внедрено видео с 3D объектами и альфа каналом на сайте
npf-specmash.ru.