<body>
<div class="container">
<h1>Simple Animated Timeline Scroller</h1>
<div class="left-content">
<p>Content 01</p>
<p>Content 02</p>
<p>Content 03</p>
<p>Content 04</p>
<p>Content 05</p>
<p>Content 06</p>
<p>Content 07</p>
<p>Content 08</p>
<p>Content 09</p>
<p>Content 10</p>
</div>
<div class="right-content">
<p>Content 01</p>
<p>Content 02</p>
<p>Content 03</p>
<p>Content 04</p>
<p>Content 05</p>
<p>Content 06</p>
<p>Content 07</p>
<p>Content 08</p>
<p>Content 09</p>
<p>Content 10</p>
</div>
</div>
</body>body {
background:#111;
font-size:18px;
color:#FFF;
}
h1 {
font-size:2em;
text-align:center;
margin:20px 0 40px;
padding:0;
}
.container {
background:#222;
width:80%;
margin:0 auto;
overflow:auto;
padding:2%;
}
.right-content, .left-content {
float:left;
display:block;
width:40%;
padding:1% 2%;
}
.left-content {
border-right:5px dotted #666;
text-align:right;
}
.left-content p {
margin:150px 0 0;
}
.right-content p {
margin:80px 0 150px;
}
.container p {
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7 ease-in-out;
-ms-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.left-content .more-padding {
padding-right:100px;
}
.right-content .more-padding {
padding-left:100px;
}
$(window).scroll(function(){
$('.container p').each(function(){
var scrollTop = $(window).scrollTop(),
elementOffset = $(this).offset().top,
distance = (elementOffset - scrollTop),
windowHeight = $(window).height(),
breakPoint = windowHeight*0.9;
if(distance > breakPoint) {
$(this).addClass("more-padding");
} if(distance < breakPoint) {
$(this).removeClass("more-padding");
}
});
});
External CSS
This Pen doesn't use any external CSS resources.