Slide-out Scrolling Gallery

index.html

<div class="header">
   <h1>Scroll Down</h1>
   <i class="fa fa-angle-down animated bounce"></i>
</div>

<div class="section animate">
   <div class="middle">
      <img src="https://placeimg.com/640/640/nature/color" />
   </div>
   <div class="left title">
      <div class="content">
         <h2>A glorious nature shot.</h2>
         <p>Wow. What a wonderful image. And look! there are even more images on the right side. Amazing. If you click below, I bet you'll get teleported to a magical land.</p>
         <a href="#" class="btn-primary">Learn more</a>
      </div>
   </div>
   <div class="right tiles">
      <img src="https://placeimg.com/900/900/nature/color" />
      <img src="https://placeimg.com/200/200/nature/color" />
      <img src="https://placeimg.com/300/300/nature/color" />
      <img src="https://placeimg.com/400/400/nature/color" />
   </div>
</div>

<div class="section">
   <div class="middle">
      <img src="https://placeimg.com/640/640/people/color" />
   </div>
   <div class="right title">
      <div class="content">
         <h2>Check out this guy.</h2>
         <p>What an interesting looking person! I wonder if they've ever climbed Mount Everest, or seen the Egyptian Pyramids. If not, I hope that one day they get to. You go random stock image person! Follow your dreams!</p>
      </div>
   </div>
   
   <div class="left tiles">
      <img src="https://placeimg.com/100/100/people/color" />
      <img src="https://placeimg.com/200/200/people/color" />
      <img src="https://placeimg.com/300/300/people/color" />
      <img src="https://placeimg.com/400/400/people/color" />
   </div>
   
</div>

<div class="section">
   <div class="middle">
      <img src="https://placeimg.com/620/620/arch/color" />
   </div>
   <div class="left title">
      <div class="content">
         <h2>That is one pretty building.</h2>
         <p>I once thought about becoming an architect. I wanted to create a house fit for a king. But then I failed maths. So I became a frontend developer instead.</p>
      </div>
   </div>
   
   <div class="right tiles">
      <img src="https://placeimg.com/100/100/arch/color" />
      <img src="https://placeimg.com/150/150/arch/color" />
      <img src="https://placeimg.com/300/300/arch/color" />
      <img src="https://placeimg.com/350/350/arch/color" />
   </div>
   
</div>

<div class="section">
   <div class="middle">
      <img src="https://placeimg.com/410/410/tech/color" />
   </div>
   <div class="right title">
      <div class="content">
         <h2>The future is now.</h2>
         <p>Check out that technology! Imagine if we went back in time and put one of those in the hands of a neanderthal. Do you think they'd be impressed, or just try to club us to death?</p>
      </div>
   </div>
   
   <div class="left tiles">
      <img src="https://placeimg.com/900/900/tech/color" />
      <img src="https://placeimg.com/140/140/tech/color" />
      <img src="https://placeimg.com/750/750/tech/color" />
      <img src="https://placeimg.com/400/400/tech/color" />
   </div>
   
</div>

<div class="footer">
   <i class="fa fa-angle-up animated bounce"></i>
   <h1>Scroll Up</h1>
</div>

script.js

