Mudanças entre as edições de "Widget:VisnoTeste"
Ir para navegação
Ir para pesquisar
| Linha 206: | Linha 206: | ||
<!-- bege --> | <!-- bege --> | ||
<div class="tier-gold"> | <div class="tier-gold"> | ||
<div class="personagem" data-static="bege.webp" data-gif=" | <div class="personagem" data-static="https://i.postimg.cc/TwvptHqy/bege.webp" data-gif=""> | ||
<span>Capone Gang Bege</span> | <span>Capone Gang Bege</span> | ||
<div class="gif-overlay"></div> | <div class="gif-overlay"></div> | ||
| Linha 214: | Linha 214: | ||
<!-- bon clay --> | <!-- bon clay --> | ||
<div class="tier-prata"> | <div class="tier-prata"> | ||
<div class="personagem" data-static="BonClay.webp" data-gif=" | <div class="personagem" data-static="https://i.postimg.cc/bJ3jBpZF/BonClay.webp" data-gif=""> | ||
<span>Bon Clay</span> | <span>Bon Clay</span> | ||
<div class="gif-overlay"></div> | <div class="gif-overlay"></div> | ||
| Linha 222: | Linha 222: | ||
<!-- alvida --> | <!-- alvida --> | ||
<div class="tier-bronze"> | <div class="tier-bronze"> | ||
<div class="personagem" data-static=" | <div class="personagem" data-static="https://i.postimg.cc/yxGC7jXm/Alvida-Slime.webp" data-gif=""> | ||
<span>Alvida (Slime)</span> | <span>Alvida (Slime)</span> | ||
<div class="gif-overlay"></div> | <div class="gif-overlay"></div> | ||
| Linha 230: | Linha 230: | ||
<!-- baby 5 --> | <!-- baby 5 --> | ||
<div class="tier-gold"> | <div class="tier-gold"> | ||
<div class="personagem" data-static="bb5.webp" data-gif=" | <div class="personagem" data-static="https://i.postimg.cc/DZf9sHxQ/bb5.webp" data-gif=""> | ||
<span>Baby 5</span> | <span>Baby 5</span> | ||
<div class="gif-overlay"></div> | <div class="gif-overlay"></div> | ||
Edição das 06h15min de 16 de junho de 2025
<!DOCTYPE html> <html lang="pt-BR"> <head>
<meta charset="UTF-8">
<title>Teste GIF Hover</title>
<style>
body {
margin: 0;
font-family: sans-serif;
color: white;
}
.search-bar {
text-align: right;
padding: 20px;
}
.search-bar input {
padding: 8px;
width: 250px;
border-radius: 5px;
border: 1px solid #ccc;
}
.container {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 40px;
}
.personagem {
width: 200px;
height: 100px;
border-radius: 10px;
background-size: 150%;
background-position: center -30px;
transition: transform 0.3s;
display: flex;
align-items: flex-end;
justify-content: flex-end;
padding: 5px;
font-weight: bold;
color: white;
text-shadow: 1px 1px 4px #000, 0 0 20px #000;
position: relative;
cursor: pointer;
border: 2px solid #58aaff;
overflow: hidden;
text-decoration: none;
}
.personagem span {
z-index: 2;
}
.gif-overlay {
position: absolute;
inset: 0;
background-repeat: no-repeat;
background-size: 150%;
background-position: center -30px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
pointer-events: none;
}
.personagem:hover {
transform: scale(1.05);
}
.personagem:hover .gif-overlay {
opacity: 1;
}
.personagem.luffy .gif-overlay {
background-position: center 0px;
}
.personagem.hancock {
background-size: 115%;
}
.personagem.kizaru {
background-position: center -20px;
}
/* --------- Tiers ----------- */
.tier-diamante .personagem {
background-color: #414c5c;
}
.tier-gold .personagem {
background-color: #d4af37;
}
.tier-prata .personagem {
background-color: #c0c0c0;
}
.tier-bronze .personagem {
background-color: #cd7f32;
}
</style>
</head> <body>
Aokiji
Bartholomew Kuma
Boa Hancock
Borsalino Kizaru
Brook (TS)
Chopper (TS)
Donquixote Doflamingo
Dracule Mihawk
Emporio Ivankov
Enel
Monkey D. Luffy (TS)
Capone Gang Bege
Bon Clay
Alvida (Slime)
Baby 5
<script>
const cards = document.querySelectorAll('.personagem');
cards.forEach(card => {
const staticImg = card.getAttribute('data-static');
const gifImg = card.getAttribute('data-gif');
const overlay = card.querySelector('.gif-overlay');
card.style.backgroundImage = `url('${staticImg}')`;
card.addEventListener('mouseenter', () => {
const uniqueGifUrl = `${gifImg}?t=${new Date().getTime()}`;
overlay.style.backgroundImage = `url('${uniqueGifUrl}')`;
});
card.addEventListener('mouseleave', () => {
overlay.style.backgroundImage = ;
});
});
document.getElementById('search').addEventListener('input', function () {
const term = this.value.toLowerCase();
cards.forEach(card => {
const name = card.querySelector('span').textContent.toLowerCase();
card.parentElement.style.display = name.includes(term) ? 'block' : 'none';
});
});
// Links dos personagens
const personagemLinks = {
"Aokiji": "https://wiki.gla.com.br/index.php/Aokiji",
"Bartholomew Kuma": "https://wiki.gla.com.br/index.php/Kuma",
"Boa Hancock": "https://wiki.gla.com.br/index.php/Boa_Hancock",
"Borsalino Kizaru": "https://wiki.gla.com.br/index.php/Kizaru",
"Brook (TS)": "https://wiki.gla.com.br/index.php/Brook_(Timeskip)",
"Chopper (TS)": "https://wiki.gla.com.br/index.php/Chopper_(Timeskip)",
"Donquixote Doflamingo": "https://wiki.gla.com.br/index.php/Doflamingo",
"Dracule Mihawk": "https://wiki.gla.com.br/index.php/Mihawk",
"Emporio Ivankov": "https://wiki.gla.com.br/index.php/Ivankov",
"Enel": "https://wiki.gla.com.br/index.php/Enel",
"Monkey D. Luffy (TS)": "https://wiki.gla.com.br/index.php/Luffy_(Timeskip)",
"Capone Gang Bege": "https://wiki.gla.com.br/index.php/Capone_Bege",
"Bon Clay": "https://wiki.gla.com.br/index.php/Mr.2",
"Alvida (Slime)": "https://wiki.gla.com.br/index.php/Alvida",
"Baby 5": "https://wiki.gla.com.br/index.php/Baby_5"
};
// Envolve as boxes com <a>
cards.forEach(card => {
const span = card.querySelector('span');
const nomePersonagem = span?.textContent.trim();
const link = personagemLinks[nomePersonagem];
if (link) {
const wrapper = document.createElement('a');
wrapper.href = link;
wrapper.target = "_blank";
wrapper.style.display = "block";
wrapper.style.textDecoration = "none";
card.parentElement.replaceChild(wrapper, card);
wrapper.appendChild(card);
}
});
</script>
</body> </html>