javascript - How to fade animate background images (full size) -
i'm looking script ! want footer of website ( animation between background images it's written '' don't miss update '') : https://getgoldee.com/
does know similar script or able website ?
thank answers !
this how couple of jq lines:
var $bg = $('#bg'), $bgdiv = $('div', $bg), // cache elements n = $bgdiv.length, // count them (used loop % 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>
Comments
Post a Comment