I am currently working on a project that involves multiple CSS animations. However, I am facing an issue where these animations only occur once when the page initially loads. I would like them to trigger every time the user scrolls past them, regardless of whether they are scrolling up or down the page. Unfortunately, my attempts at using JavaScript to achieve this have been unsuccessful so far. The specific animations include a colored box sliding in from the left and body copy/header elements fading in from the bottom. I aim to stagger these two animations slightly, with the text appearing after the box has slid in halfway. I have tried grouping these divs together to reveal them simultaneously upon scroll, as well as treating them as separate entities within my JavaScript code.
$(window).scroll(function() {
$('#Featuring_Animated').each(function() {
var imagePos = $(this).offset().top;
var imageHeight = $(this).height();
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
$(this).addClass("slide-in-left");
} else {
$(this).removeClass("slide-in-left");
}
});
});
$('.element-to-hide').css('visibility', 'hidden');/**
* ----------------------------------------
* animation slide-in-left
* ----------------------------------------
*/
.Featuring_Textbox {
-webkit-animation: slide-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
visibility: visible !important;
}
@-webkit-keyframes slide-in-left {
0% {
-webkit-transform: translateX(-1000px);
transform: translateX(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-bottom left sections
* ----------------------------------------
*/
#Featuring_About,
#Featuring_Heading {
-webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) .3s both;
visibility: visible !important;
}
@-webkit-keyframes fade-in-bottom {
0% {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
/**
* ----------------------------------------
* animation fade-in-bottom left sections
* ----------------------------------------
*/
#Featuring_Textbox {
opacity: 0.9;
fill: #3B4A5C;
}
.Featuring_Textbox {
position: absolute;
overflow: visible;
width: 640px;
height: 552px;
left: 0px;
top: 0px;
}
#Featuring_About {
left: 74px;
top: 238px;
position: absolute;
text-align: left;
font-size: 18px;
color: white;
}
#Featuring_Heading {
left: 74px;
top: 143px;
position: absolute;
text-align: left;
font-size: 40px;
color: white;
}<html>
<head>
<script language="JavaScript" type="text/javascript" src="colocation.js"></script>
</head>
<div class="Featuring_Animated element-to-hide" style="visibility:visible;">
<svg class="Featuring_Textbox">
<rect id="Featuring_Textbox" rx="0" ry="0" x="0" y="0" width="640" height="552"></rect>
</svg>
<div id="Featuring_About">
<span>Sample Text</span>
</div>
<div id="Featuring_Heading">
<span>FEATURING</span>
</div>
</div>
</html>