Based on the image above, what I'm trying to achieve are:
- Once the container reach middle of the viewport, it's text background will change to yellow.
- And also while user scroll down or up, the middle arrow will slowly fill in with yellow color until the user reach the middle viewport of the next container.
Now, I manage to make the focus container to change its text background to yellow and also I already display the progress bar shape but I've no idea how to make it change to yellow in relative on the user scroll action (like progress bar). Plus, the first progress bar need to start from right while the second one will start with left and vice versa for the next one.
P/S : I'm thinking of just using image, but then for sure making it to change to yellow like a progress bar is impossible.
$(document).ready(function() {
var winHeight = $(window).height(),
topLimit = winHeight * .2;
$(window).on('scroll', function() {
$('.parent').each(function() {
var thisTop = $(this).offset().top - $(window).scrollTop();
if (thisTop <= topLimit) {
$(this).addClass('highlight');
} else {
$(this).removeClass('highlight');
}
});
});
});
.parent {
margin-top: 50px;
height: 250px;
}
.img-col {
width: 50%;
height: 250px;
background-color: green;
float:left;
}
.text-col {
width: 50%;
height: 250px;
background-color: blue;
float: right;
}
.highlight .text-col {
background-color: yellow;
}
.middle-line {
height: 1px;
width: 100%;
position: relative;
background: #000;
margin-top: 50px;
}
.vertical-right {
height: 20px;
width: 1px;
background: #000;
position: absolute;
right: 0;
bottom: 0;
}
.vertical-left {
height: 20px;
width: 1px;
background: #000;
position: absolute;
left: 0;
top: 0;
}
.vertical-right-bottom {
height: 20px;
width: 1px;
background: #000;
position: absolute;
right: 0;
top: 0;
}
.vertical-left-top {
height: 20px;
width: 1px;
background: #000;
position: absolute;
left: 0;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="parent">
<div class="img-col"></div>
<div class="text-col">Some text here</div>
</div>
<div class="middle-line">
<div class="vertical-right"></div>
<div class="vertical-left"></div>
</div>
<div class="parent">
<div class="text-col" style="float: left;">Some text here</div>
<div class="img-col" style="float: right;"></div>
</div>
<div class="middle-line">
<div class="vertical-right-bottom"></div>
<div class="vertical-left-top"></div>
</div>
<div class="parent">
<div class="img-col"></div>
<div class="text-col">Some text here</div>
</div>
<div class="middle-line">
<div class="vertical-right"></div>
<div class="vertical-left"></div>
</div>
<div class="parent">
<div class="text-col" style="float: left;">Some text here</div>
<div class="img-col" style="float: right;"></div>
</div>
<div class="parent"></div>
</body>
</html>
from A custom shape line between two container that change color like progress bar
No comments:
Post a Comment