Как я могу нарисовать форму буквы с видео в качестве фона на моем веб-сайте?

ProgramBox

Как я могу нарисовать форму буквы с видео в качестве фона на моем веб-сайте?

Post author:admin
Запись опубликована:15 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь выяснить, как сделан этот веб-сайт, но я просто не могу понять, как они это сделали.

Они используют gif на своей домашней странице. Но, если вы наведете курсор на один из разделов «Производство / Креатив» и т.д., Это станет понятнее. Как это делается? С помощью Javascript?

Они используют стрелки в качестве слайдера. Как это делается?

И последнее, но не менее важное — Если вы нажмете на стрелки, вы увидите, что отображается форма с воспроизведением видео в фоновом режиме. Я искал часами, но просто не могу понять, как нарисовать эту линию.

1. Это просто переход между наложенным слоем : https://www.nurturedigital.com/img/home-gifs/home-hover-research.svg (у каждого свой) да, много js и css

2. Это очень продвинутая анимация интерфейса. Глядя на исходный код, они используют Greensock . Хотя, если вы хотите получить прямые ответы на этом сайте, я бы посоветовал вам сосредоточиться на чем-то одном за раз. Отправьте вопрос конкретно о форме буквы видео, например. Это должно вызвать несколько действительно хороших откликов.

3. режим смешивания codepen.io/gc-nomade/pen/KNrMVE / codepen.io/gc-nomade/details/dyyXQeK ответ, который принадлежал, был удален : (

4. Привет. Ребята, большое спасибо за быстрые ответы! Итак, они комбинируют это наложение с функцией наведения курсора javascript? Я правильно понял? И как вы могли выяснить, что они используют Greensock? И спасибо за подсказку о режиме смешивания!! Вот и все. Но как видео может воспроизводиться только в форме буквы? Потому что в разделе codepen это также воспроизводится вокруг букв

Ответ №1:

Вы можете легко использовать маску с буквой в качестве формы, для этого вы можете рассмотреть SVG-маску.

Вот простой пример. Как вы увидите, SVG — это базовый текстовый элемент. Просто настройте шрифт и букву так, как вы хотите:

 video {
    height:300px;
    width:100%;
    -webkit-mask:url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') center/contain no-repeat;
            mask:url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') center/contain no-repeat;
}

 <video src="https://node-images-test.s3.eu-west-2.amazonaws.com/Pexels Videos 2292093.mp4" autoplay muted></video>

Вы также можете масштабировать это до любого количества букв, используя несколько масок, и настроить размер / положение по своему усмотрению:

 video {
    height:300px;
    width:500px;
    display:block;
    margin:auto;
    -webkit-mask:
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left,
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center,
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >C</text></svg>') right;
    -webkit-mask-size:33% auto;
    -webkit-mask-repeat:no-repeat;
            mask:
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >A</text></svg>') left,
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >B</text></svg>') center,
      url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 13 13"><text  x="0" y="12" font-family="Arial, Helvetica, sans-serif" >C</text></svg>') right;
            mask-size:33% auto;
            mask-repeat:no-repeat;
}

 <video src="https://node-images-test.s3.eu-west-2.amazonaws.com/Pexels Videos 2292093.mp4" autoplay muted></video>

Ответ №2:

В ответ на ваш видео-вопрос, вы можете использовать mix-blend-mode с наложением div :

 body {
  margin: 0;
}

video {
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  font-size: 300px;
  width: 100%;
  height: 200%;
  text-align: center;
  background-color: #fff;
  mix-blend-mode: color-dodge;
}

 <video src="https://node-images-test.s3.eu-west-2.amazonaws.com/Pexels Videos 2292093.mp4" autoplay muted></video>
<div class="overlay">
  S
</div>

1. это какой-то странный / классный css-реквизит / эффект, немного забавный, он кажется mix-blend-mode: screen; или mix-blend-mode: lighten; работает лучше

2. Хорошее место @LawrenceCherone. Без проблем, новичок