如何改变背景颜色？

Question

I looked at these codes on this page https://codepen.io/kevinhartwig/pen/zYWRjWq

I don't understand this line code:

entry.target.id === "secondSection" ? "bg-red" : "bg-light-pink";

if I want to add more color to the background page like this page: https://backstagetalks.com/ what can I edit? Thank you

Answer 1

The line:

entry.target.id === "secondSection" ? "bg-red" : "bg-light-pink";

simply means if the target class is "secondSection" then apply the CSS class "bg-red" to it, if not then apply "bg-light-pink" instead. The confusing thing is that "bg-red" class is not actually red. It displays a dark blue color (#2d46b9 is a hexadecimal value that corresponds to a blue color).

Each section of the HTML has an ID assigned to it like so:

<section id="secondSection">

This helps to identify the HTML element so that you can evaluate it in the JavaScript code. The simplest way to evaluate more colors to each section element is just to add a conditional that checks for which element you are scrolling over and assigning it another class. You could do this inside the callback (line 10 of your JS code). Like so:

  let className = ""
  if (entry.target.id == "secondSection") {
    className = "bg-red"
  } else if(entry.target.id == "thirdSection") {
    className = "bg-green"
  } else if(entry.target.id == "fourthSection") {
    className = "bg-light-pink"
  }

Be sure to define a CSS class for "bg-green" or whatever class you choose to assign to that section element. You would do this the same way its defined for "bg-red" and the other classes.