I am new to coding and need help solving a problem. I added my HTML, CSS and JS files below. My goal is to build a website and when the user scrolls down from the brown section to the orange section, I want the card to turn on its axis from front to back, pause two seconds (I need code for the pause too), and then turn again on its axis from back to front (back to the start position).
As you can see, in my JavaScript file, the card turns from front to back, but I don’t know how to code it so that it turns from back to front again. Can anyone help? Thanks in advance.
html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Scroll card flip</title>
<link rel="stylesheet" href="./style.css">
<body>
<section class="one">
</section>
<section class="two">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h1>Font</h1>
</div>
<div class="flip-card-back">
<div class="content">
<h1>Back</h1>
</div>
</div>
</div>
</div>
</section>
<script src="./script.js"></script>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
section{
height: 100vh;
}
.one{
background-color: brown;
display: flex;
justify-content: center;
align-items: center;
}
.two{
background-color: orange;
display: flex;
justify-content: center;
align-items: center;
}
.flip-card {
width: 300px;
height: 300px;
perspective: 1000px;
margin-bottom:50px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden; /* Safari */
}
.flip-card-front{
background-color:blue;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.flip-card-back {
background-color: red;
color: white;
transform: rotateY(180deg);
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
}
.content {
-webkit-transform: translateZ(90px) scale(0.91);
transform: translateZ(90px) scale(0.91);
}
.fliped .flip-card-inner {
transform: rotateY(180deg);
}
JavaScript
const observer = new IntersectionObserver(
entries => {
entries.forEach(entry => {
if (entry.intersectionRatio >= 1 )
{
entry.target.classList.add('fliped' )
}
else {
entry.target.classList.remove('fliped')
}
})
},
{ threshold: [1] },
)
const cards = document.querySelectorAll('.flip-card')
cards.forEach(card => {
observer.observe(card)
})