Показать сообщение отдельно
  #7 (permalink)  
Старый 05.01.2022, 23:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

js animate background-image opacity
Ops,
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .carousel {
            width: 350px;
            height: 170px;
            position: relative;
            border-radius: 8px;
            box-sizing: border-box;
            border: #8B4513 2px solid;
            --op: 0;
            background-image: linear-gradient(to right, rgba(255, 255, 255, var(--op)) 0 100%), var(--src);
            background-size: 350px 170px;
        }

        .carousel.vertical {
            width: 170px;
            height: 350px;
            background-size: 170px 350px;
        }
    </style>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".carousel").forEach(function(el) {
                let {
                    src,
                    num,
                    pause = 3000,
                    i = 0,
                    op = 1,
                    delta = .005
                } = el.dataset;

                function hide() {
                    op += delta;
                    if (op > 1) {
                        op = 1;
                        delta = -delta;
                        ++i;
                        el.style.setProperty("--src", `url('${src+i}')`);
                        i %= num;
                    }
                    el.style.setProperty("--op", op);
                    requestAnimationFrame(op == 1 ? show : hide);
                }

                function show() {
                    op += delta;
                    if (op < 0) op = 0;
                    el.style.setProperty("--op", op);
                    if (op) requestAnimationFrame(show);
                    else {
                        delta = -delta;
                        window.setTimeout(hide, pause);
                    }
                }
                requestAnimationFrame(hide);
            })
        });
    </script>
</head>

<body>
    <div class="carousel" data-pause="3000" data-num=3 data-src='https://loremflickr.com/350/170/kitty,kitten?random='>
        12345
    </div>
    <div class="carousel vertical" data-pause="5000" data-num=12 data-src='https://loremflickr.com/170/350/dog,hound?random='>
        12345
    </div>
</body>

</html>
Ответить с цитированием