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

background-image opacity
Ops,
как вариант... но лучше к специалистам по css https://stackoverflow.com/questions/...-image-opacity

<!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;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 100%), var(--src);
            background-size: 350px 170px;
        }

        .carousel.show {
            animation: up .8s linear forwards;

        }

        .carousel.hide {
            animation: up .3s  linear backwards;
        }

        .carousel.vertical {
            width: 170px;
            height: 350px;
            background-size: 170px 350px;
        }

        @keyframes up {
            0% {
                background-image: linear-gradient(to right, rgba(255, 255, 255, .9) 0 100%), var(--src);
            }

            20% {
                background-image: linear-gradient(to right, rgba(255, 255, 255, .7) 0 100%), var(--src);
            }

            40% {
                background-image: linear-gradient(to right, rgba(255, 255, 255, .5) 0 100%), var(--src);
            }

            60% {
                background-image: linear-gradient(to right, rgba(255, 255, 255, .3) 0 100%), var(--src);
            }

            80% {
                background-image: linear-gradient(to right, rgba(255, 255, 255, .1) 0 100%), var(--src);
            }

            100% {
                background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0 100%), var(--src);
            }
        }
    </style>

    <script>
        window.addEventListener("DOMContentLoaded", function() {
            document.querySelectorAll(".carousel").forEach(function(el) {
                    let {
                        src,
                        num,
                        pause = 3000,
                        i = 0
                    } = el.dataset;

                    function hide() {
                        el.classList.remove("show");
                        el.classList.add("hide");
                        window.setTimeout(show, 300)
                    }

                    function show() {
                        ++i;
                        el.style.setProperty("--src", `url('${src+i}')`);
                        i %= num;
                        el.classList.remove("hide");
                        el.classList.add("show");
                        window.setTimeout(hide, pause);
                    }
                    show();

                }

            )

        });
    </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>

Последний раз редактировалось рони, 05.01.2022 в 23:15. Причина: i %= num;
Ответить с цитированием