如何淡入淡出动画背景图像(全尺寸)
How to fade animate background images (full size)
我在找一个脚本!我想喜欢这个网站的页脚(背景图像之间的动画,上面写着"不要错过任何更新"):https://getgoldee.com/
有人知道类似的脚本吗?或者可以从这个网站上获得它吗?
谢谢你的回答!
这就是我使用几个jQ行的方法:
var $bg = $('#bg'),
$bgDIV = $('div', $bg), // Cache your elements
n = $bgDIV.length, // count them (used to loop with % reminder)
c = 0; // counter
(function loopBG(){
$bgDIV.eq(++c%n).hide().appendTo($bg).fadeTo(3000,1, loopBG);
}()); // start fade animation
*{margin:0; padding:0;}
body{
width:100%;
height:100%;
}
#bg{
position:absolute;
top:0;
width:100%;
height:100%;
}
#bg:after{
content:"";
position:absolute;
top:0; left:0;
z-index:1;
width:100%;
height:100%;
background:url(//i.stack.imgur.com/D0AZ1.png);
}
#bg > div{
position:absolute;
top:0;
width:100%;
height:100%;
background: none 50%;
background-size: cover;
}
#bg > #one{ background-image: url('//i.stack.imgur.com/T3U9b.png'); }
#bg > #two{ background-image: url('//i.stack.imgur.com/UKeA2.png'); }
#bg > #three{ background-image: url('//i.stack.imgur.com/hrArW.png'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
如果分析其来源,则处理此动画的代码在文件中:
https://getgoldee.com/js/main.js
代码很简单:
var footerBgContainer = $('.footer-bgs');
function setFooterBackground(bgNumber) {
var prev = footerBgContainer.find('.bg');
setTimeout(function () {
prev.remove();
}, 4100);
var el = document.createElement('div');
el.className += 'bg bg' + bgNumber;
footerBgContainer.append(el);
setTimeout(function () {
el.className += ' show';
}, 20);
}
function footerBgRotating(interval) {
var current = 1;
setInterval(function () {
setFooterBackground((current % 3) + 1);
current++;
}, interval);
}
footerBgRotating(4000);
正如您所看到的,它使用超时函数来更改CSS类。
样式为:(动画在CSS中)
footer .bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
-webkit-transition: opacity 4s linear;
-moz-transition: opacity 4s linear;
-o-transition: opacity 4s linear;
transition: opacity 4s linear
}
footer .bg.show {
opacity: 1;
-webkit-transition: opacity 4s linear;
-moz-transition: opacity 4s linear;
-o-transition: opacity 4s linear;
transition: opacity 4s linear
}
footer .bg.bg1 {
background: url("../img/footer-bg1.png") no-repeat;
background-size: cover
}
footer .bg.bg2 {
background: url("../img/footer-bg2.png") no-repeat;
background-size: cover
}
footer .bg.bg3 {
background: url("../img/footer-bg3.png") no-repeat;
background-size: cover
}
相关文章:
- 可以在这里为背景图像设置滤镜吗
- 使用 js 将背景图像设置为 HTML
- 如何使用css动画/javascript使具有背景图像的元素出现
- 循环浏览多个身体背景图像
- 背景图像顶部的滚动图像不移动
- 在pdfmake中嵌入背景图像
- 修复选择菜单时的背景图像
- 使用css()设置背景图像;不起作用
- 鼠标悬停时如何居中放大背景图像
- 强制谷歌为javascript背景图像编制索引
- 淡入不带HTML的背景图像
- 具有淡入淡出效果的全背景图像
- 未加载随机背景图像
- 背景图像前显示Javascript警报
- javascript背景图像位置循环
- CSS动画背景图像的过渡越来越暗
- "Ken Burns效应”;悬停背景图像
- 通过ID JavaScript显示随机背景图像
- JavaScript背景图像
- 带有图像和背景图像的ClipTo