HTML
<div class="timeline">
<ul>
<span class="default-line"></span>
<span class="draw-line"></span>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
<li>
<div>
</div>
</li>
</ul>
</div>
CSS
.timeline {
padding: 50px;
}
.timeline ul {
padding: 0;
}
.timeline .default-line {
content: "";
position: absolute;
left: 50%;
width: 4px;
background: #bdc3c7;
height: 1500px;
}
.timeline .draw-line {
width: 4px;
height: 0;
position: absolute;
left: 50%;
background: #2ecc71;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 2px;
margin: 0 auto;
height: 400px;
background: transparent;
}
.timeline ul li.in-view {
transition: 0.125s ease-in-out, background-color 0.2s ease-out, color 0.1s ease-out, border 0.1s ease-out;
}
.timeline ul li.in-view::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
background-image: url("https://sg0duxoli5-flywheel.netdna-ssl.com/wp-content/themes/inspired_elearning_theme/images/check-dark.svg");
background-color: #2ecc71;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position: center;
transition: 0.125s ease-in-out, background-color 0.2s ease-out, color 0.1s ease-out, border 0.1s ease-out;
}
.timeline ul li::before {
content: "";
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: inherit;
background: #bdc3c7;
transition: all 0.4s ease-in-out;
}
JQuery
// Timeline Scroll Section
// --------------------------------------------------------------
var items = $(".timeline li"),
timelineHeight = $(".timeline ul").height(),
greyLine = $('.default-line'),
lineToDraw = $('.draw-line');
// sets the height that the greyLine (.default-line) should be according to `.timeline ul` height
// run this function only if draw line exists on the page
if(lineToDraw.length) {
$(window).on('scroll', function () {
// Need to constantly get '.draw-line' height to compare against '.default-line'
var redLineHeight = lineToDraw.height(),
greyLineHeight = greyLine.height(),
windowDistance = $(window).scrollTop(),
windowHeight = $(window).height() / 2,
timelineDistance = $(".timeline").offset().top;
if(windowDistance >= timelineDistance - windowHeight) {
line = windowDistance - timelineDistance + windowHeight;
if(line <= greyLineHeight) {
lineToDraw.css({
'height' : line + 20 + 'px'
});
}
}
// This takes care of adding the class in-view to the li:before items
var bottom = lineToDraw.offset().top + lineToDraw.outerHeight(true);
items.each(function(index){
var circlePosition = $(this).offset();
if(bottom > circlePosition.top) {
$(this).addClass('in-view');
} else {
$(this).removeClass('in-view');
}
});
});
}
Comments
Post a Comment