Reversing CSS Animation
Question
Okay everyone, going on hour four here and I'm out of ideas. On my site ( http://www.jakerevans.com/my-story/ ), as soon as you start to scroll down, the left-hand menu fades out like I want it to.I want the menu to fade back in when the user either reaches the bottom of the page or clicks on the "Return to top" button near the bottom right-hand corner. Here's the JavaScript that controls most everything on this page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jakerevans.com/wp- content/themes/enfold-child/assets/css/timelinecss.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var scrollPercent;
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window.parent).scroll( function(){
var oldHeader;
var currY = $(this).scrollTop();
var postHeight = $(this).height();
var scrollHeight = $('.timeline_container').height();
// Current percentual position
var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;
if(scrollPercent > 0 && scrollPercent < 89){
$("#header", parent.document.body).animate({'opacity':'0'},1000);
}
if( scrollPercent > 4){
$(".baby_pic").animate({'opacity':'1'});
}
if( scrollPercent > 7){
$("#background-image-1", parent.document.body).animate({'opacity':'0'}, 1000);
$("#background-image-2", parent.document.body).animate({'opacity':'1'}, 1000);
}
if( scrollPercent > 15){
$("#background-image-2", parent.document.body).animate({'opacity':'0'}, 1000);
$("#background-image-3", parent.document.body).animate({'opacity':'1'}, 1000);
}
if( scrollPercent > 20){
$(".nerdy_child_text", parent.document.body).animate({'opacity':'1'}, 1000);
}
if( scrollPercent > 30){
$(".nerdy_pic", parent.document.body).animate({'opacity':'1'}, 1000);
}
if( scrollPercent > 40){
$(".nerdy_child_text_2", parent.document.body).animate({'opacity':'1'}, 1000);
}
if( scrollPercent > 50){
$(".cloud_pic", parent.document.body).animate({'opacity':'1'});
}
if( scrollPercent > 60){
$(".nerdy_child_text_2", parent.document.body).css({'visibility':'hidden'});
}
if( scrollPercent > 63){
$(".nerdy_child_text_3", parent.document.body).animate({'opacity':'1'});
}
if( scrollPercent > 70){
$(".nerdy_child_text_4", parent.document.body).animate({'opacity':'1'});
}
if( scrollPercent > 71){
$(".cloud_pic", parent.document.body).css({'visibility':'hidden'});
$(".book_pic", parent.document.body).animate({'opacity':'1'});
}
if( scrollPercent > 75){
$(".nerdy_child_text_4", parent.document.body).css({'visibility':'hidden'});
}
if( scrollPercent > 80){
$(".nerdy_child_text_5", parent.document.body).animate({'opacity':'1'});
}
if( scrollPercent > 81){
$(".book_pic", parent.document.body).css({'visibility':'hidden'});
$(".game_pic", parent.document.body).animate({'opacity':'1'});
}
if( scrollPercent > 85){
$(".nerdy_child_text_5", parent.document.body).css({'visibility':'hidden'});
}
if( scrollPercent > 88){
$(".nerdy_child_text_6", parent.document.body).animate({'opacity':'1'});
}
if( scrollPercent > 89){
$(".game_pic", parent.document.body).css({'visibility':'hidden'});
$(".girl_pic", parent.document.body).animate({'opacity':'1'});
$("#header", parent.document.body).stop();
$("#header", parent.document.body).css({'opacity':'1'});
}
});
});
</script>
</head>
<body>
<div class="timeline_container">
<div class="main_timeline"></div>
<div class="top_line"></div>
<div class="regular_lines_1"></div>
<div class="regular_lines_2"></div>
<div class="decade_line"></div>
<div class="regular_lines_3"></div>
<div class="arrow_pic_div">
<a href="#anchor">
<img class="arrow_pic" src="http://www.jakerevans.com/wp- content/uploads/2015/02/down-arrow-circle-hi1.png">
</a>
</div>
<div class="sample_banner">
<p class="banner_text_1">1987: Wichita, Kansas - Where it all began </p>
<div class="baby_div">
<img class="baby_pic" src="http://www.jakerevans.com/wp-content/uploads/2015/02/Untitled.png">
</div>
</div>
<p class="year_1987">The Story of Jake Evans</p>
<div class="sample_banner_2">
<p class="banner_text_2">Born to Tammy and Steven Evans</p>
</div>
<div class="sample_banner_3">
<p class="banner_text_3">At 12:03 PM</br>April 21st</br>1987...</p>
</div>
<div class="sample_banner_4">
<p class="banner_text_4">The Day the World Changed Forever...</p>
</div>
<div class="placement_object_1"></div>
</div>
</body>
Anyone have any ideas???? Thanks in advance!!!!
1 answers
solution1
0 2015-02-28 05:21:44
You should have a hidden class that has a property of opacity: 0 To hide the element. Based on the scroll position, you add or remove this class depending on whether you want the element shown. Then, add transition: .2s (or whatever time you want) to the element you want to show and hide (not the hidden class). The element will animate fading in and out as you add and remove the hidden class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.