I have been experimenting with creating a smooth fade-in and fade-out transition between two pages that feature full-screen images. My current approach involves using the swup plugin.
To display a new full-screen image on each page, I assign a class to every HTML element, like so:
<!DOCTYPE html>
<html lang="en" class="home_bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
</nav>
</body>
</html>
And for the CSS styling:
*{
margin: 0;
padding: 0;
}
.home_bg {
background: url(img/landscape.jpg) no-repeat center center fixed;
background-size: cover;
}
.about_bg {
background: url(img/ocean.jpg) no-repeat center center fixed;
background-size: cover;
}
nav{
font-size: 24px;
}
Here is the HTML structure for the transition effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer src="node_modules/swup/dist/swup.min.js"></script>
<script defer src="script.js"></script>
<link rel="stylesheet" href="style.css">
<title>Home</title>
</head>
<body>
<nav>
<a href="/index.html">Home</a>
<a href="/about.html">About</a>
</nav>
<main id="swup" class="transition-fade">
<h1>This is home</h1>
</main>
</body>
</html>
And the corresponding CSS styles:
*{
margin: 0;
padding: 0;
}
nav{
font-size: 24px;
}
.transition-fade{
opacity: 1;
transition: 500ms;
}
html.is-animating .transition-fade {
opacity: 0;
}
To enable the transition effect, include this one-line JavaScript code:
const swup = new Swup();
However, I am currently facing a challenge in getting the full-screen images and the transition effect to work together seamlessly. It appears that the issue arises from placing the image within the 'swup' element, leading to difficulties in controlling its size and proportions even with a dedicated class.
I have tried numerous solutions and searched online for several days without success. As a beginner in HTML, CSS, and JavaScript, I am wondering if I should explore alternative approaches.
Any guidance or assistance on this matter would be greatly appreciated.
Thank you.