$(document).ready(function(){

   var $sm = 480;
   var $md = 768;

   function resizeThis() {
      $imgH = $('.middle img').width();
      if ($(window).width() >= $sm) {
         $('.left,.right,.section').css('height', $imgH);
      } else {
         $('.left,.right,.section').css('height', 'auto');
      }
   }

   resizeThis();

   $(window).resize(function(){
      resizeThis();
   });

   $(window).scroll(function() {
      $('.section').each(function(){
         var $elementPos = $(this).offset().top;
         var $scrollPos = $(window).scrollTop();

         var $sectionH = $(this).height();
         var $h = $(window).height();
         var $sectionVert = (($h/2)-($sectionH/4));


         if (($elementPos - $sectionVert) <= $scrollPos && ($elementPos - $sectionVert) + $sectionH > $scrollPos) {
            $(this).addClass('animate');
         } else {
            $(this).removeClass('animate');
         }
      });
   });

   $('.btn-primary').click(function(){
      alert('I lied');
   });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Slide-out Scrolling Gallery.markdown

Slide-out Scrolling Gallery

A gallery that reveals three panels as the user scrolls.

A Pen by Teegan Lincoln on CodePen.

License.

style.css

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@mixin transition {
    -moz-transition:    0.3s ease-in-out all;
    -o-transition:      0.3s ease-in-out all;
    -webkit-transition: 0.3s ease-in-out all;
    transition:         0.3s ease-in-out all;
}

@mixin filter($filter) {
   -webkit-filter: $filter;
   -moz-filter: $filter;
   -o-filter: $filter;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);

$sm: 480px;
$md: 768px;
$lg: 992px;

body {
   font-family: 'Roboto', sans-serif;
}

.header, .footer {
   //height: 350px;
   background: #2e2e2e;
   color: #fff;
   padding: 30px;
   text-align:center;
   //box-sizing: border-box;
   
   @media (min-width: $md) {
      padding: 100px 30px;
   }
   
   h1 {
      font-size: 4em;
      font-weight: 300;
   }
   
   i.fa {
      font-size: 4em;
   }
   
   .bounce {
      -webkit-animation-name: bounce;
      animation-name: bounce;
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
      animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
   }
   
   .animated {
     -webkit-animation-duration: 2s;
     animation-duration: 2s;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
   }
}

.section {
   width: 100%;
   position: relative;
   //height: 300px;
   
   .left, .middle, .right {
      width:100%;
      display: block;
      color: #fff;
      box-sizing: border-box;
      left: 0;
      padding: 30px;
      text-align:center;
      overflow:hidden;
      
      @include transition;
      
      .content {
         @media (min-width: $sm) {
            @include vertical-align();
         }
      }
      
      @media (min-width: $sm) {
         width: 50%;
         font-size:0.9em;
         padding: 10px;
         left: 0;
         float: left;
         position: absolute;
      }
      
      @media (min-width: $md) {
         width: 33.33333%;
         left: 33.33%;
         padding: 10px;
      }
      
      @media (min-width: $lg) {
         padding: 30px;
         font-size: 1em;
      }
   }
   
   &.animate {
      .left {
         left:0;
         
         @media (min-width: $sm) {
            left: 50%;
         }
         
         @media (min-width: $md) {
            left:0;
         }
      }
      
      .right {
         left:0;
         
         @media (min-width: $sm) {
            left: 50%;
         }
         
         @media (min-width: $md) {
            left:66.66%;
         }
      }
      
      
   }
   
   .title {
      background: tomato;
      
      h2 {
         margin-top:0;
      }
      
      p {
         line-height:1.55em;
         margin-bottom: 0.75em;
      }
      
      .btn-primary {
         color: #fff;
         background: darken(tomato, 10%);
         padding: 10px;
         text-decoration:none;
         border-radius: 3px;
         display:inline-block;
         @include transition;
         
         &:hover {
            background: darken(tomato, 15%);
         }
         
      }
   }
   
   .tiles {
      padding:0;
      background: #fff;
      clear:both;
      display:none;
      float:none;
      
      img {
         width:50%;
         float:left;
         height:auto;
         opacity: 0.7;
         @include transition;
         @include filter(grayscale(100%)); 
         
         
         &:hover {
            opacity:1;
            @include filter(grayscale(0%));
         }
      }
      
      @media (min-width: $md) {
           display:block;
      }
   }
   
   .middle {
      background: slategray;
      z-index: 2;
      padding:0;
      
      img {
         width: 100%;
         height: auto;
         display:block;
      }
   }
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-20px);}
    60% {-webkit-transform: translateY(-10px);}
} 
 
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
} 

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />

Can you help me out with this? I downloaded the files and when I open the page in my browser it is not displayed like yours.
Here is my html doc:

script src="Js/JavaScript.js" type="text/javascript"></script>
script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<title></title> link rel="stylesheet" type="text/css" href="Css/StyleSheet.css"> link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> div class="header"> h1>Scroll Down i class="fa fa-angle-down animated bounce"> /div>

    <div class="section animate">
        <div class="middle">
            <img src="https://placeimg.com/640/640/nature/color" />
        </div>
        <div class="left title">
            <div class="content">
                <h2>A glorious nature shot.</h2>
                <p>Wow. What a wonderful image. And look! there are even more images on the right side. Amazing. If you click below, I bet you'll get teleported to a magical land.</p>
                <a href="#" class="btn-primary">Learn more</a>
            </div>
        </div>
        <div class="right tiles">
            <img src="https://placeimg.com/900/900/nature/color" />
            <img src="https://placeimg.com/200/200/nature/color" />
            <img src="https://placeimg.com/300/300/nature/color" />
            <img src="https://placeimg.com/400/400/nature/color" />
        </div>
    </div>

    <div class="section">
        <div class="middle">
            <img src="https://placeimg.com/640/640/people/color" />
        </div>
        <div class="right title">
            <div class="content">
                <h2>Check out this guy.</h2>
                <p>What an interesting looking person! I wonder if they've ever climbed Mount Everest, or seen the Egyptian Pyramids. If not, I hope that one day they get to. You go random stock image person! Follow your dreams!</p>
            </div>
        </div>

        <div class="left tiles">
            <img src="https://placeimg.com/100/100/people/color" />
            <img src="https://placeimg.com/200/200/people/color" />
            <img src="https://placeimg.com/300/300/people/color" />
            <img src="https://placeimg.com/400/400/people/color" />
        </div>

    </div>

    <div class="section">
        <div class="middle">
            <img src="https://placeimg.com/620/620/arch/color" />
        </div>
        <div class="left title">
            <div class="content">
                <h2>That is one pretty building.</h2>
                <p>I once thought about becoming an architect. I wanted to create a house fit for a king. But then I failed maths. So I became a frontend developer instead.</p>
            </div>
        </div>

        <div class="right tiles">
            <img src="https://placeimg.com/100/100/arch/color" />
            <img src="https://placeimg.com/150/150/arch/color" />
            <img src="https://placeimg.com/300/300/arch/color" />
            <img src="https://placeimg.com/350/350/arch/color" />
        </div>

    </div>

    <div class="section">
        <div class="middle">
            <img src="https://placeimg.com/410/410/tech/color" />
        </div>
        <div class="right title">
            <div class="content">
                <h2>The future is now.</h2>
                <p>Check out that technology! Imagine if we went back in time and put one of those in the hands of a neanderthal. Do you think they'd be impressed, or just try to club us to death?</p>
            </div>
        </div>

        <div class="left tiles">
            <img src="https://placeimg.com/900/900/tech/color" />
            <img src="https://placeimg.com/140/140/tech/color" />
            <img src="https://placeimg.com/750/750/tech/color" />
            <img src="https://placeimg.com/400/400/tech/color" />
        </div>

    </div>

    <div class="footer">
        <i class="fa fa-angle-up animated bounce"></i>
        <h1>Scroll Up</h1>
    </div>

