In the above codepen, I am unable to understand the utility of these variables →
var one = "#10e88a",
two = "#7f3995",
three = "#0d78e7",
four = "#f88f18",
five = "#bb6774";
whats their use? And why has the author written them?
They are superfluous (i.e. serve no purpose)
1 Like
A left over from a previous attempt to achieve the same effect?
Those variables aren’t being used, but they match the data-color attribute on each div, which is used in the code to set the background…
Though there is a more elegant way to handle that code…though I’m sure it could be done even more elegantly than this.
$(window).on("scroll touchmove", function() {
$("article").each(function(i) {
if ($(document).scrollTop() >= $(this).position().top) {
$('body').css('background', $(this).attr("data-color"));
}
});
}
edit - fixed typo 
2 Likes
that is not my code, but some ones else. Can we do this with pure vanilla JS?
Nice!
I’m sure you can. Jquery in it’s most simplest definition is a wrapper that sits on top of vanilla JS to save you the hassle of writing the vanilla version, and ensuring that browser quirks/differences are accounted for.
I’m out of practice writing vanilla JS, but here’s a nice quick and dirty reference which should get you started…
1 Like
Actually, @codeispoetry, I’ve seen you asking a lot of questions about JS (which is good) and maybe this would be a nice exercise for you to attempt. Why not have a go at converting that jQuery snippet to vanilla JS yourself and let us know how you get on? There’s plenty of people here who can help you out if you get stuck.
4 Likes
@James_Hibbard has a great idea.
I just did it as an exercise since it’s been a while since I stretched my JS-fu and the solution isn’t that difficult to reach. I had to do a little google-fu because there were a couple operations I hadn’t utilized before, but the end result isn’t that far off from my previous post. Not nearly as pretty since you’ve got to just a couple hoops to get some of the same output, but in terms of actual lines of code, it’s close.
Use the resource I gave you earlier and give it a shot to see what you come up with…
Only look at after you've tried it
One possible solution: https://codepen.io/davemaxwell/pen/opQrqB
2 Likes
Hi there codeispoetry,
“jQuery”, as you are probably aware, is not poetical to my eyes. 
Here is a simple Vanilla" flavoured example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';script-src 'self'; style-src 'self'">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-image: linear-gradient( to bottom, #fff, #666 );
font: 1em/150% verdana, arial, helvetica, sans-serif;
background-attachment: fixed;
transition: 1s ease-in-out;
}
h1 {
text-align: center;
}
.content {
max-width: 50em;
padding: 2em;
margin: 1em auto;
box-sizing: border-box;
}
.amendments0 {
background-image: linear-gradient( to bottom, #f00, #300 );
color: #fff;
}
.amendments1 {
background-image: linear-gradient( to bottom, #00f, #003 );
color: #fff;
}
.amendments2 {
background-image: linear-gradient( to bottom, #0c0, #020 );
color: #fff;
}
.amendments3 {
background-image: linear-gradient( to bottom, #c0c, #202 );
color: #fff;
}
.amendments4 {
background-color: #000;
background-image: linear-gradient( to bottom, #666, #000 );
color: #fff;
}
</style>
</head>
<body>
<h1>Scroll test</h1>
<div class="content">
<h2>Lorem Ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur sit amet sem sed libero bibendum tempus faucibus
quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor
nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis
interdum justo ac justo vehicula consequat. Curabitur et
volutpat nibh. Phasellus rutrum lacus at dolor placerat
feugiat. Morbi porta, sapien nec molestie molestie, odio
magna vestibulum lorem, vitae feugiat est leo sit amet
nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac
magna sed, pretium commodo odio. Sed porttitor augue velit,
quis placerat diam sodales ac. Curabitur vitae porta ex.
Praesent rutrum ex fringilla tellus tincidunt interdum.
Proin molestie lectus consectetur purus aliquam porttitor.
Fusce ac nisi ac magna scelerisque finibus a vitae sem.
</p>
</div>
<div class="content">
<h2>Donec vehicula</h2>
<p>
Donec vehicula diam non leo efficitur, id euismod odio
tincidunt. Vivamus auctor viverra purus vitae lobortis. Sed
et libero non diam tempor sagittis. Quisque vel egestas
ipsum. Integer sed elit eu orci blandit commodo in in erat.
Donec blandit, mi at gravida varius, nulla tellus vulputate
ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Curabitur tristique varius ullamcorper.
</p>
</div>
<div class="content">
<h2>Nam venenatis</h2>
<p>
Nam venenatis diam ante, et cursus elit porttitor at. Morbi
mattis leo at ex vehicula, non vestibulum ligula aliquam.
Maecenas non nibh sollicitudin, porttitor odio in, elementum
arcu. Donec pulvinar orci enim. In pulvinar congue ante, ac
rutrum odio bibendum volutpat. Phasellus ac sem consequat
lorem congue malesuada vitae vitae diam. Donec eu imperdiet
augue. Curabitur ullamcorper sit amet libero in ullamcorper.
Donec sed laoreet quam. Phasellus malesuada libero felis, non
elementum ex tincidunt eget. Quisque cursus arcu vel diam
consectetur, ac imperdiet est cursus. Fusce id nunc nibh.
</p>
</div>
<div class="content">
<h2>In sapien massa</h2>
<p>
In sapien massa, feugiat ut magna eu, hendrerit porttitor
justo. In vitae massa ipsum. Aliquam feugiat tortor sed diam
facilisis, et molestie dolor blandit. Pellentesque non lectus
odio. Curabitur pulvinar orci vitae lorem bibendum volutpat.
Duis congue dignissim ante ut consequat. Sed nec sagittis
neque, quis vehicula urna. Fusce laoreet interdum ligula vel
finibus. Nunc odio purus, dapibus sit amet orci eget, congue
eleifend erat. Quisque porttitor imperdiet ullamcorper.
Aenean non orci nec magna tempor porta at id ipsum.
</p>
</div>
<div class="content">
<h2>Cras euismod</h2>
<p>
Cras euismod euismod nibh, nec hendrerit ante efficitur id.
Donec sit amet interdum mauris. Maecenas pellentesque, sem a
commodo tincidunt, quam ex viverra nibh, non consectetur odio
quam et velit. Nulla eu risus quis magna suscipit malesuada
vel quis nisi. Cras suscipit nulla vitae ante rhoncus, id
elementum nisi interdum. Integer sem quam, tincidunt nec quam
ac, lobortis volutpat ipsum. Curabitur nec turpis viverra,
eleifend arcu non, egestas felis. Etiam a eros felis. Aliquam
nec ullamcorper enim. Donec sit amet commodo ante, vitae
consectetur sem. Proin ut luctus dolor. Integer lectus massa,
maximus nec urna non, ullamcorper hendrerit mi.
</p>
</div>
<script>
(function( w, d ) {
'use strict';
var els = d.querySelectorAll( '.content' );
w.addEventListener( 'scroll', function(){
for ( var c = 0; c < els.length; c ++ ) {
if ( w.pageYOffset >= els[c].offsetTop ){
d.body.classList.add( 'amendments' + c );
}
else {
d.body.classList.remove( 'amendments' + c );
}
}
}, false );
}( window, document ));
</script>
</body>
</html>
coothead
1 Like
The article says floating point value →
That means it can be anything such as →
1.2
2.3
4.5
0.3
Or it can be only of the form(percentage expressed in the ratio form) →
0.2
0.3
0.78
0.28
I have started learning Javascript hardly 2-3 weeks back so, please do not get annoyed or frustrated with my basic questions. I think each day when I understand one syntax/concept one brick is added to the learning wall that I am trying to construct.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.