Currently, I am using fadeIn and fadeOut functions with jQuery to create a fading effect. However, when the final fade out occurs, the entire CSS table fades out and the background image of the CSS body comes into view. Despite setting the background-position to center-center, jQuery resets the image back to a position of left-bottom after the animation is completed. My goal is to maintain the background image in the center-center position.
To address this issue, I attempted to encapsulate everything within a <figure> wrapper instead of directly in the body element. Unfortunately, this resulted in the screen turning completely white once the animation finished.
Below is the HTML and jQuery code:
<html>
<head lang="en">
<link type="text/css" rel="stylesheet" href="site.css" media="screen">
<script type="text/javascript" src="jquery.js"></script>
<meta charset="UTF-8">
<script>
$(document).ready(function() {
$(".firstFade").fadeIn(5000).delay(10000).fadeOut(7000);
$(".secondFade").delay(6000).fadeIn(5000).delay(3000).fadeOut(1000);
$("#tableCell5Text").delay(14500).fadeOut(1000);
$(".container").delay(15000).fadeOut(7000);
});
</script>
</head>
<body>
<figure id="pathImg">
<div class="container" id="table">
<div class="container containerRow" id="tableRow">
<div class="container containerCell" id="tableCell">
<img src="images/img1.jpg" alt="" width="150" height="150" class="hidden firstFade" id="img1">
</div>
</div>
<div class="container containerRow" id="tableRow2">
<div class="container containerCell" id="tableCell2">
<img src="images/img2.png" alt="" height="85" width="77" class="hidden firstFade" id="img2">
</div>
</div>
<div class="container containerRow" id="tableRow3">
<div class="container containerCell" id="tableCell3">
<p class="hidden firstFade" id="tableCell3Text">some text</p>
</div>
</div>
<div class="container containerRow" id="tableRow4">
<div class="container containerCell" id="tableCell4">
<h2 class="hidden secondFade" id="tableCell4Text">some text</h2>
</div>
</div>
<div class="container containerRow" id="containerRow5">
<div class="container containerCell" id="containerCell5">
<h1 id="tableCell5Text">some text</h1>
</div>
</div>
</div>
</figure>
</body>
CSS styling:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#pathImg {
margin: 0;
padding: 0;
background-image: url(images/sunnySkies.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.hidden {
display: none;
}
#table {
display: table;
height: 100vh;
width: 100vw;
text-align: center;
background-color: #ffffff;
}
.containerRow {
display: table-row;
}
.containerCell {
display: table-cell;
}
#tableCell {
height: 20vh;
}
#tableCell2 {
height: 15vh;
vertical-align: middle;
}
#tableCell3 {
height: 10vh;
vertical-align: top;
}
#tableCell4 {
height: 5vh;
vertical-align: top;
}
#tableCell3Text {
font-family: 'Tangerine', cursive;
font-size: 300%;
color: #444444;
}
#tableCell4Text {
font-family: arial;
color: #444444;
}
#tableCell5Text {
font-family: arial;
color: #444444;
}
#img1 {
margin: 5vh 0 0 0;
padding: 5px;
border: 2px solid #444444;
border-radius: 5px;
background-color: gray;
}