Wondering how to fade in one CSS id on page load and then smoothly transition to another after a few seconds? Here are the ids:
#background {
background: url("images/am_photography_bg.jpg") no-repeat center -25px fixed;
background-size: 100%;
height: 100vh;
}
#background-blurred {
background: url("images/am_photography_bg_blurred.jpg") no-repeat center -25px fixed;
background-size: 100%;
height:100vh;
opacity:.5;
}
This is the HTML structure:
<html>
<head>
</head>
<body>
<section>
<div id="background"></div>
</section>
</html>
Looking for suggestions. I attempted to incorporate jQuery with this code:
$("#background").delay(1500).animate({
background: url("images/am_photography_bg_blurred.jpg") no-repeat center -25px fixed,
opacity: .5,
}, 1000, function() {
// Animation complete.
});
Combining everything like this:
$(document).ready(function() {
$('body').css('display', 'none')
$('body').fadeIn(1500);
$("#background").delay(1500).animate({
background: url("images/am_photography_bg_blurred.jpg") no-repeat center -25px fixed,
opacity: .5,
}, 1000, function() {
// Animation complete.
});
$("h1").delay(2000).animate({
top: -30,
opacity: 1,
}, 700, function() {
// Animation complete.
});
$('.link').click(function() {
event.preventDefault();
newLocation = this.href;
$('body').fadeOut(500, newpage);
});
});
function newpage() {
window.location = newLocation;
}
However, encountering some issues.