加载和滚动时的 CSS、Javascript 动画答案

【问题标题】：CSS, Javascript Animation on load and scroll加载和滚动时的 CSS、Javascript 动画
【发布时间】：2016-08-23 22:05:41
【问题描述】：

我想创建一个带有分层卡片的单页网站。在页面加载时，前两张卡片必须向下移动（动画）以显示其内容。当用户向下滚动时，当一张卡片在屏幕上达到某个像素高度时，其他卡片也必须逐张向下移动。执行此操作的最佳 javascript 是什么？或者有没有更好的方法没有javascript？动画与旧浏览器一起工作并不重要。解释我想做的事情的代码和图像也在下面。

代码如下：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Animation Test</title>
    <style>
    body {
        background-color: white;
        margin: 0;
        padding: 0;
        color: black;
        text-align: center; 
    }
    .shadow {
        /* 35% black box shadow */
        -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.35);
        -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.35);
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.35);
    }
    .container {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: -10;
    }
    #card_1 {
        position: relative;
        padding-top: 50px;
        width: 100%;
        height: 300px;
        background-color: red; 
        z-index: 0;
    }
    #card_2 {
        position: relative;
        padding-top: 50px;
        width: 100%;
        height: 300px;
        background-color: green; 
        z-index: -1;
    }
    #card_3 {
        position: relative;
        width: 100%;
        padding-top: 50px;
        height: 300px;
        background-color: blue; 
        z-index: -2;
    }
      #card_4 {
        position: relative;
        width: 100%;
        padding-top: 50px;
        height: 300px;
        background-color: yellow; 
        z-index: -3;
    }
    #card_5 {
        position: relative;
        width: 100%;
        padding-top: 50px;
        height: 300px;
        background-color: orange; 
        z-index: -4;
    }
    #card_6 {
        position: relative;
        width: 100%;
        height: 300px;
        background-color: white; 
        z-index: -5;
    }
    </style>
    </head>

    <body>
        <div class="container">
            <div id="card_1" class="shadow">
                <h2>Card 1</h2>
            </div>
                    <div id="card_2" class="shadow">
                <h2>Card 2</h2>
            </div>
            <div id="card_3" class="shadow">
                <h2>Card 3</h2>
            </div>
            <div id="card_4" class="shadow">
                <h2>Card 4</h2>
            </div>
            <div id="card_5" class="shadow">
                <h2>Card 5</h2>
            </div>
            <div id="card_6" class="shadow">
            </div>
        <!-- end .container -->
        </div>
    </body>
    </html>

卡片开始条件：

页面加载后的卡片：

页面滚动卡片：

【问题讨论】：

“有人能这么好心，写下这个例子网站的代码吗？”据我所知，您只编写了 HTML 和 CSS。 StackOverflow 可以为您提供帮助，但您需要自己尝试一下，或进行一些研究。
谢谢，编辑了我的问题以寻求最佳方法。最好的JavaScript？最好的其他方式？

标签： javascript css animation

【解决方案1】：

如果没有 Javascript，这几乎是不可能的，我根据Scott Dowding's solution 做了一个解决方案

jQuery('document').ready(function(){

  //Function based in https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling
  //Scott Dowding is solution
function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

  jQuery.fn.minimize = function(){
     this.removeClass("maximize");
     this.addClass("minimize");
  };
  
  jQuery.fn.maximize = function(){
     this.removeClass("minimize");
     this.addClass("maximize");
  };
  
  //Maximize the first card after load
  jQuery('.card').eq(0).maximize();
  
 jQuery(window).on("scroll", function() {
   
  jQuery('.card').each(function(i) {
    
   if(isScrolledIntoView( jQuery('.card').eq(i) ) ) {
      jQuery('.card').eq(i).maximize();
   }else{
      jQuery('.card').eq(i).minimize();
   }
                       
  }); 
 });
  
});

body {
        background-color: white;
        margin: 0;
        padding: 0;
        color: black;
        text-align: center; 
    }
  .container {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 100%;
        z-index: -10;
     }
    .transition{
         -webkit-transition: all ease-out 1s;
        -moz-transition: all  ease-out 1s;
        -o-transition: all ease-out 1s;
        transition: all  ease-out 1s;
     }
    .card {
           height: 300px;
           -webkit-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.35);
           -moz-box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.35);
           box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.35);
    }

    .card.minimize{
      -webkit-transition: all  ease-out 1s;
      -moz-transition: all  ease-out 1s;
      -o-transition: all  ease-out 1s;
      transition: all ease-out 1s;
      height:80px;
      padding-top: 20px;
    }

    .card.maximize {
      -webkit-transition: all  ease-out 1s;
      -moz-transition: all  ease-out 1s;
      -o-transition: all  ease-out 1s;
      transition: all ease-out 1s;
      position: relative;
      padding-top: 50px;
      width: 100%;
      height: 400px;
    }

    #card_1{
      background-color: red; 
      z-index: 0;
    }
    #card_2 {
      background-color: green; 
      z-index: -1;
    }
    #card_3 {
      background-color: blue; 
      z-index: -2;
    }
    #card_4 {
      background-color: yellow; 
      z-index: -3;
    }
    #card_5 {
      background-color: orange; 
      z-index: -4;
    }
    #card_6 {
      background-color: white; 
      z-index: -5;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
        <div class="container">
            <div id="card_1" class="card transition minimize ">
                <h2>Card 1</h2>
            </div>
            <div id="card_2" class="card transition minimize">
                <h2>Card 2</h2>
            </div>
            <div id="card_3" class="card transition minimize">
                <h2>Card 3</h2>
            </div>
            <div id="card_4" class="card transition minimize">
                <h2>Card 4</h2>
            </div>
            <div id="card_5" class="card transition minimize">
                <h2>Card 5</h2>
            </div>
            <div id="card_6" class="card transition minimize">
            </div>
        <!-- end .container -->
        </div>
    </body>
    </html>

如果在 Stack Overflow 的代码片段中不能很好地工作，我在这里也有一个替代链接 http://codepen.io/hidos/pen/rLgARP

可以进行调整，如果你知道 jQuery，这是一个例子。

【讨论】：