Slideshow
Este widget serve para adicionar várias imagens que se alternam num tempo especificado. É bem útil para colocar logos se alternando no canto do overlay.
Agradecimentos especiais à Dabs, do Pra Quem Gosta, por me permitir publicar este widget que eu fiz pra uso dela ^^
☕ Te ajudei? Me manda um cafézinho ^^
[email protected]
Índice:
Guia de configuração
Antes de começar, se você não sabe instalar um widget no StreamElements, veja aqui como instalar.
Transição
Controla o tempo que vai levar na troca de cada imagem, e o tempo da transição entre as duas imagens.
Imagens
Aqui você irá inserir todas as imagens que serão exibidas no widget. Se você quiser inserir um video, sugiro converter para GIF com uma ferramenta como o EzGif
Códigos
Veja aqui como instalar um widget customizado no StreamElements.
HTML
<body
style="--transitionSpeed: {{transitionSpeed}}ms"
data-imagesurls="{{imagesURLs}}"
data-transitioninterval="{{transitionInterval}}"
></body>
CSS
* {
margin: 0;
padding: 0;
overflow: hidden;
}
.image {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100vw;
height: 100vh;
transition: var(--transitionSpeed) ease-in-out;
opacity: 0%;
}
[visible='true'] {
opacity: 100%;
}
Javascript
window.onload = () => {
// Cria o HTML das imagens
let imagesURLs = document.body.dataset.imagesurls.split(",")
imagesURLs.forEach(url => {
document.body.insertAdjacentHTML("beforeend", `<div class="image" style="background-image: url('${url}');"></div>`)
})
// Obtém as variáveis para o loop de imagens
let interval = parseInt(document.body.dataset.transitioninterval)
let images = document.querySelectorAll(".image[style*='streamelements.com']")
let counter = 0
// Exibe a primeira imagem
document.querySelector(".image[style*='streamelements.com']").setAttribute('visible', 'true')
// Cria o loop
setInterval(() => {
if (counter == images.length) counter = 0
images.forEach((e) => e.setAttribute('visible', 'false'))
images[counter].setAttribute('visible', 'true')
counter++
}, interval);
}
Fields
{
"credits1": {
"type": "checkbox",
"value": true,
"label": "Detalhes de como fazer a configuração podem ser encontrados no site toolbox.danifluffy.dev :)",
"group": "Slideshow | DaniFluffyCat ^^"
},
"credits2": {
"type": "text",
"label": "Você pode copiar o link abaixo:",
"value": "toolbox.danifluffy.dev",
"group": "Slideshow | DaniFluffyCat ^^"
},
"transitionSpeed": {
"group": "Transição",
"type": "slider",
"label": "Velocidade da transição (ms)",
"value": 200,
"min": 50,
"max": 2000,
"step": 50
},
"transitionInterval": {
"group": "Transição",
"type": "slider",
"label": "Tempo entre imagens (ms)",
"value": 5000,
"min": 500,
"max": 60000,
"step": 500
},
"imagesURLs": {
"group": "Imagens",
"type": "image-input",
"multiple": true,
"label": "Imagens"
}
}
☕ Te ajudei? Me manda um cafézinho ^^
[email protected]