<div id="wrap">
<!-- section -->
<div class="section">
<div class="center">
<div class="content content--1"></div>
<div class="content content--2">
<div class="heads">
<div class="head"><span>Title 1</span></div>
<div class="head"><span>Title 2</span></div>
<div class="head"><span>Title 3</span></div>
</div>
</div>
</div>
</div>
<!--/section -->
</div>
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
color: #555;
background: #fff;
}
* {
box-sizing: border-box;
}
#wrap {
position: relative;
}
.section {
padding: 40px;
}
.center {
width: 100%;
max-width: 980px;
margin: auto;
}
.content {
&--1 {
height: 1000px;
}
&--2 {
height: 500px;
}
}
.heads {
display: flex;
}
.head {
flex: 1 1 auto;
font-size: 24px;
position: relative;
margin: 5px;
&::before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
background: #000;
transform-origin: left top;
transition: transform 1s ease;
transform: scaleX(0);
}
&.in-viewport {
&::before {
transform: scaleX(1);
}
}
}
View Compiled
function inViewport(elem, tolerance) {
if(elem.offset().top <= $(window).scrollTop() + $(window).height() - tolerance) {
elem.addClass('in-viewport');
}
}
$(window).on('load scroll', function() {
inViewport($('.head'), 80);
});
This Pen doesn't use any external CSS resources.