Привет, стримлер!
На одной из трансляций я рассказывал, как можно забрать любой html-сниппет, в качестве виджета на стрим. Продублирую чуть подробнее тут, чтобы этот процесс был менее пугающим и сбивающим с толку.
В качестве источника виджетов мы можем использовать абсолютно любой сервис, но в нашем примере мы воспользуемся CodePen
Заходим на сайт, вводим в строке поиска любое ключевое слово и выбираем из предложенных вариантов интересующий нас виджет.
Чтобы переместиться дальше первой страницы, нам понадобиться создать аккаунт. Сделать это можно в правом верхнем углу.
Найдя подходящий виджет, просто жмем на него. Откроется новая страница, на которой в самом низу - будет представление виджета. А выше - три колонки: HTML, CSS, JavaScript.
Я выбрал симпатичную анимацию, которая может отлично подойти в качестве рамки камеры или какого-либо блока.
Все, что нам нужно сделать - просто собрать содержимое трех колонок (HTML, CSS и JS) в одном файле, с разрешением .html
Но есть несколько нюансов:
- На сайте может быть представлен код, который не будет функционировать в файле без дополнительной библиотеки jQuery. Ее я заранее приложу в шаблоне
- Скопированный код должен быть размещен в файле определенным образом
Давайте разберемся со всем по порядку...
Какие могут быть вариации кода?
Обращайте внимание на название вкладок. Если вы видите HTML, CSS и JS (без всяких значений в скобках) - такой код можно забирать сразу - он будет работать.
Однако могут быть случаи, когда код требует некую компиляцию или постпроцессинг (в это можно не вникать).
Чтобы превратить такой код в подходящий нам - нужно всего лишь нажать на иконку стрелки, указывающей вниз, которая расположена в правой части каждой колонки. И выбираем варианты View Compiled
После этого в тех же полях появится уже обработанный код, который мы можем свободно забирать. Поэтому идем дальше.
Как собрать код в одном файле?
Как уже упоминалось, весь код должен быть собран в файле с расширением HTML (Можно, конечно разделить на несколько файлов и подключить их между собой, но тут рассмотрим этот процесс со стороны новичка в html). Чтобы вам было проще все сделать, я подготовил простой шаблон.
Создайте файл winget.html и поместите в него следующее:
<style>
/* Вставь содержимое колонки CSS под этой строкой */
</style>
<!-- Вставь содержимое колонки HTML под этой строкой -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
// Вставь содержимое колонки JS под этой строкой
</script>
При попытке открыть данный файл, по умолчанию он будет открываться в браузере, поэтому для редактирования нажимаем на него правой кнопкой мыши и выбираем "Открыть с помощью" -> "Блокнот". Если у вас есть более "мощные" текстовые редакторы (только не Word, пожалуйста) - Feel free to use it.
Далее, нам нужно вставить весь скопированный текст в соответствии с комментариями в шаблоне. Как только это будет готово, нажмите Файл -> Сохранить Как -> Укажите удобный вам путь до будущего файла и сохраните с расширением .html
Если все сделано верно - мы может открыть сохраненный файл в браузере и увидеть результат.
Теперь мы можем подключить наш файл в OBS!
Как подключить в OBS?
В действительности - все весьма просто. Но есть один нюанс.
Открываем OBS и добавляем на нужной сцене новый браузерный источник. Даем ему произвольное название (я назвал "[B] Animated Border")
Далее, ставим галочку в пункте "Локальный файл" и жмем кнопку "Обзор". Выбираем путь до нашего html виджета, выставляем размер и делаем остальные настройки.
Обратите особое внимание на пункт CSS. В нем OBS по умолчанию подставляет код, который скрывает фон подключенного сайта/файла. В каких-то случаях это удобно (как в моем примере с анимированной рамкой), а в каких-то может мешать (например если вы скачали целую страницу для экрана паузы). Если оно вам мешает - просто удалите все содержимое из этого поля.
Далее мы можем просто воспользоваться трансформированием в OBS, чтобы привести виджет к желаемому виду.
Что, если я хочу поменять цвета?
К сожалению, однозначно единого способа поменять цвета - нет. Все очень зависит от выбранного виджета. Где-то могут быть один-два цвета, а где-то целые переливающиеся градиенты. Но я могу подсказать. на что обращаться внимание.
Во-первых, цвет (практически) всегда описан в CSS.
Во-вторых, он может быть выражен одним из следующих видов:
- HEX. Выглядит так: #27F2A6
- rgb. Выглядит так: rgb(156, 231, 65)
- rgba. Выглядит так: rgba(156, 252, 75, .5)
HEX
Такой цвет всегда имеет символ # в начале и может содержать 3 или 6 значений после символа. (#000 и #000000 - черный цвет. #FFF и #FFFFFF - белый цвет)
Чтобы сильно не погружаться в то, как подобрать цвет в HEX, вы можете воспользоваться любым Color Picker. Например - этим.
RGB
Почти то же самое, что и HEX, но значение для цвета тут задано намного понятнее. В HEX для описания красного, зеленого и синего используется шестнадцатеричная система (Те самые цифры и буквы 0-9 и A-F), а в RGB они задаются числами от 0 до 255.
Чтобы было проще найти нужный цвет, мы можем воспользоваться тем же Color Picker, но уже обратить внимание не на HEX, а на RGB.
RGBA
Абсолютно то же самое, что и RGB. Но теперь есть еще и значение для A - альфа-канал. Это по сути непрозрачность. В том же Color Picker после RGB можно заметить значение и для A.
Чтобы поменять цвета в вашем виджете, обратите внимание в часть CSS. Попробуйте найти любые виды цветов, по приведенным выше примерам. Можете определить их цвет с помощью Color Picker, и с ним же - заменить их.
CodePen и прочие площадки с HTML-сниппетами - кладезь полезных и готовых решения для стримера. Умение работать с ними - сильно упростит вам жизнь, вероятно сэкономит денег и поможет выделиться на фоне коллег. Стильно, модно, молодёжно в общем.
Если захочется овладеть мастерством переделывания готовых виджетов - советую обратить внимание именно на CSS.
HTML - как правило очень простой. И не так часто требует изменений, вы к нему всегда сможете вернуться.
JS - обычно влияет лишь на определенную логику поведения, но значительно реже на отображение.
А CSS - это все о том, как элемент выглядит и часто как он анимирован. Материал простой, а теперь у вас есть и полигон для экспериментов!
Надеюсь статья окажется полезной для вас! Буду заходить в гости и искать глазами новые визуальные штуки)
❤️ Стремительного роста и обильных просмотров! Оставайтесь в состоянии потока!
Буду рад ответить на любые вопросы на нашем Discord-сервере или на Twitch трансляциях!
Больше плагинов и руководств можно найти на нашем Boosty!
