Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.01.2022, 19:21
Ops Ops вне форума
Интересующийся
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 21

Добавить эффекта при смене фонового изображения
Имею вот такой код, он крутит по счётчику бекграундные картинки из заданной диры, никак не получается сделать плавное растворение и перетекание из одной картинки в другую. Меняется не то что совсем резко, но той красивой плавности не могу достичь. Вопрос скорее по CSS, хотя мне кажется JS такое тоже умеет.

Код:
<script>
var coin = 1;
var changeBg = function() {
  $('.item').css('background', 'url(assets/img/backgrounds/' + coin++ + '.jpg)');
  if (coin > 3)
    coin = 1;
}
setInterval(changeBg, 3000);
</script>
<style>
.item .background {
background-color: rgba(0,0,0,0.75);
  -webkit-transition: all 0.9s ease-in-out;
  -o-transition: all 0.9s ease-in-out;
  transition: all 0.9s ease-in-out;

}
</style>
<div class="item">
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
<p>1111111</p>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 05.01.2022, 20:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

Ops,
https://javascript.ru/forum/misc/294...tml#post447488
Ответить с цитированием
  #3 (permalink)  
Старый 05.01.2022, 21:25
Ops Ops вне форума
Интересующийся
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 21

Спасибо. Похоже на то что надо . Попробую выдернуть куски кода с опасити.
Ответить с цитированием
  #4 (permalink)  
Старый 05.01.2022, 21:40
Ops Ops вне форума
Интересующийся
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 21

Такой вопрос, а как сделать чтобы у вложенного в div с меняющимся фоном дива опасити оставалась всегда = 1, не менялась вместе с родителем.
Ответить с цитированием
  #5 (permalink)  
Старый 05.01.2022, 22:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

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;
Ответить с цитированием
  #6 (permalink)  
Старый 05.01.2022, 23:18
Ops Ops вне форума
Интересующийся
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 21

Да, спасибо огромное. Но субъективно когда переход сделан кадрами, как по мне (на 60Гц hd монике и мощном компе, вхроме) немного по другому смотрится, более дергано, нежели вариант 1, хотя шаг наверное можно плотнее сделать. Я посмотрел как не наследовать прозрачность родителя, js-скриптом это делается, но я так углубляться не буду. Я по моему уже с таким сталкивался, пседвоклассами вроде как то решал.
Ответить с цитированием
  #7 (permalink)  
Старый 05.01.2022, 23:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

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>
Ответить с цитированием
  #8 (permalink)  
Старый 06.01.2022, 01:46
Ops Ops вне форума
Интересующийся
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 21

Фактически готовое решение для простого слайдера. Быстро работает с большими картинками.
Конечно проще изначально делать слайдер картинками IMG, но у кого фоном уже сделано и по тем или иным причинам не хочется переделывать.
Ещё раз Спасибо.
Ответить с цитированием
  #9 (permalink)  
Старый 07.01.2022, 23:08
Ops Ops вне форума
Интересующийся
Отправить личное сообщение для Ops Посмотреть профиль Найти все сообщения от Ops
 
Регистрация: 03.03.2016
Сообщений: 21

А как можно сделать чтобы одно изображение, при переходе, накладывалось на другое. Т.е. первое изображение растворяется и в этот момент начинает появляться второе, следующая картинка. Что бы уйти от мелькания одноцветного белого фона между картинками.
Ответить с цитированием
  #10 (permalink)  
Старый 08.01.2022, 00:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,351

Сообщение от Ops
первое изображение растворяется и в этот момент начинает появляться второе, следующая картинка.


<!DOCTYPE html>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .carousel {
            position: relative;
            z-index: 1;
            overflow: hidden;
            width: 350px;
            height: 170px;
            border-radius: 8px;
            box-sizing: border-box;
            border: #8B4513 2px solid;
        }

        .carousel:before {
            z-index: -1;
            position: absolute;
            left: 0;
            top: 0;
            content: var(--src_before);
            background-size: cover;
        }

        .carousel:after {
            z-index: -1;
            position: absolute;
            left: 0;
            top: 0;
            content: var(--src_after);
            opacity: var(--opacity_after);
            background-size: cover;
        }


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

                function hide() {
                    op += delta;
                    if (op < 0) {
                        op = 0;
                        delta = -delta;
                        i++;
                        i %= num;
                        let url = src + (i + 1);
                        el.style.setProperty("--src_after", `url('${url}')`);


                    }
                    el.style.setProperty("--opacity_after", op);
                    requestAnimationFrame(op == 0 ? show : hide);
                }

                function show() {
                    op += delta;
                    if (op > 1) op = 1;
                    el.style.setProperty("--opacity_after", op);
                    if (op < 1) requestAnimationFrame(show);
                    else {
                        let url = src + (i + 1);
                        el.style.setProperty("--src_before", `url('${url}')`);
                        delta = -delta;
                        window.setTimeout(hide, pause);
                    }
                }
                requestAnimationFrame(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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как в html форме вместе с файлом передать переменную kupidon Общие вопросы Javascript 7 22.01.2018 14:55
центрирование увеличенного изображения при наведении TAILER jQuery 1 10.01.2014 19:31
Повторное срабатывание .load() у iframe при смене его src vita1ii Events/DOM/Window 5 09.10.2013 13:49
Изменения изображения при выборе из списка hayk Общие вопросы Javascript 10 30.11.2010 10:42
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28