问反转CSS动画
EN

Stack Overflow用户

提问于 2015-02-28 08:34:21

回答 1查看 63关注 0票数 0

好了各位，快到四个小时了，我没主意了。在我的网站(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>

谁有什么想法？提前感谢！

css

animation

javascript

jquery

html

回答 1

Stack Overflow用户

发布于 2015-02-28 13:21:44

您应该有一个具有opacity: 0属性的hidden类来隐藏元素。根据滚动位置，您可以根据是否希望显示元素来添加或删除此类。然后，向要显示和隐藏的元素(而不是hidden类)添加transition: .2s (或您想要的任何时间)。当您添加和删除隐藏类时，该元素将以动画方式淡入和淡出。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28776663

复制

相似问题

问反转CSS动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反转CSS动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反转CSS动画
EN