Henrique: Animação #02 com jQuery em HTML

06/07/2021

Animação #02 com jQuery em HTML

Arquivo: estilo.css

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

*{
    font-family: 'Oswald', sans-serif;
}

html {
    height: 100%;
}

body {
    margin: 0;
    background-color: #0D262D;
    color: #fff;
    height: 100%;
}

table {
    border-collapse: collapse;
}

tr {
    border-bottom: solid 1px white;
}

td {
    font-size: 1.6em;
    padding: 10px;
}

li {
    font-size: 1.6em;
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
}

.exercicio div {
    font-size: 1.8em;
    border: solid 5px #fff;
    padding: 0px 40px;
    margin: 10px;
}

.exercicio div:nth-of-type(1) {
    background-color: darkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-color: crimson;
}

.exercicio div:nth-of-type(3) {
    background-color: darkcyan;
}

.exercicio div:nth-of-type(4) {
    background-color: darkorchid;
}

.exercicio div:nth-of-type(5) {
    background-color: dodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-color: salmon;
}

.exercicio .destaque {
    border: solid 10px greenyellow;
    color: greenyellow;
    font-weight: bold;
}

Arquivo: animacao2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Animação #02</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        body {
            position: relative;
            background-color: #999;
            color: #000;
        }

        div {
            position: absolute;
            display: inline;
            border: solid 10px #000;
            padding: 50px;
            font-size: 3em;
            background-color: crimson;
        }
    </style>
</head>

<body>
    <div>Animar!</div>

    <script>
        //Função para alterar largura
        function alterarLargura(valor, duracao, callback) {
            $('div').animate({ width: `+=${valor}` }, duracao
                , callback)
        }

        //função para mover na diagonal
        function moverDiagonal(valor, duracao, callback) {
            $('div').animate({ top: `+=${valor}`, left: `+=${valor}` }
                , duracao, callback)
        }

        //função de girar
        function girar(valor, duracao, callback) {
            $('div').animate({ transform: `+=${valor}` }, {
                step: function (valor) {
                    $(this).css('transform', `rotate(${valor}deg)`)
                },
                duration: duracao
            }, 'linear', callback)
        }

        //chamando as funções
        alterarLargura(300, 100, () => {
            alterarLargura(-300, 'slow', () => {
                moverDiagonal(300, 600, () => {
                    girar(3300, 3000)
                })
            })
        })
    </script>
</body>