Revision as of 23:10, 8 September 2015

Responsive Vertical Timeline

Title of section 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.

Title of section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Title of section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Title of section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.

Title of section 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.

Final Section

This is the content of the last section

Feb 26

@@ Line 51: / Line 51: @@
          <div class="cd-timeline-block">
              <div class="cd-timeline-img cd-location">
-                <img src="img/cd-icon-location.svg" alt="Location">
              </div> <!-- cd-timeline-img -->
@@ Line 64: / Line 63: @@
          <div class="cd-timeline-block">
              <div class="cd-timeline-img cd-location">
-                <img src="img/cd-icon-location.svg" alt="Location">
              </div> <!-- cd-timeline-img -->
@@ Line 77: / Line 75: @@
          <div class="cd-timeline-block">
              <div class="cd-timeline-img cd-movie">
-                <img src="img/cd-icon-movie.svg" alt="Movie">
              </div> <!-- cd-timeline-img -->
@@ Line 87: / Line 84: @@
          </div> <!-- cd-timeline-block -->
      </section> <!-- cd-timeline -->
-<script>
-jQuery(document).ready(function($){
-    var timelineBlocks = $('.cd-timeline-block'),
-        offset = 0.8;
-    //hide timeline blocks which are outside the viewport
-    hideBlocks(timelineBlocks, offset);
-    //on scolling, show/animate timeline blocks when enter the viewport
-    $(window).on('scroll', function(){
-        (!window.requestAnimationFrame)
-            ? setTimeout(function(){ showBlocks(timelineBlocks, offset); }, 100)
-            : window.requestAnimationFrame(function(){ showBlocks(timelineBlocks, offset); });
-    });
-    function hideBlocks(blocks, offset) {
-        blocks.each(function(){
-            ( $(this).offset().top > $(window).scrollTop()+$(window).height()*offset ) & $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
-        });
-    }
-    function showBlocks(blocks, offset) {
-        blocks.each(function(){
-            ( $(this).offset().top <= $(window).scrollTop()+$(window).height()*offset & $(this).find('.cd-timeline-img').hasClass('is-hidden') ) & $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
-        });
-    }
-});
-</script>
 </body>
 </html>