Whenever I reach the scroll position of 1400 and then scroll back to the top, my chat elements (chat1, chat2, chat3, chat4) receive an "empty" inline style but only for a duration of 1 second. After that, the fadeIn effect occurs again every time I scroll with a 1-second delay.
Essentially, I aim to display four images consecutively when scrolled to 1400 and make them disappear when scrolling back to the top :)
(window).scroll(function() {
var scrollPosition = $(window).scrollTop();
var phoneScreen = $('.phone-screen');
var chat1 = phoneScreen.find('#chat1');
var chat2 = phoneScreen.find('#chat2');
var chat3 = phoneScreen.find('#chat3');
var chat4 = phoneScreen.find('#chat4');
if(scrollPosition >= 1400){
chat1.delay(1000).fadeIn(200, function(){
chat2.delay(200).fadeIn(200, function(){
chat3.delay(200).fadeIn(200, function(){
chat4.delay(200).fadeIn(200);
});
});
});
}else{
chat1.removeAttr('style');
chat2.css('display', '');
chat3.css('display', '');
chat4.css('display', '');
}
});
This is my CSS:
#chat1{
position: relative;
top: -1356px;
z-index: 16;
display: none;
}
This is my HTML:
<div class="col-md-4">
<div class="phone-container">
<img src="images/Tuto/phone-frame.png" alt="Phone frame">
<div class="phone-screen">
<img src="images/Tuto/phone-background.png" alt="Phone background" id="phone-bg">
<img src="images/Tuto/phone-footer-explore.png" alt="phone footer explore" id="phone-fot-exp">
<div class="profile-screen">
<img src="images/Tuto/Joanna.png" alt="Girl Profile" id="Girl-one-prof">
<img src="images/Tuto/szymon.png" alt="Girl Profile" id="boy-one-prof">
</div>
<img src="images/Tuto/match.png" alt="match" class="match">
<img src="images/Tuto/chat.png" alt="chat" id="chat">
<img src="images/Tuto/chat1.png" alt="chat1" id="chat1">
<img src="images/Tuto/chat2.png" alt="chat2" id="chat2">
<img src="images/Tuto/chat3.png" alt="chat3" id="chat3">
<img src="images/Tuto/chat4.png" alt="chat4" id="chat4">
</div>
</div>