Curtains Animation isn't working on multiple images

Question

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/bootstrap@4.6.0/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/bootstrap@4.6.0/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

Please could you put your code into a proper snippet that we can run and see what the problem is. At the moment it is incomplete - complaining about lack of jquery - and it does not have any images to load. See [link]https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, May 27 '21 at 18:57
@AHaworth Thanks for taking interest here is the my code link https://codepen.io/afzalali/pen/vYxeGbm where I want to apply animation and here is the link to original animation https://codepen.io/robertox85/pen/XWdzdmO — Afzal Ali, May 28 '21 at 07:39
Hi, I can't see where you have tried to integrate the curtains lib into your snippet. A warning: just the one moving image is taking up 70% of my GPU and I am on a high spec laptop. This is battery-draining stuff. — A Haworth, May 28 '21 at 13:11
Hi, I tried applying but it just messed up the page, that is why i remove it from my page so you can see my actual design. and as per GPU usage i don't have any issue. can you help me applying these on all 4 pages, keeping design. — Afzal Ali, May 28 '21 at 16:53

Curtains Animation isn't working on multiple images

0 Answers0