Currently, I am utilizing the "scrollorama" plugin to create a parallax effect on my website.
I have a specific requirement where I need to fix the parent div of the animated elements for a certain duration and then release it to allow the next section of code to animate seamlessly....
To better understand my goal, please take a look at this link.
On this particular site, I am aiming to delay the animation of the initial section until the site logo "Prototype" moves up to its designated fixed position. After that, I want the content within the first list item to gradually enter the scene without interference from other sections.
I believe what I'm looking for is known as "pinning," however, I am unsure about how to implement it...
<body>
<a class="fixed" href="prototype.html"><img src="images/logo.png"/></a>
<ul class="curtains">
<li>
<div class="cont clearfix">
<ul>
<li class="img_1"><img src="images/01.jpg"/></li>
<li class="img_2"><img src="images/02.jpg"/></li>
<li class="img_3"><img src="images/03.jpg"/></li>
<li class="img_4"><img src="images/04.jpg"/></li>
<li class="img_5"><img src="images/05.jpg"/></li>
<li class="img_6"><img src="images/06.jpg"/></li>
</ul>
</div>
</li>
</ul>