Как добавить эффект перехода в backgroundImage с помощью JavaScript - PullRequest
Новая
       18

Как добавить эффект перехода в backgroundImage с помощью JavaScript

0 голосов
/ 01 июня 2019

У меня есть эта структура, которая в порядке, и я пытаюсь добавить что-то еще к моей проблеме.Мне бы хотелось, чтобы фоновое изображение и контейнер отображались с типом transition: ease-in-out 150ms при загрузке страницы.

Я знаю, это звучит просто, но я бы хотел, чтобы это происходило в JavaScript

Это для домашней работы 

<body onload="carregar()" id="effect">

<div class="container">
    <div class="header">
        <h1>Hora do dia</h1>
        <div class="a">
            <p id="msg">Aqui vai aparacer a mensagem</p>
        </div>
    </div>

    <div class="section">
        <div class="b">
            <img src="amanhecer.jpg" alt="amanhecer" id="imagem">
        </div>
    </div>

    <div class="footer">
        <p>&copyCursoemVideo</p>
    </div>
</div>

<script>
    function carregar() {
        var msg = document.getElementById('msg');
        var img = document.getElementById('imagem');
        var data = new Date();
        var hora = data.getHours();
        var effect = document.getElementById('effect')

        setTimeout(function () {
            $("#effect").fadeOut();
            $("body").fadeIn()
        })

        msg.innerText = `Agora são ${hora} horas`

        if (hora >= 0 && hora < 12) {
            //bom dia
            img.src = 'amanhacer.jpg'
            document.body.style.backgroundImage = "url('bg.jpg')"
        } else if (hora >= 12 && hora < 18) {
            //boa tarde
            img.src = 'anoitecer.jpg'
            document.body.style.backgroundImage = "url('bg-anoitecer.jpg')";
        } else {
            // boa noite
            img.src = 'noite.jpg'
            document.body.style.backgroundImage = "url('bg-noite.jpg')";
        }
    }
</script>
</body>

Пожалуйста, помогите:))))

...