Mudanças entre as edições de "Widget:VisnoTeste"
Ir para navegação
Ir para pesquisar
| Linha 126: | Linha 126: | ||
<!-- kuma --> | <!-- kuma --> | ||
<div class="tier-diamante"> | <div class="tier-diamante"> | ||
<div class="personagem" https://i.postimg.cc/8chnZGsF/kuma2.png" data-gif=""> | <div class="personagem"https://i.postimg.cc/8chnZGsF/kuma2.png" data-gif=""> | ||
<span>Bartholomew Kuma</span> | <span>Bartholomew Kuma</span> | ||
<div class="gif-overlay"></div> | <div class="gif-overlay"></div> | ||
Edição das 15h05min 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: 250px;
height: 115px;
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
Franky (TS)
Jinbe
Marshall D. Teach
Marco
Monkey D. Luffy (TS)
Nami (TS)
Portgas D. Ace
Nico Robin (TS)
Roronoa Zoro (TS)
Sabo
Sakazuki (Akainu)
Shanks
Usopp (TS)
Uta
Sanji (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",
"Franky (TS)": "https://wiki.gla.com.br/index.php/Franky_(Timeskip)",
"Jinbe": "https://wiki.gla.com.br/index.php/Jinbe",
"Marshall D. Teach": "https://wiki.gla.com.br/index.php/Marshall_D._Teach",
"Marco": "https://wiki.gla.com.br/index.php/Marco",
"Monkey D. Luffy (TS)": "https://wiki.gla.com.br/index.php/Luffy_(Timeskip)",
"Nami (TS)": "https://wiki.gla.com.br/index.php/Nami_(Timeskip)",
"Portgas D. Ace": "https://wiki.gla.com.br/index.php/Ace",
"Nico Robin (TS)": "https://wiki.gla.com.br/index.php/Robin_(Timeskip)",
"Roronoa Zoro (TS)": "https://wiki.gla.com.br/index.php/Zoro_(Timeskip)",
"Sabo": "https://wiki.gla.com.br/index.php/Sabo",
"Sakazuki (Akainu)": "https://wiki.gla.com.br/index.php/Akainu",
"Shanks": "https://wiki.gla.com.br/index.php/Shanks",
"Usopp (TS)": "https://wiki.gla.com.br/index.php/Usopp_(Timeskip)",
"Uta": "https://wiki.gla.com.br/index.php/Uta",
"Sanji (TS)": "https://wiki.gla.com.br/index.php/Sanji_(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>