Pages UI
Search…
v5.0.1 - Pages HTML
UI Elements
Form Elements
Timeline
Step one
Start by creating the markup for the timeline.
1
<div class="timeline-container">
2
<section class="timeline">
3
<div class="timeline-block">
4
<div class="timeline-point success">
5
<i class="pg-map"></i>
6
</div>
7
<!-- timeline-point -->
8
<div class="timeline-content">
9
<!-- START CARD ELEMENT -->
10
<div class="card share full-width">
11
<div class="circle" data-toggle="tooltip" title="Label">
12
</div>
13
<div class="card-header clearfix">
14
<div class="user-pic">
15
<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">
16
</div>
17
<h5>Jeff Curtis</h5>
18
<h6>Shared a Tweet
19
<span class="location semi-bold"><i class="fa fa-map-marker"></i> SF, California</span>
20
</h6>
21
</div>
22
<div class="card-description">
23
<p>What you think, you become. What you feel, you attract. What you imagine, you create - Buddha. <a href="#">#quote</a> </p>
24
<div class="via">via Twitter</div>
25
</div>
26
</div>
27
<!-- END CARD ELEMENT -->
28
<div class="event-date">
29
<h6 class="font-montserrat all-caps hint-text m-t-0">Apple Inc</h6>
30
<small class="fs-12 hint-text">15 January 2015, 06:50 PM</small>
31
</div>
32
</div>
33
<!-- timeline-content -->
34
</div>
35
36
<div class="timeline-block">
37
...
38
</div>
39
​
40
</section>
41
<!-- timeline -->
42
</div>
Copied!
Step one
Add the following snippet to make the posts appear on scroll with a nice fade in effect.
1
jQuery(document).ready(function($){
2
var $timeline_block = $('.timeline-block');
3
​
4
//hide timeline blocks which are outside the viewport
5
$timeline_block.each(function(){
6
if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
7
$(this).find('.timeline-point, .timeline-content').addClass('is-hidden');
8
}
9
});
10
​
11
//on scolling, show/animate timeline blocks when enter the viewport
12
$(window).on('scroll', function(){
13
$timeline_block.each(function(){
14
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.timeline-point').hasClass('is-hidden') ) {
15
$(this).find('.timeline-point, .timeline-content').removeClass('is-hidden').addClass('bounce-in');
16
}
17
});
18
});
19
});
Copied!
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.1
<!-- ALIGN timeline-block ITEMS TO LEFT -->
2
<div class="timeline-container left">
3
<section class="timeline">
4
5
<div class="timeline-block">
6
...
7
</div>
8
</section>
9
<!-- timeline -->
10
</div>
Copied!
Last modified 2yr ago
Copy link