<section class="timeline">
<h1>Responsive Timeline</h1>
<ul>
<li>
<div class="content">
<h2>
<time>2016</time>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias debitis praesentium itaque veniam dolorum cupiditate asperiores optio beatae, qui perferendis ipsam odit modi nemo natus corrupti neque quos distinctio facilis?</p>
</div>
</li>
<li>
<div class="content">
<h2>
<time>2015</time>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quas, reiciendis quis sequi voluptatem consectetur adipisci accusamus hic vel vero ea ad iure! Natus, ipsum, enim aspernatur fugit voluptatibus similique?</p>
</div>
</li>
<li>
<div class="content">
<h2>
<time>2012</time>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, expedita. Dolorem blanditiis, delectus omnis eos accusamus mollitia et cupiditate officia maxime vel, nesciunt alias eius, quibusdam in ea eveniet ut!</p>
</div>
</li>
<li>
<div class="content">
<h2>
<time>2010</time>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptas voluptatum dolorum, quibusdam dignissimos animi pariatur laboriosam quis explicabo similique aperiam debitis quam velit quod, reprehenderit harum ratione. Iste, unde?</p>
</div>
</li>
<li>
<div class="content">
<h2>
<time>2008</time>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet inventore odit placeat in laboriosam dolore ducimus vero, sapiente ipsam veritatis, numquam libero itaque dolores natus ex aliquam nam nihil cumque.</p>
</div>
</li>
<li>
<div class="content">
<h2>
<time>2007</time>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sequi nobis, blanditiis quae dolorem quasi reiciendis odio qui fugit? Officiis quos aspernatur mollitia dolorum pariatur repellendus quaerat dolorem magnam quo.</p>
</div>
</li>
<li>
<div class="content">
<h2>
<time>2004</time>
</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel corporis sunt nostrum velit quibusdam neque porro ratione quos dolor libero. Tempore consequatur natus nostrum delectus provident fugiat corporis error ipsa.</p>
</div>
</li>
</ul>
</section>
@import url(https://fonts.googleapis.com/css?family=Lato);
*, *::before, *::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-size: 16px;
font-family: 'Lato', sans-serif;
}
.timeline {
color: #fff;
}
.timeline h1, .timeline ul li .content h2 {
text-shadow: 1px 1px 1px rgba(56, 56, 56, 0.5);
}
.timeline h1 {
background: #3d9e67;
padding: 70px 0;
font-size: 2.5em;
text-align: center;
}
.timeline ul {
background: #faf8eb;
padding: 50px 0;
}
.timeline ul li {
background: #67cc8e;
position: relative;
margin: 0 auto;
width: 5px;
padding-bottom: 40px;
list-style-type: none;
}
.timeline ul li:last-child {
padding-bottom: 7px;
}
.timeline ul li:before {
content: '';
background: #faf8eb;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
width: 20px;
height: 20px;
border: 3px solid #67cc8e;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.timeline ul li .hidden {
opacity: 0;
}
.timeline ul li .content {
background: #67cc8e;
position: relative;
top: 7px;
width: 450px;
padding: 20px;
}
.timeline ul li .content h2 {
color: #fff;
padding-bottom: 10px;
text-align: center;
}
.timeline ul li .content p {
text-align: center;
}
.timeline ul li .content:before {
content: '';
background: #67cc8e;
position: absolute;
top: 0px;
width: 38px;
height: 5px;
}
.timeline ul li:nth-child(odd) .content {
left: 50px;
background: #67cc8e;
background: -webkit-linear-gradient(-45deg, #56bc83, #67cc8e);
background: linear-gradient(-45deg, #56bc83, #67cc8e);
}
.timeline ul li:nth-child(odd) .content:before {
left: -38px;
}
.timeline ul li:nth-child(even) .content {
left: calc(-450px - 45px);
background: #67cc8e;
background: -webkit-linear-gradient(45deg, #56bc83, #67cc8e);
background: linear-gradient(45deg, #56bc83, #67cc8e);
}
.timeline ul li:nth-child(even) .content:before {
right: -38px;
}
/* ------------------------- ----- Media Queries ----- ------------------------- */
@media screen and (max-width: 1020px) {
.timeline ul li .content {
width: 41vw;
}
.timeline ul li:nth-child(even) .content {
left: calc(-41vw - 45px);
}
}
@media screen and (max-width: 700px) {
.timeline ul li {
margin-left: 20px;
}
.timeline ul li .content {
width: calc(100vw - 100px);
}
.timeline ul li .content h2 {
text-align: initial;
}
.timeline ul li:nth-child(even) .content {
left: 45px;
background: #67cc8e;
background: -webkit-linear-gradient(-45deg, #56bc83, #67cc8e);
background: linear-gradient(-45deg, #56bc83, #67cc8e);
}
.timeline ul li:nth-child(even) .content:before {
left: -33px;
}
}
/* Check the location of each element */
$('.content').each( function(i){
var bottom_of_object= $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).height();
if( bottom_of_object > bottom_of_window){
$(this).addClass('hidden');
}
});
$(window).scroll( function(){
/* Check the location of each element hidden */
$('.hidden').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fadeIn it */
if( bottom_of_window > bottom_of_object ){
$(this).animate({'opacity':'1'},700);
}
});
});