如何淡出动画背景图片(全尺寸) [英] How to fade animate background images (full size)
本文介绍了如何淡出动画背景图片(全尺寸)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在寻找一个脚本!我想做这个网站的页脚(动画的背景图像之间的书写不要错过任何更新): https://getgoldee.com/
I'm looking for a script ! I want to do like the footer of this website ( animation between the background images where it's written '' Don't miss any update '') : https://getgoldee.com/
有没有人知道类似的脚本或者能够从这个网站获取?
Does anyone know a similar script or is able to get it from this website ?
感谢您的回答!
推荐答案
将使用几个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>
这篇关于如何淡出动画背景图片(全尺寸)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文