Использование видео анимации на сайте без просадок по скорости

Для реализации задуманной дизайнером анимации есть несколько вариантов решения:

1. Можно использовать чистый CSS или связку JS и CSS.
2. Использовать “чистый” JS, создавая нужные эффекты с помощью canvas и WebGL.
3. Либо реализовать эффект в видео и вывести его на страницу.

Стоит учитывать, что использование JS для реализации сложных эффектов может сказаться как на скорости загрузки сайта, так и на скорости его работы в браузере. Например, эффекты, связанные с частицами или анимациями 3D объектов, ощутимо увеличат размер вашего JS кода и испугают seo-специалистов. Поэтому иногда можно схитрить и получить хороший wow-эффект без просадок в скорости работы сайта. Для этого мы можем подготовить видео с желаемым анимационным эффектом и внедрить его на сайт, используя тег <video>.

Есть пара нюансов такого подхода:

1. Ваш эффект не должен быть рассчитан на какое либо взаимодействие с пользователем. Например, частицы не должны следовать за курсором.
2. Желательно использовать JS для загрузки видео, тем самым позволив браузеру отрендерить нашу страницу и загрузить css в первую очередь, а только после инициализации JS начать загружать видео.
3. Использовать оптимальные форматы видео - 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.