🔔

Conte um pouco como nosso site te ajudou em algum momento.



Efeito chuva com HTML CSS e Jquery


Se você acha que as materias, dicas, videos e noticias que postamos aqui ajuda você, não deixe de contribuir para que possamos continuar a criar um conteúdo cada vez melhor para você. Com o dinheiro arrecadado compramos equipamentos para poder proporcionar para você uma experiência muito melhor e com qualidade.



Postado em: 23/10/2019 13:27:48
Publicidade

Olá pessoal, uma brincadeira divertida para treinarmos nosso conhecimento em HTML, CSS e Jquery

 

 

index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="main.css">
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>
</html> 

main.css

body {
    background: skyblue;
    position: relative;
}

.gota {
    background: #f0f1f1;
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    border-radius: 0px 200px 200px 200px;
    -moz-border-radius: 0px 200px 200px 200px;
    -webkit-border-radius: 0px 200px 200px 200px;
    border: 0px solid #000000;
    box-shadow: 2px 1px 2px 0 #666666;
    position: absolute;
    animation: chuva 5s ease-in-out infinite;
    top: -30px;
}

@-webkit-keyframes chuva {
    100% {
        margin-top: 500px;
        opacity: 0;
    }
}

main.js


$(function () {
    chuva();
    function chuva() {
        let rand = Math.floor(Math.random() * $(window).width());
        let randT = Math.floor(Math.random() * 150);
        console.log(rand + ' - ' + randT);
        $('body').append('<div class="gota" style="margin-left:' + rand + 'px;"></div>');
        setTimeout(() => {
            chuva();
        }, 2000);
    }
});

 

 

Cadastre-se para receber os nossos conteúdos por email e seja um membro da Comunidade JM! É gratuíto aproveite.

copyright ©2012 - 2019 JM Jonathan Moreira - Todos os direitos reservados