05.01.2022, 19:21
|
 |
Аспирант
|
|
Регистрация: 03.03.2016
Сообщений: 33
|
|
|
Добавить эффекта при смене фонового изображения
Имею вот такой код, он крутит по счётчику бекграундные картинки из заданной диры, никак не получается сделать плавное растворение и перетекание из одной картинки в другую. Меняется не то что совсем резко, но той красивой плавности не могу достичь. Вопрос скорее по 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> |
|
|
05.01.2022, 20:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
|
|
05.01.2022, 21:25
|
|
Аспирант
|
|
Регистрация: 03.03.2016
Сообщений: 33
|
|
Спасибо. Похоже на то что надо  . Попробую выдернуть куски кода с опасити. |
|
05.01.2022, 21:40
|
|
Аспирант
|
|
Регистрация: 03.03.2016
Сообщений: 33
|
|
|
Такой вопрос, а как сделать чтобы у вложенного в div с меняющимся фоном дива опасити оставалась всегда = 1, не менялась вместе с родителем.
|
|
05.01.2022, 22:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
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;
|
|
05.01.2022, 23:18
|
|
Аспирант
|
|
Регистрация: 03.03.2016
Сообщений: 33
|
|
|
Да, спасибо огромное. Но субъективно когда переход сделан кадрами, как по мне (на 60Гц hd монике и мощном компе, вхроме) немного по другому смотрится, более дергано, нежели вариант 1, хотя шаг наверное можно плотнее сделать. Я посмотрел как не наследовать прозрачность родителя, js-скриптом это делается, но я так углубляться не буду. Я по моему уже с таким сталкивался, пседвоклассами вроде как то решал.
|
|
05.01.2022, 23:59
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
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>
|
|
06.01.2022, 01:46
|
|
Аспирант
|
|
Регистрация: 03.03.2016
Сообщений: 33
|
|
|
Фактически готовое решение для простого слайдера. Быстро работает с большими картинками.
Конечно проще изначально делать слайдер картинками IMG, но у кого фоном уже сделано и по тем или иным причинам не хочется переделывать.
Ещё раз Спасибо.
|
|
07.01.2022, 23:08
|
|
Аспирант
|
|
Регистрация: 03.03.2016
Сообщений: 33
|
|
|
А как можно сделать чтобы одно изображение, при переходе, накладывалось на другое. Т.е. первое изображение растворяется и в этот момент начинает появляться второе, следующая картинка. Что бы уйти от мелькания одноцветного белого фона между картинками.
|
|
08.01.2022, 00:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
|
Сообщение от 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>
|
|
|
|
