Timeline

Search…
v5.0.1 - Pages HTML
Timeline
Pages timeline has been adapted from CodyHouse Timeline example.
Step one
Start by creating the markup for the timeline. 
<div class="timeline-container">
    <section class="timeline">
        <div class="timeline-block">
            <div class="timeline-point success">
                <i class="pg-map"></i>
            </div>
            <!-- timeline-point -->
            <div class="timeline-content">
                <!-- START CARD ELEMENT -->
                <div class="card share full-width">
                    <div class="circle" data-toggle="tooltip" title="Label">
                    </div>
                    <div class="card-header clearfix">
                        <div class="user-pic">
                            <img alt="Profile Image" width="33" height="33" data-src-retina="assets/img/profiles/8x.jpg" data-src="assets/img/profiles/8.jpg" src="assets/img/profiles/8x.jpg">
                        </div>
                        <h5>Jeff Curtis</h5>
                        <h6>Shared a Tweet
                                <span class="location semi-bold"><i class="fa fa-map-marker"></i> SF, California</span>
                            </h6>
                    </div>
                    <div class="card-description">
                        <p>What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. <a href="#">#quote</a> </p>
                        <div class="via">via Twitter</div>
                    </div>
                </div>
                <!-- END CARD ELEMENT -->
                <div class="event-date">
                    <h6 class="font-montserrat all-caps hint-text m-t-0">Apple Inc</h6>
                    <small class="fs-12 hint-text">15 January 2015, 06:50 PM</small>
                </div>
            </div>
            <!-- timeline-content -->
        </div>
        
        <div class="timeline-block">
          ...
        </div>
​
    </section>
    <!-- timeline -->
</div>
Step one
Add the following snippet to make the posts appear on scroll with a nice fade in effect.
jQuery(document).ready(function($){
    var $timeline_block = $('.timeline-block');
​
    //hide timeline blocks which are outside the viewport
    $timeline_block.each(function(){
        if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
            $(this).find('.timeline-point, .timeline-content').addClass('is-hidden');
        }
    });
​
    //on scolling, show/animate timeline blocks when enter the viewport
    $(window).on('scroll', function(){
        $timeline_block.each(function(){
            if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.timeline-point').hasClass('is-hidden') ) {
                $(this).find('.timeline-point, .timeline-content').removeClass('is-hidden').addClass('bounce-in');
            }
        });
    });
});
Aligning elements
By default the posts will be spread on both sides of a vertical axis for larger screens. For small/medium screens the posts will be aligned to left automatically. Explicity specifying either left or center classes in the timeline-container element, posts will be forced not to change the layout type relevant to screen size.
<!-- ALIGN timeline-block ITEMS TO LEFT -->
    <div class="timeline-container left">
    <section class="timeline">
        
        <div class="timeline-block">
          ...
        </div>
    </section>
    <!-- timeline -->
</div>
Cards
Views
Last modified 2yr ago
Copy link