"Fill Color on Scroll"
Bootstrap 4.1.1 Snippet by sunil8107

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Merriweather|Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>Icons Filling Effect</h1>
</header>
<ul class="cd-icons-filling js-cd-icons-filling">
<li class="cd-service cd-service--divider"></li>
<li class="cd-service cd-service--1 js-cd-service">
<h2>Web Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur tenetur quod veritatis nulla aspernatur architecto! Fugit, reprehenderit amet deserunt molestiae ut libero facere quasi velit perferendis ullam quis necessitatibus!</p>
</li> <!-- cd-service -->
<li class="cd-service cd-service--2 js-cd-service">
<h2>Responsive Approach</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur tenetur quod veritatis nulla aspernatur architecto! Fugit, reprehenderit amet deserunt molestiae ut libero facere quasi velit perferendis ullam quis necessitatibus!</p>
</li> <!-- cd-service -->
<li class="cd-service cd-service--3 js-cd-service">
<h2>E-commerce</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur tenetur quod veritatis nulla aspernatur architecto! Fugit, reprehenderit amet deserunt molestiae ut libero facere quasi velit perferendis ullam quis necessitatibus!</p>
</li> <!-- cd-service -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function(){
// Icons Filling Effect - by CodyHouse.co
function IconsFilling( element ) {
this.element = element;
this.blocks = this.element.getElementsByClassName("js-cd-service");
this.update();
};
IconsFilling.prototype.update = function() {
if ( !"classList" in document.documentElement ) {
return;
}
this.selectBlock();
this.changeBg();
};
IconsFilling.prototype.selectBlock = function() {
for(var i = 0; i < this.blocks.length; i++) {
( this.blocks[i].getBoundingClientRect().top < window.innerHeight/2 ) ? this.blocks[i].classList.add("cd-service--focus") : this.blocks[i].classList.remove("cd-service--focus");
}
};
IconsFilling.prototype.changeBg = function() {
removeClassPrefix(this.element, 'cd-icons-filling--new-color-');
this.element.classList.add('cd-icons-filling--new-color-' + (Number(this.element.getElementsByClassName("cd-service--focus").length) - 1));
};
var iconsFillingContainer = document.getElementsByClassName("js-cd-icons-filling"),
iconsFillingArray = [],
scrolling = false;
if( iconsFillingContainer.length > 0 ) {
for( var i = 0; i < iconsFillingContainer.length; i++) {
(function(i){
iconsFillingArray.push(new IconsFilling(iconsFillingContainer[i]));
})(i);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: