Non-Infinite Scroll

Show content on scroll. Requires jQuery and WayPoints plugin.

by the_voder

HTML

<script src="http://www.festvox.org/flite/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<section class="slidecontent">
  <div class="sectioncontent makevisible" id="section1">
    <div class="photo"></div>
    <h4>Section 1</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie est et tincidunt sollicitudin. Aliquam vitae sagittis leo. Proin scelerisque purus non neque auctor, at tincidunt libero dignissim. Nulla dignissim cursus sem, a interdum quam
      ultrices eu. Integer pulvinar fringilla augue at mattis. Vivamus dictum mollis tincidunt. Aenean id consequat nisl, eget aliquam arcu. Mauris a elit lorem.</p>
  </div>
</section>

<section class="slidecontent">
  <div class="sectioncontent" id="section2">
    <div class="photo"></div>
    <h4>Section 2</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie est et tincidunt sollicitudin. Aliquam vitae sagittis leo. Proin scelerisque purus non neque auctor, at tincidunt libero dignissim. Nulla dignissim cursus sem, a interdum quam
      ultrices eu. Integer pulvinar fringilla augue at mattis. Vivamus dictum mollis tincidunt. Aenean id consequat nisl, eget aliquam arcu. Mauris a elit lorem.</p>
  </div>
</section>

<section class="slidecontent">
  <div class="sectioncontent" id="section3">
    <div class="photo"></div>
    <h4>Section 3</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie est et tincidunt sollicitudin. Aliquam vitae sagittis leo. Proin scelerisque purus non neque auctor, at tincidunt libero dignissim. Nulla dignissim cursus sem, a interdum quam
      ultrices eu. Integer pulvinar fringilla augue at mattis. Vivamus dictum mollis tincidunt. Aenean id consequat nisl, eget aliquam arcu. Mauris a elit lorem.</p>
  </div>
</section>

<section class="slidecontent">
  <div class="sectioncontent" id="section4">
    <div class="photo"></div>
   ...

CSS

/* 
Set properties for all section.slidecontent tags
*/

section.slidecontent {
  width: 500px;
  overflow: hidden;
  padding: 0;
  margin: 0 auto;
}


/*
Make last section.slidecontent tag taller 
(required so last section.slidecontent content is shown)
*/

section.slidecontent:last-child {
  height: 1000px;
}


/*
Setup basic properties of section.slidecontent content container
including CSS3 transion to animate postion and opacity
*/

section.slidecontent .sectioncontent {
  position: relative;
  opacity: 0;
  transition: left 0.25s, opacity 0.5s;
  -webkit-transition: left 0.25s, opacity 0.5s;
}


/*
set initial left position of section.slidecontent content divs
(alternate left/right)
*/

section.slidecontent:nth-child(odd) .sectioncontent {
  left: -100px;
}

section.slidecontent:nth-child(even) .sectioncontent {
  left: 100px;
}


/*
Set position when class 'makevisible' applied
*/

section.slidecontent:nth-child(odd) .sectioncontent.makevisible,
section.slidecontent:nth-child(even) .sectioncontent.makevisible {
  left: 0;
  opacity: 1.0;
}


/*
Alternately float photo left/right
*/

.photo {
  width: 250px;
  height: 250px;
  background-color: #bbb;
  margin: 5px;
}

section.slidecontent:nth-child(odd) .photo {
  float: left;
}

section.slidecontent:nth-child(even) .photo {
  float: right;
}

p {
  margin: 5px;
}

JavaScript

/*
You will need to link to jQuery
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

and waypoints.js
https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js

scripts in the head of your HTML document

Waypoints documentation:
http://imakewebthings.com/waypoints/guides/getting-started/

CSS3 Transitions:
http://www.w3schools.com/css/css3_transitions.asp
*/

$(document).ready(function() {
  var offset = 0;
  $("section.slidecontent").waypoint({
    handler: function(direction) {

      // Show sections when scrolling down           //$(this.element).next().children(".sectioncontent").addClass("makevisible");

      // Hide sections on scrolling back up         
      $(this.element).next().children(".sectioncontent").toggleClass("makevisible");
    },
    offset: offset
  });

});