2023 eu tava fazendo a 7ª temporada de Projeto Dream, uma das mais curtas mas não uma das mais diretas ao ponto por envolver looping temporal e versões paralelas de um mesmo evento, mas que eu já tinha criado personagens que depois, e achei recentemente essa concept art anterior da Julia Versace, e que ela era pra realmente usar mais peças azuis.
- O episódio que introduz Julia e Sofia caso queiram saber: [clique aqui]
- Sofia morre nesse episódio, na temporada 18: [clique aqui]
Sabe o que eu falei sobre ter dado um upgrade enorme só nesse site, mas eu quis dar uma tunada a mais, afinal, esse site já tá fazendo 9 anos, né? Então me baseei naquele site do Tumblr que falei do mesmo post, então pesquisei pra saber como eu poderia fazer o mesmo efeito, de fazer um textinho acompanhando o cursor caso você esteja lendo aqui pelo PC.
Abaixo uns códigos que fui usando, seja pesquisando o molde pra isso ou pedindo ajuda pro Chat GPT (afinal eu quis fazer isso praticamente pra ontem, e eu fui também testando os códigos que o GPT ia falando).
Primeiro Javascript
<script>
const letters = "THEFATDRAGONS2017";
document.addEventListener("mousemove", (e) => {
const trail = document.createElement("div");
trail.className = "trail";
const randomLetter = letters[Math.floor(Math.random() * letters.length)];
trail.innerText = randomLetter;
// Offset do cursor
trail.style.left = (e.pageX + 10) + "px";
trail.style.top = (e.pageY + 25) + "px";
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 800);
});
</script>
Primeiro CSS
<style>
.trail {
position: absolute;
pointer-events: none;
color: #d40f0f;
font-size: 12px;
font-family: Arial, sans-serif;
animation: fadeOut 0.8s linear forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1);
}
100% {
opacity: 0;
transform: translateY(20px) scale(0.8);
}
}
</style>
HTML (otimizado)
<script>
const letters = "THEFATDRAGONS2017";
const colors = ["#d40f0f", "#ff4d4d", "#ff9999"];
document.addEventListener("mousemove", (e) => {
const trail = document.createElement("div");
trail.className = "trail";
const randomLetter = letters[Math.floor(Math.random() * letters.length)];
trail.innerText = randomLetter;
// posição com leve variação
const offsetX = Math.random() * 20 - 10;
const offsetY = Math.random() * 20 - 10;
trail.style.left = (e.pageX + offsetX) + "px";
trail.style.top = (e.pageY + offsetY) + "px";
// variações visuais
trail.style.fontSize = (10 + Math.random() * 10) + "px";
trail.style.color = colors[Math.floor(Math.random() * colors.length)];
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 800);
});
</script>
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
animation: fadeOut 0.8s ease-out forwards;
will-change: transform, opacity;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(30px) scale(0.6) rotate(20deg);
}
}
</style>
HTML segunda otimização
<!-- Dragon Trail -->
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
animation: fadeOut 0.8s ease-out forwards;
will-change: transform, opacity;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(30px) scale(0.6) rotate(20deg);
}
}
</style>
<script>
const letters = "THE FAT DRAGONS 2017";
const colors = ["#d40f0f", "#0044a4", "#00b934"];
document.addEventListener("mousemove", (e) => {
const trail = document.createElement("div");
trail.className = "trail";
const randomLetter = letters[Math.floor(Math.random() * letters.length)];
trail.innerText = randomLetter;
const offsetX = Math.random() * 20 - 10;
const offsetY = Math.random() * 20 - 10;
trail.style.left = (e.pageX + offsetX) + "px";
trail.style.top = (e.pageY + offsetY) + "px";
trail.style.fontSize = (10 + Math.random() * 10) + "px";
trail.style.color = colors[Math.floor(Math.random() * colors.length)];
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 800);
});
</script>
HTML terceira otimização
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
font-weight: bold;
animation: fadeOut 0.6s linear forwards;
white-space: nowrap;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
</style>
<script>
trail.innerText = text[index];
index = (index + 1) % text.length;
trail.style.left = e.pageX + "px";
trail.style.top = e.pageY + "px";
trail.style.fontSize = "14px";
trail.style.color = colors[index % colors.length];
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 600);
lastX = e.pageX;
lastY = e.pageY;
}
});
</script>
[16:26]
Mano, eu ouvi o Estabilizador estalando, na minha cabeça tocou essa cena do Homem-Aranha:
Esse código até que deu certo, mas... ficou uma bosta, eram os textos só "derretendo" do cursor, e quando acompanhavam a setinha parecia um foguinho de letras, e bem, eu até tentei tirar um print disso mas infelizmente não explicou direito o que eu quis fazer.
Se quiserem fazer o próprio, só tirar os comentários dos "//" e também trocar o título entre aspas e o hexadecimal da cor, etc., pra algo próprio de vocês.
[16:26]
Mano, eu ouvi o Estabilizador estalando, na minha cabeça tocou essa cena do Homem-Aranha:
Se quiserem fazer o próprio, só tirar os comentários dos "//" e também trocar o título entre aspas e o hexadecimal da cor, etc., pra algo próprio de vocês.
HTML quarta otimização
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
font-weight: bold;
animation: fadeOut 0.6s linear forwards;
white-space: nowrap;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
</style>
<script>
const text = "The Fat Dragons 2017 ";
let index = 0;
let lastX = 0;
let lastY = 0;
document.addEventListener("mousemove", (e) => {
const dx = e.pageX - lastX;
const dy = e.pageY - lastY;
const distance = Math.sqrt(dx * dx + dy * dy);
// controla o espaçamento das letras
if (distance > 8) {
const trail = document.createElement("div");
trail.className = "trail";
trail.innerText = text[index];
index = (index + 1) % text.length;
trail.style.left = e.pageX + "px";
trail.style.top = e.pageY + "px";
trail.style.fontSize = "14px";
trail.style.color = "#da0f0f";
document.body.appendChild(trail);
setTimeout(() => {
trail.remove();
}, 600);
lastX = e.pageX;
lastY = e.pageY;
}
});
</script>
[Esse até que funciona bem, mas não é o suficiente]
[Esse até que funciona bem, mas não é o suficiente]
HTML com maior comprimento e duração
<style>
.trail {
position: absolute;
pointer-events: none;
font-family: monospace;
font-weight: bold;
animation: fadeOut 1.5s linear forwards; /* aumentei */
white-space: nowrap;
}
@keyframes fadeOut {
0% {
opacity: 1;
transform: translateY(0px) scale(1);
}
100% {
opacity: 0;
transform: translateY(15px) scale(0.8);
}
}
</style>
<script>
const text = "The Fat Dragons 2017 • The Fat Dragons 2017 • ";
let index = 0;
let lastX = 0;
let lastY = 0;
// ou, como testei e ficou ainda melhor...
const text = "THE FAT DRAGONS 2017";
const colors = ["#d40f0f", "#0044a4", "#00b934"]
let index = 0;
let lastX = 0;
let lastY = 0;
document.addEventListener("mousemove", (e) => {
const dx = e.pageX - lastX;
const dy = e.pageY - lastY;
const distance = Math.sqrt(dx * dx + dy * dy);
// menor distância = mais letras = rastro mais longo
if (distance > 4) {
const trail = document.createElement("div");
trail.className = "trail";
trail.innerText = text[index];
index = (index + 1) % text.length;
trail.style.left = e.pageX + "px";
trail.style.top = e.pageY + "px";
trail.style.fontSize = "14px";
trail.style.color = "#da0f0f";
document.body.appendChild(trail);
// maior tempo = rastro mais longo
setTimeout(() => {
trail.remove();
}, 1500);
lastX = e.pageX;
lastY = e.pageY;
}
});
</script>
O print desse não ficou bom, mas é uma versão que já me deixou super satisfeito pra falar a verdade, então já é tudo pra mim.
Até mais!
Até mais!