如何淡化动画背景图像（全尺寸）[关闭]

Posted 2023-03-06

【中文标题】如何淡化动画背景图像（全尺寸）[关闭]

【英文标题】：How to fade animate background images (full size) [closed]

【发布时间】：2014-06-09 19:27:30

【问题描述】：

我正在寻找脚本！我想做喜欢这个网站的页脚（背景图片之间的动画写着''不要错过任何更新''）：https://getgoldee.com/

有没有人知道类似的脚本或者可以从这个网站得到它？

感谢您的回答！

【问题讨论】：

查看源代码：getgoldee.com

显然我做了右键，但我找不到有问题的脚本......这对我来说有点复杂！

在第1122行及以下... Ctrl + F 在查看源代码后也是一个很好的快捷方式:)

它只是淡入淡出三个图像，例如：getgoldee.com/img/footer-bg1.png

只是淡入淡出？好吧，我会试试的 ！我知道脚本在哪里，但不知道做这个的人..

【参考方案1】：

这就是我会用几条 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>

【讨论】：

另外不要忘记将您的 jQuery 代码包装在 document.ready 函数中，例如 jQuery(function($) /*code here*/ );

【参考方案2】：

如果您分析其来源，则处理此动画的代码在文件中：

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

【讨论】：

非常感谢！但我有一个错误，不知道为什么！ ReferenceError: $ 不是从 : var footerBgContainer = $('.footer-bgs');

$ 是 jQuery。您需要 jQuery 库来运行代码。