Please help me with one codepen's Pen


#1

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?


#2

They are superfluous (i.e. serve no purpose)


#3

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 :angry:


#4

that is not my code, but some ones else. Can we do this with pure vanilla JS?

Nice!


#5

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....

http://youmightnotneedjquery.com/


#6

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.


#7

@Pullo 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


#8

Hi there codeispoetry,

"jQuery", as you are probably aware, is not poetical to my eyes. :eek:

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


#9

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.


closed #10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.