ВЕРСИЯ ДЛЯ СЛАБОВИДЯЩИХ
САНТАЛЬ
САНТАЛЬ
The best ideas come as jokes. Make your thinking as funny as possible.
The best ideas come as jokes. Make your thinking as funny as possible.
OUR COMPANY
Bring Your Ideas to Life
Everything that you dreamed of can be brought to life exactly at the moment when you decide to win.
Как сделать
Видео нужно сделать более легким
Видео очень долго грузится при обновлении страницы. Я, для красоты, сделал видео с очень большим весом и качеством. Для реального проекта нужно уменьшать размер и качество, чтобы оно грузилось быстрее. Я же для красоты добавил видео Full HD разрешения.
Видео через код
Увеличение по скроллу
Кнопку делаем шейпом и увеличиваем на 40000%
По шагам описывать не буду, можете все это посмотреть в шаблоне.
Просто увеличение по скроллу за 450 пикселей на 40 000%, чтобы перекрыть все пространство на всех мониторах.
Меняем цвет текста
Белый шрифт через 50 пикселей становится по скроллу невидимым, а черный наоборот.
У черного шрифта изначальное значение дистанции и прозрачности должно стоять 0
Какие минусы
В сафари очень сильно деформируется шейп при увеличении. Тут уже ничего я сделать не могу.
Как можно решить
На телефонной версии я сделал смену фона через стандартные блоки. Вы можете посмотреть, что в самом начале стоит блок DV11A а у Zero блока я убрал фон, чтобы эффект работал. При первом скролле фон меняется на мобилках с черного на белый. Через 200 пикселей цвета шрифтов меняют друг друга. Можете посмотреть на мобилках у себя.
Регистрируемся на Dropbox
У Dropbox есть бесплатная подписка, но если на ваш сайт, где будет встроено данное видео, будет заходить большое количество людей, то Dropbox скажет вам, что мы молодец, все у вас хорошо, но начни-ка ты платить 900 рублей в месяц и пользуйся сколько душе угодно.
За 900 рублей вы получаете все плюшки Dropbox и 2 ТБ облачного хранилища. Я себе взял, так как часто вставляю такие видосы на сайт.
Код для вставки в Zero-блок
Есть 2 формата вставки. На фон и просто в нужное нам место с нужным размером.
В обоих форматах вставка кода осуществляется одинаково, за исключением того, что для фона мы растягиваем наш HTML фрейм на 100% высоты и ширины страницы, а во втором только на нужную нам область.
Код для вставки видео на фон
<div id="videoBackground">
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});
</script>
Код для вставки видео в нужное место
<div id="videoCover">
  <video style="object-fit: cover; background-size: cover; width: 56%; height: 59%; border-radius: 8px;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});
</script>

<style>
#videoCover video, div#videoCover {
    width: 100%!important;
    height: auto!important;
}
</style>
Поделиться видео в Dropbox
Тут вопросов возникнуть не должно.

1. Добавляем видео
2. Жмем правой кнопкой мыши и жмем "Поделиться"
3. В самом низу открытого окошка кликаем на "Создать ссылку"
Меняем ссылку и вставляем в код
Dropbox выдает нам ссылку:
https://www.dropbox.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0

Мы меняем на:
https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0
ID шаблона
19238640
Как добавить шаблон
Создаем новую страницу на сайте
Скроллим в самый низ
Добавляем нужный id шаблона