反转CSS动画

Reversing CSS Animation

本文关键字：动画 CSS 反转      更新时间：2024-07-20

好了，大家好，现在是第四小时，我没主意了。在我的网站上(http://www.jakerevans.com/my-story/)，一开始向下滚动，左侧菜单就会像我希望的那样淡出。我希望当用户到达页面底部或单击右下角附近的"返回顶部"按钮时，菜单会淡出。以下是控制此页面上大部分内容的JavaScript：

<!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>

有人有什么想法吗？？？？提前感谢！！！！

您应该有一个属性为opacity: 0的hidden类来隐藏元素。根据滚动位置，您可以添加或删除此类，具体取决于您是否希望显示元素。然后，将transition: .2s（或任意时间）添加到要显示和隐藏的元素（而不是hidden类）中。添加和删除隐藏类时，该元素将设置淡入和淡出的动画。

相关文章：