36 Days of Type 2021

36 Days of Type

CLIENTE: Trabalho Pessoal

TIPO: Tipografia

ANO: 2021

36 Days of Type (ou 36 dias de Dor e Stresse 🙂) é um desafio criativo que convida designers, ilustradores e artistas gráficos a interpretar a sua visão particular das letras e números do alfabeto romano. Neste caso particular, o meu objetivo era conseguir alcançar os 36 dias a fazer uma peça diariamente, aproveitando para explorar individualmente as peças.

marcelonunes.pt

Behance

Instagram

View

// 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); } }); }); });