S.A. AAUBI '19 – Marcelo Nunes

Semana Académica Covilhã 2019

CLIENTE: AAUBI

TIPO: Identidade Visual

ANO: 2019

Desenvolvimento da Identidade Visual do evento académico da AAUBI: a Semana Académica 2019. Neste projeto, o objetivo foi, de certa forma, homenagear a cidade que tanto dá a todos os que por lá passam, atráves de uma identidade suportada quer pelos lugares de convívio e de passagem, quer pelas pessoas com que nos embatemos de uma forma rotineira. Do kebab das 5h da manhã ao café da pausa no estudo, assinalando o peso que a cidade teve no percurso académico de cada membro ubiano. Um evento particular porque tive a ajuda do amigo e brain-mate Gonçalo Silva e free drinks no backstage.

59625951_1045531142308805_3311813453328416768_o

59177963_1045532318975354_7635032533100396544_o

60151392_1048165808712005_6769603834206486528_o

Fotografias pelos únicos: Aiden Kless e Vasco Eusébio

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