CSS, Javascript Animation on load and scroll

Question

I would like to create a one page website with layered cards. On page load the first two cards have to move downwards (animated) to show their content. When the user scrolls down, the other cards have to also move down card by card, when a card reaches a certain pixel height on screen. What is the best javascript to do this? Or is there a better way without javascript? It is not so important that the animation works with older browsers. Code and images to explain what I would like to do are also below.

Here is the code:

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

Cards start condition:

Cards after page load:

Cards on page scroll:

"Could someone be so kind and write the code that makes this work for the example website below?" As far I can see, you only wrote the HTML and CSS. StackOverflow is here to help, but you do need to try yourself, or do some research. — Nathan, Aug 23 '16 at 12:50
Thanks, edited my question to ask for the best way to do this. Best javascript? best other way? — schmiddl, Aug 23 '16 at 13:02

score 0 · Answer 1 · edited May 23 '17 at 12:33

This is praticaly impossible without Javascript, I make an solution based in 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>

If in the Stack Overflow's Code Snippet not work pretty well I have a alternative link here too http://codepen.io/hidos/pen/rLgARP

Adjusts can be maked, if you know jQuery, this is a example how to do it.

CSS, Javascript Animation on load and scroll

1 Answers1