// Array de palavras e cores para o efeito
const palavrasFlutuntes = [
{ texto: "creative", cor: "#FF6B6B" },
{ texto: "ambitious", cor: "#4ECDC4" },
{ texto: "curious", cor: "#45B7D1" },
{ texto: "bold", cor: "#96CEB4" },
{ texto: "visionary", cor: "#FFEAA7" },
{ texto: "innovative", cor: "#DDA0DD" },
{ texto: "passionate", cor: "#FF7675" },
{ texto: "dynamic", cor: "#74B9FF" }
];// Função para criar uma palavra flutuante
function criarPalavraFlutuante(x, y) {
const container = document.getElementById('floating-words-container');
if (!container) return;// Seleciona palavra e cor aleatórias
const item = palavrasFlutuntes[Math.floor(Math.random() * palavrasFlutuntes.length)];
// Cria o elemento
const palavra = document.createElement('div');
palavra.className = 'floating-word';
palavra.textContent = item.texto;
palavra.style.backgroundColor = item.cor;
// Posicionamento baseado no cursor
const offsetX = (Math.random() - 0.5) * 100; // -50px a +50px
const offsetY = (Math.random() - 0.5) * 80; // -40px a +40px
palavra.style.left = `${x + offsetX}px`;
palavra.style.top = `${y + offsetY}px`;
// Rotação aleatória
const rotacao = (Math.random() - 0.5) * 20; // -10deg a +10deg
palavra.style.setProperty('--rotation', `${rotacao}deg`);
container.appendChild(palavra);
// Animar entrada
setTimeout(() => {
palavra.classList.add('show');
}, 50);
// Animar saída
setTimeout(() => {
palavra.classList.remove('show');
palavra.classList.add('fade-out');
}, 1500);
// Remover da DOM
setTimeout(() => {
if (palavra.parentNode) {
palavra.parentNode.removeChild(palavra);
}
}, 2100);
}// Aplicar o efeito a todos os botões com a classe
document.addEventListener('DOMContentLoaded', function() {
const botoes = document.querySelectorAll('.hover-floating-words');
botoes.forEach(botao => {
let intervalo = null;
botao.addEventListener('mouseenter', function() {
// Criar palavras imediatamente ao entrar
const rect = this.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
criarPalavraFlutuante(x, y);
// Continuar criando palavras durante o hover
intervalo = setInterval(() => {
const rect = this.getBoundingClientRect();
const x = rect.left + rect.width / 2;
const y = rect.top + rect.height / 2;
criarPalavraFlutuante(x, y);
}, 300);
});
botao.addEventListener('mouseleave', function() {
// Parar de criar novas palavras
if (intervalo) {
clearInterval(intervalo);
intervalo = null;
}
});
// Efeito adicional no movimento do rato
botao.addEventListener('mousemove', function(e) {
// Criar palavras ocasionalmente durante o movimento
if (Math.random() < 0.1) { // 10% de chance
criarPalavraFlutuante(e.clientX, e.clientY);
}
});
});
});