Question

我正在研究一个大学项目，并且试图在此页面上模仿效果：https://u.gg/对于我的主页，我设法更改了背景，但是现在我想添加一个“淡入淡出”效果，有什么建议吗？刚刚找到一种添加“淡入淡出”效果的方法，但我需要将其与间隔进行匹配

<!DOCTYPE html>
<html>
<head>
    <title>Trip Guru</title>
    <meta charset="utf-8" />
    <link href="main.css" rel="stylesheet" />
    <link href="Content/bootstrap-grid.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
    <div class="home" id="landing_home">
        <nav class="navbar bg-transparent">
            <a class="navbar-brand" href="index.html"><img src="https://i.postimg.cc/Y0VvwJQ2/logo-white.png" class="logo" /></a>
        </nav>
    </div>


    <script src="main_script.js"></script>
    <script src="scripts/jquery-3.3.1.min.js"></script>
    <script src="scripts/bootstrap.js"></script> <!--Bootstrap JS-->
</body>
</html>

CSS

body,html {
    height:100%;
}
.logo {
    width:50px;
    height:50px;
}
.home {
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size:  cover;
}

JS

 $(document).ready(function(){
var header = $('#landing_home');

var backgrounds = new Array(

    'url(https://i.postimg.cc/nM76hD9j/bridge.jpg)'
  , 'url(https://i.postimg.cc/HV9RQ12T/lake.jpg)'
  , 'url(https://i.postimg.cc/686Scbjn/mountain.jpg)'
  , 'url(https://i.postimg.cc/qNmF5cSY/river.jpg)'
  , 'url(https://i.postimg.cc/Ff765dQK/villa.jpg)'
);

var current = 0;

function nextBackground() {
    current++;
    current = current % backgrounds.length;
    header.fadeTo("slow", 0.5)
    header.css('background-image', backgrounds[current]);
    header.fadeTo("slow", 1)
}
setInterval(nextBackground, 1000);

header.css('background-image', backgrounds[0]);
});

https://jsfiddle.net/zqtkme2x/

Answer 1

 "application": 
  [
    {
      "groupname": "adgroup1",
      "roles": [ 
        "Permission1",
        "Permission2",
        "Permission3",
        "Permission4",
        "Permission5",    
        "Permission6" 
      ]
    },
    {
      "groupname": "adgroup2",
      "roles": [ 
        "Permission1",
        "Permission2",
        "Permission4",
        "Permission5",    
        "Permission6" 
      ]
    }

JQuery animate

function nextBackground() {
  header.animate({opacity: 0}, 0);
    current++;
    current = current % backgrounds.length;

    header.css('background-image', backgrounds[current]).animate({opacity: 1}, 'slow')

}


setInterval(nextBackground, 3000);

header.css('background-image',backgrounds[0]).animate({opacity: 1}, 'slow')

不透明度值可能需要重新设置才能运行

header.animate({opacity: 1}, 'slow')

Answer 2

我总是使用此类在我的项目中制作动画：

在CSS文件中：

.animated {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fast {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

然后使用例如

<div class="animated fadeIn">
   <span> Hello </hello>
</div>

并且您可以使用class fast快速执行fadeIn。

<div class="animated fadeIn fast">
   <span> Hello </hello>
</div>

对不断变化的背景进行动画处理

2 个答案: