I am using curtains animation in my web page Below is the link to codepen for animation demo
I used above example but I am unable to achieve this on multiple images. also it have some 100vh height, width and absolute position styling due to that I can't keep my page's original style while using this animation.
Below is the code of my webpage
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jelly animation</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<h1 class="text-center">My images</h1>
<div class="row">
<div class="col-md-6">
<img class="image-responsive" src="./staff-1.jpg" crossorigin="anonymous" />
</div>
<div class="col-md-6">
<img src="./staff-1.jpg" crossorigin="anonymous" />
</div>
</div>
<div class="intro">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ullam. Cum, expedita?
Tenetur a autem similique possimus minima quos dolorem harum fugit maiores corporis,
eligendi recusandae provident laudantium impedit veniam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ullam. Cum, expedita?
Tenetur a autem similique possimus minima quos dolorem harum fugit maiores corporis,
eligendi recusandae provident laudantium impedit veniam.</p>
</div>
</div>
<div class="container">
<h1 class="text-center">My images</h1>
<div class="row">
<div class="col-md-6">
<img class="image-responsive" src="./staff-1.jpg" crossorigin="anonymous" />
</div>
<div class="col-md-6">
<img src="./staff-1.jpg" crossorigin="anonymous" />
</div>
</div>
<div class="intro">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ullam. Cum, expedita?
Tenetur a autem similique possimus minima quos dolorem harum fugit maiores corporis,
eligendi recusandae provident laudantium impedit veniam.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ullam. Cum, expedita?
Tenetur a autem similique possimus minima quos dolorem harum fugit maiores corporis,
eligendi recusandae provident laudantium impedit veniam.</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
crossorigin="anonymous"></script>
<script src="https://www.curtainsjs.com/build/curtains.min.js" type="text/javascript">
</script>
<script src="./index.js"></script>
</body>
</html>
and here is index.css
.container{
margin-top: 64px;
}
img{
margin-top: 32px;
width: 100%;
height: auto;
}
.intro{
margin-top: 32px;
}
.intro p{
text-align: center;
}
Can someone please help me to apply this animation on my page (all 4 images) without changing page styling or image positions even while on scrolling images must not be fade away. because i was trying and anyhow applied on 2 of them but they were fading away while scrolling. Thanks