I′m working on a project for college and I′m trying to imitate a effect on this page: https://u.gg/ for my homepage, I managed to change the backgrounds but now I′m trying to add a "fade" effect, any suggestions? Just found a way to add de 'fade' effecto but I need to match it with the intervals
<!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/
See Question&Answers more detail:os