-->

My javascript file:
$(document).ready(function () {

var $sm = 480;
var $md = 768;

function resizeThis() {
    $imgH = $('.middle img').width();
    if ($(window).width() >= $sm) {
        $('.left,.right,.section').css('height', $imgH);
    } else {
        $('.left,.right,.section').css('height', 'auto');
    }
}

resizeThis();

$(window).resize(function () {
    resizeThis();
});

$(window).scroll(function () {
    $('.section').each(function () {
        var $elementPos = $(this).offset().top;
        var $scrollPos = $(window).scrollTop();

        var $sectionH = $(this).height();
        var $h = $(window).height();
        var $sectionVert = (($h / 2) - ($sectionH / 4));


        if (($elementPos - $sectionVert) <= $scrollPos && ($elementPos - $sectionVert) + $sectionH > $scrollPos) {
            $(this).addClass('animate');
        } else {
            $(this).removeClass('animate');
        }
    });
});

$('.btn-primary').click(function () {
    alert('I lied');
});

});

and my css file:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

@mixin transition {
-moz-transition: 0.3s ease-in-out all;
-o-transition: 0.3s ease-in-out all;
-webkit-transition: 0.3s ease-in-out all;
transition: 0.3s ease-in-out all;
}

@mixin filter($filter) {
-webkit-filter: $filter;
-moz-filter: $filter;
-o-filter: $filter;
}

@import url(https://fonts.googleapis.com/css?family=Roboto:300,900);

$sm: 480px;
$md: 768px;
$lg: 992px;

body {
font-family: 'Roboto', sans-serif;
}

.header, .footer {
//height: 350px;
background: #2e2e2e;
color: #fff;
padding: 30px;
text-align:center;
//box-sizing: border-box;

@media (min-width: $md) {
padding: 100px 30px;
}

h1 {
font-size: 4em;
font-weight: 300;
}

i.fa {
font-size: 4em;
}

.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}

.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
}

.section {
width: 100%;
position: relative;
//height: 300px;

.left, .middle, .right {
width:100%;
display: block;
color: #fff;
box-sizing: border-box;
left: 0;
padding: 30px;
text-align:center;
overflow:hidden;

  @include transition;

  .content {
     @media (min-width: $sm) {
        @include vertical-align();
     }
  }

  @media (min-width: $sm) {
     width: 50%;
     font-size:0.9em;
     padding: 10px;
     left: 0;
     float: left;
     position: absolute;
  }

  @media (min-width: $md) {
     width: 33.33333%;
     left: 33.33%;
     padding: 10px;
  }

  @media (min-width: $lg) {
     padding: 30px;
     font-size: 1em;
  }

}

&.animate {
.left {
left:0;

     @media (min-width: $sm) {
        left: 50%;
     }

     @media (min-width: $md) {
        left:0;
     }
  }

  .right {
     left:0;

     @media (min-width: $sm) {
        left: 50%;
     }

     @media (min-width: $md) {
        left:66.66%;
     }
  }

}

.title {
background: tomato;

  h2 {
     margin-top:0;
  }

  p {
     line-height:1.55em;
     margin-bottom: 0.75em;
  }

  .btn-primary {
     color: #fff;
     background: darken(tomato, 10%);
     padding: 10px;
     text-decoration:none;
     border-radius: 3px;
     display:inline-block;
     @include transition;

     &:hover {
        background: darken(tomato, 15%);
     }

  }

}

.tiles {
padding:0;
background: #fff;
clear:both;
display:none;
float:none;

  img {
     width:50%;
     float:left;
     height:auto;
     opacity: 0.7;
     @include transition;
     @include filter(grayscale(100%)); 


     &:hover {
        opacity:1;
        @include filter(grayscale(0%));
     }
  }

  @media (min-width: $md) {
       display:block;
  }

}

.middle {
background: slategray;
z-index: 2;
padding:0;

  img {
     width: 100%;
     height: auto;
     display:block;
  }

}
}

@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-20px);}
60% {-webkit-transform: translateY(-10px);}
}

@Keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-20px);}
60% {transform: translateY(-10px);}
}