带有淡入淡出到黑色过渡的图像轮播
Image Carousel with Fade to Black Transition
我需要制作一个渐变过渡为黑色的旋转木马,或者更好的是像 #2B303A
这样的深灰色。我在网上找到了这段代码,效果很好,唯一的问题是淡入淡出效果是一种我不喜欢的非常亮的白色,而且很烦人。
如何让它在图像之间淡化为黑色?
$(document).ready(function() {
//Carousel
var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
var len = vet_url.length;
var i = 0;
function swapBackgrounds() {
$("#background").animate({
opacity: 0
}, 700, function() {
$($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
opacity: 1
}, 700);
});
i++;
}
setInterval(swapBackgrounds, 10000);
});
#background {
background-color: #2B303A;
position: absolute;
z-index: 1;
min-height: 100%;
min-width: 100%;
background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
您需要在 html 元素上执行此操作,至少在您的测试用例中。
html
{
background-color:#2B303A;
}
jquery 的 .animate 不适用于背景颜色,但它可以用于:
https://github.com/jquery/jquery-color
将不透明度设置为 0 可以让您看到轮播下方的元素,在这种情况下,除了正文本身什么都没有。 body 的 background-color
没有设置,所以它是默认的白色。将 background-color
设置为黑色解决了问题。
我需要制作一个渐变过渡为黑色的旋转木马,或者更好的是像 #2B303A
这样的深灰色。我在网上找到了这段代码,效果很好,唯一的问题是淡入淡出效果是一种我不喜欢的非常亮的白色,而且很烦人。
如何让它在图像之间淡化为黑色?
$(document).ready(function() {
//Carousel
var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
var len = vet_url.length;
var i = 0;
function swapBackgrounds() {
$("#background").animate({
opacity: 0
}, 700, function() {
$($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
opacity: 1
}, 700);
});
i++;
}
setInterval(swapBackgrounds, 10000);
});
#background {
background-color: #2B303A;
position: absolute;
z-index: 1;
min-height: 100%;
min-width: 100%;
background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
您需要在 html 元素上执行此操作,至少在您的测试用例中。
html
{
background-color:#2B303A;
}
jquery 的 .animate 不适用于背景颜色,但它可以用于: https://github.com/jquery/jquery-color
将不透明度设置为 0 可以让您看到轮播下方的元素,在这种情况下,除了正文本身什么都没有。 body 的 background-color
没有设置,所以它是默认的白色。将 background-color
设置为黑色解决了问题。