Criando Animações Básicas com JavaScript

Aprenda a criar animações simples, como mover um elemento pela tela, mudar cores ou tamanhos, usando JavaScript e CSS.

Dicas de JavaScript básico para iniciantes - Manipulação de DOM — Tutorial de JavaScript básico para iniciantes

Criando Animações Básicas com JavaScript

Animações podem transformar uma página web simples em algo interativo e envolvente. Usar JavaScript e CSS para criar animações básicas é uma excelente maneira de melhorar a experiência do usuário em seu site. Neste post, vamos explorar como você pode criar animações simples, como mover um elemento pela tela, mudar suas cores ou tamanhos.

Movendo um Elemento pela Tela

Vamos começar com um exemplo simples de como mover um elemento pela tela usando JavaScript.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animações com JavaScript</title>
    <style>
        #caixa {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="caixa"></div>
    <button onclick="moverCaixa()">Mover Caixa</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript

function moverCaixa() {
    let caixa = document.getElementById('caixa');
    let posicao = 0;
    let id = setInterval(frame, 5);

    function frame() {
        if (posicao == 350) {
            clearInterval(id);
        } else {
            posicao++;
            caixa.style.top = posicao + 'px';
            caixa.style.left = posicao + 'px';
        }
    }
}

Mudando Cores

Agora, vamos ver como mudar a cor de um elemento gradualmente usando JavaScript.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animações com JavaScript</title>
    <style>
        #caixa {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="caixa"></div>
    <button onclick="mudarCor()">Mudar Cor</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript

function mudarCor() {
    let caixa = document.getElementById('caixa');
    let corAtual = 0;
    let id = setInterval(frame, 50);

    function frame() {
        if (corAtual >= 255) {
            clearInterval(id);
        } else {
            corAtual++;
            caixa.style.backgroundColor = `rgb(${corAtual}, 0, 0)`;
        }
    }
}

Mudando Tamanhos

Finalmente, vamos criar uma animação que aumenta o tamanho de um elemento.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animações com JavaScript</title>
    <style>
        #caixa {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="caixa"></div>
    <button onclick="aumentarTamanho()">Aumentar Tamanho</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript

function aumentarTamanho() {
    let caixa = document.getElementById('caixa');
    let tamanhoAtual = 50;
    let id = setInterval(frame, 10);

    function frame() {
        if (tamanhoAtual == 200) {
            clearInterval(id);
        } else {
            tamanhoAtual++;
            caixa.style.width = tamanhoAtual + 'px';
            caixa.style.height = tamanhoAtual + 'px';
        }
    }
}

Combinando JavaScript e CSS para Animações

Usar JavaScript para manipular propriedades de CSS é uma maneira poderosa de criar animações, mas você também pode combinar JavaScript com CSS para obter resultados ainda mais fluídos.

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animações com JavaScript e CSS</title>
    <style>
        #caixa {
            width: 50px;
            height: 50px;
            background-color: red;
            transition: all 0.5s ease;
        }

        .mover {
            transform: translateX(300px);
        }

        .mudar-cor {
            background-color: blue;
        }

        .aumentar-tamanho {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="caixa"></div>
    <button onclick="mover()">Mover</button>
    <button onclick="mudarCor()">Mudar Cor</button>
    <button onclick="aumentarTamanho()">Aumentar Tamanho</button>
    <script src="script.js"></script>
</body>
</html>

JavaScript

function mover() {
    document.getElementById('caixa').classList.toggle('mover');
}

function mudarCor() {
    document.getElementById('caixa').classList.toggle('mudar-cor');
}

function aumentarTamanho() {
    document.getElementById('caixa').classList.toggle('aumentar-tamanho');
}

Conclusão

Criar animações básicas com JavaScript pode ser uma maneira divertida e eficaz de adicionar interatividade ao seu site. Seja movendo elementos, mudando suas cores ou tamanhos, as animações podem tornar a experiência do usuário mais dinâmica e envolvente. Experimente as técnicas mostradas neste post e explore as possibilidades que JavaScript e CSS oferecem para criar animações incríveis.