FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

by Chris Menshenin

HTML

<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>

  <body>
  <div id="parallax">
        <div id="layer-back">
            <div data-wow-duration="1s" data-wow-delay="0.5s" id="back" class="wow fadeIn"></div>
        </div>  
        <div id="layer-base">
            <main>
                <article>  
                    <div id="pic-position">
                        <section data-wow-delay="0.5s" data-wow-duration="1s" data-wow-offset="15" class="wow fadeInUp">
                            <div></div>
                        </section>
                        <aside data-wow-delay="0.5s" data-wow-duration="1s" data-wow-offset="15" class="wow fadeInUp">
                            <div></div>   
                        </aside>
                        <footer data-wow-delay="0.5s" data-wow-duration="1s" data-wow-offset="15" class="wow fadeInUp">
                            <div></div>
                        </footer>
                    </div>
                </article> 
                <div id="slider-1">
                    <div class="flexslider" style="margin: 0;">
                        <ul data-wow-duration="1s" class="wow fadeInUp slides">
                            <li class="item" style="background-image: url(https://cdn.pixabay.com/photo/2017/05/09/16/06/windsurfing-2298647_960_720.jpg);"></li>
                            <li class="item" style="background-image: url(https://cdn.pixabay.com/photo/2017/04/29/18/09/waterfall-2271231_960_720.jpg);"></li>
                        </ul>
                    </div>
                </div>                 
            </main>
            <div...

CSS

body, html, #parallax {
    overflow-x: hidden;
    overflow-y: auto;}
  
     #parallax {
    perspective: 1px;
    height: 100vh;}

/*........FIRST-LAYER.......*/
  
     #layer-back {
    position: relative;
    height: 100vh;
    transform-style: preserve-3d;}
    
     #back {
    background: url(http://freestocks.org/fs/wp-content/uploads/2017/07/rain_bokeh-800x533.jpg) no-repeat 100%;
    background-size: cover;

    position: absolute;
    top: 0;
    left: -9px !important;
    right: 9px !important;
    bottom: 0; 

    transform: translateZ(-1px) scale(2);}
    
/*.......SECOND-LAYER........*/

     #layer-base {
    position: relative;

    background: url(http://freestocks.org/fs/wp-content/uploads/2017/06/midday_white_clouds_in_the_sky-800x533.jpg) center center fixed;
    background-size: cover;}

     main {
    display: block;

    position: relative;

    box-shadow: 0px 5px 19px -5px rgb(0,0,0);
    box-shadow: 0px 5px 19px -1px rgba(0,0,0,0.75);

    background: url(https://cdn.pixabay.com/photo/2017/05/02/19/46/moon-2279198_960_720.jpg) repeat-y 100% 0;
    background-size: contain;}

/*........PIC-BLOCK........*/

     article {
    display: block;
    padding-top: 8px;

    background: url(https://cdn.pixabay.com/photo/2017/04/01/15/42/surfer-2193859_960_720.jpg) repeat-y 100% 0;
    background-size: contain;}
  
     #pic-position {
    max-width: 1294px;
    margin: 0 auto;}

     section, aside, #pic-position footer {
    float: left;
    display: block;
    width: 635px;
    width: calc(50% - 12px);
    margin-left: 8px;
    margin-bottom: 8px;}

/*........FIRST-PIC........*/
    
     article section div, article aside div, article footer div {
    display: block;
    padding-top: 62.5%;
    border-radius: 3px;

    box-shadow: 4px 4px 5px -1px rgb(0,0,0);
    box-shadow: 4px 4px 5px -1px rgba(0,0,0,0.75);}

     article section div {
    background: url(https://cdn.pixabay.com/photo/2017/05/03/18/56/orange-slices-2281844_960_720.png);
...

JavaScript

$(document).ready(function(){
        $('.flexslider').flexslider({
          slideshowSpeed: 4000,
          directionNav: true,
          animation: 'fade',
          slideshow: true,
          animationSpeed: 800,
          animationLoop: true,
          pauseOnAction: false,
          controlNav: false
        });
      });