Código; Animação Fade In
Código; Animação Fade In
Embedded Files
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Fade In Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Fade IN";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'fadeIn 0.8s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime = (chars.length * 0.05 * 1000) + (0.8 * 1000) + 2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Escrevendo
Código; Animação Escrevendo
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Typewriter Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Escrevendo...";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
let i = 0;
function type() {
if (i < chars.length) {
const span = document.createElement('span');
span.className = 'char';
span.textContent = chars[i];
container.appendChild(span);
i++;
setTimeout(type, 80);
} else {
setTimeout(play, 2500);
}
}
type();
}
play();
</script>
</body>
</html>
Código; Animação Matrix
Código; Animação Matrix
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Shuffle Text Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "MATRIX";
const container = document.getElementById('anim-container');
const symbols = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
function play() {
container.innerHTML = '';
const chars = text.split('');
const spanList = chars.map(c => {
const span = document.createElement('span');
span.className = 'char';
container.appendChild(span);
return {
el: span,
char: c,
isSpace: c === ' '
};
});
let frame = 0;
function update() {
let allDone = true;
spanList.forEach((item, i) => {
if (item.isSpace) {
item.el.textContent = ' ';
return;
}
const startFrame = i * 2;
const endFrame = startFrame + 15;
if (frame < startFrame) {
allDone = false;
item.el.textContent = '';
} else if (frame < endFrame) {
allDone = false;
item.el.textContent =
symbols[Math.floor(Math.random() * symbols.length)];
} else {
item.el.textContent = item.char;
}
});
frame++;
if (!allDone) {
setTimeout(() => requestAnimationFrame(update), 30);
} else {
setTimeout(play, 2500);
}
}
update();
}
play();
</script>
</body>
</html>
Código; Animação Subindo
Código; Animação Subindo
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Slide Up Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Subindo";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'slideUp 0.5s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(0.5 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Surgindo
Código; Animação Surgindo
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Scale In Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes scaleIn {
from {
transform: scale(0);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Surgindo";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'scaleIn 0.5s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(0.5 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Desfoque
Código; Animação Desfoque
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Blur In Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes blurIn {
from {
filter: blur(12px);
opacity: 0;
transform: scale(1.1);
}
to {
filter: blur(0);
opacity: 1;
transform: scale(1);
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "DESFOQUE";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'blurIn 0.8s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(0.8 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Neon
Código; Animação Neon
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Glow In Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes glowIn {
0% {
opacity: 0;
text-shadow: 0 0 0px rgba(255,255,255,0);
}
50% {
opacity: 1;
text-shadow: 0 0 20px rgba(255,255,255,1);
}
100% {
opacity: 1;
text-shadow: 0 0 0px rgba(255,255,255,0);
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "NEON";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'glowIn 1s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(1 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Abaixo
Código; Animação Abaixo
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Slide Down Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes slideDown {
from {
transform: translateY(-100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Abaixo";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'slideDown 0.5s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(0.5 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Rodando
Código; Animação Rodando
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Swing Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes swing {
0% {
opacity: 0;
transform: rotate(15deg);
}
20% {
opacity: 1;
transform: rotate(15deg);
}
40% {
transform: rotate(-10deg);
opacity: 1;
}
60% {
transform: rotate(5deg);
opacity: 1;
}
80% {
transform: rotate(-5deg);
opacity: 1;
}
100% {
transform: rotate(0deg);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Rodando";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'swing 0.8s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(0.8 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Colorido
Código; Animação Colorido
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Color Shift Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes colorShift {
0% {
color: #ffffff;
opacity: 0;
}
33% {
color: #ff0055;
opacity: 1;
}
66% {
color: #00ccff;
opacity: 1;
}
100% {
color: #ffffff;
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Colorido";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'colorShift 1s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(1 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Bloco
Código; Animação Bloco
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Block Reveal Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Bloco";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = `
<span style="position:relative; display:inline-block; overflow:hidden;">
<span id="br-text" style="opacity:0; display:inline-block;">
${text}
</span>
<span id="br-block"
style="
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:#ffffff;
transform-origin:left;
transform:scaleX(0);
transition:transform 0.5s cubic-bezier(0.86, 0, 0.07, 1);
">
</span>
</span>
`;
const textEl = document.getElementById('br-text');
const blockEl = document.getElementById('br-block');
setTimeout(() => {
blockEl.style.transform = 'scaleX(1)';
}, 100);
setTimeout(() => {
textEl.style.opacity = '1';
blockEl.style.transformOrigin = 'right';
blockEl.style.transform = 'scaleX(0)';
}, 600);
setTimeout(play, 3600);
}
play();
</script>
</body>
</html>
Código; Animação Digitando
Código; Animação Digitando
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Terminal Type Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes blinkCursor {
0%, 50% {
opacity: 1;
}
51%, 100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Digitando";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = `
<span id="ct-text"></span>
<span
style="
display:inline-block;
width:10px;
height:1.1em;
background-color:white;
margin-left:4px;
vertical-align:middle;
animation: blinkCursor 1s infinite;
">
</span>
`;
const textEl = document.getElementById('ct-text');
const chars = text.split('');
let i = 0;
function type() {
if (i < chars.length) {
textEl.textContent += chars[i];
i++;
setTimeout(type, 100);
} else {
setTimeout(play, 2500);
}
}
type();
}
play();
</script>
</body>
</html>
Código; Animação Contorno
Código; Animação Contorno
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Solid To Outline Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes solidOutline {
0% {
-webkit-text-stroke: 0px transparent;
color: #fff;
opacity: 0;
}
50% {
-webkit-text-stroke: 0px transparent;
color: #fff;
opacity: 1;
}
100% {
-webkit-text-stroke: 1px #fff;
color: transparent;
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Contorno";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'solidOutline 0.8s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(0.8 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Glitch
Código; Animação Glitch
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Glitch RGB Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes glitchRGB {
0% {
text-shadow: 2px 0 0 red, -2px 0 0 blue;
opacity: 0;
}
20% {
text-shadow: -2px 0 0 red, 2px 0 0 blue;
opacity: 1;
}
40% {
text-shadow: 2px 0 0 red, -2px 0 0 blue;
}
60% {
text-shadow: -2px 0 0 red, 2px 0 0 blue;
}
80% {
text-shadow: 1px 0 0 red, -1px 0 0 blue;
}
100% {
text-shadow: 0px 0 0 transparent;
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Glitch";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'glitchRGB 0.4s forwards';
span.style.animationDelay = `${index * 0.1}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.1 * 1000) +
(0.4 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Neon 2
Código; Animação Neon 2
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Pulse Neon Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes pulseNeon {
0%, 100% {
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff;
opacity: 1;
}
50% {
text-shadow:
0 0 2px #fff,
0 0 5px #fff,
0 0 10px #0ff;
opacity: 0.5;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "NEON 2";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'pulseNeon 1.5s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(1.5 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Código; Animação Speed
Código; Animação Speed
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Speed Dash Effect</title>
<style>
body {
background-color: #0a0a0a;
color: #ffffff;
font-family: Impact, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.05em;
}
.char {
display: inline-block;
white-space: pre;
}
@keyframes speedDash {
0% {
transform: translateX(-200%) skewX(-45deg);
opacity: 0;
}
70% {
transform: translateX(10%) skewX(-10deg);
opacity: 1;
}
100% {
transform: translateX(0) skewX(0deg);
opacity: 1;
}
}
</style>
</head>
<body>
<div id="anim-container"></div>
<script>
const text = "Speed";
const container = document.getElementById('anim-container');
function play() {
container.innerHTML = '';
const chars = text.split('');
chars.forEach((char, index) => {
const span = document.createElement('span');
span.textContent = char;
span.className = 'char';
span.style.opacity = '0';
span.style.animation = 'speedDash 0.5s forwards';
span.style.animationDelay = `${index * 0.05}s`;
container.appendChild(span);
});
const totalTime =
(chars.length * 0.05 * 1000) +
(0.5 * 1000) +
2500;
setTimeout(play, totalTime);
}
play();
</script>
</body>
</html>
Google Sites
Report abuse