Reduce opacity of a div in a horizontal scroll is it's partially visible

Question

I am creating a carousel using HTML and CSS, which looks like this:

Below is the Code:

 //It checks whether a card is outside the viewport ): const box = document.querySelector(".card"); const rect = box.getBoundingClientRect(); console.log(rect); function isInViewport() { return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } const result = isInViewport(box); console.log(result); document.addEventListener( "scroll", function() { console.log(result); }, { passive: true, } );

 .container { display: flex; overflow-x: scroll; height: 415px; width: 1455px; padding-left: 150px; }.card { box-sizing: border-box; height: 351px; width: 276px; border: 1px solid #dddbdb; background-color: #ffffff; }.card-img { height: 147px; width: 275px; }.card-head>p { height: 75px; width: 218px; color: #a72b2a; font-family: ".SF NS Display"; font-size: 20px; letter-spacing: -0.33px; line-height: 25px; }.card-body { height: 50px; width: 233px; color: #535353; font-family: ".SF NS Display"; font-size: 14px; letter-spacing: -0.23px; line-height: 18px; }.card-footer { display: flex; height: 28px; opacity: 0.7; color: #333333; font-family: ".SF NS Display"; font-size: 14px; letter-spacing: 0; line-height: 28px; }

 <div class="container" id="container"> <div class="card"> <div class="card-img"></div> <div class="card-rectangle"> <div class="card-head"> <p> Infographic: Understanding the basics and opportunity of hydrogen </p> </div> <div class="card-body"> <p> There is no silver-bullet sustainable energy solution; a net zero future will… </p> </div> <div class="card-footer"> <div> <p>12/11/20</p> </div> <div> <p>|</p> </div> <div> <p>Kelly Jiang</p> </div> </div> </div> </div>

I want to reduce the opacity of a div whenever it is partially visible. (It could be in the extreme left or extreme right) (For example - one at the extreme right) How can I do that?

Answer 1

This is the solution I finally came up with which pretty much met my needs:

Added a new inactive class which changes the opacity of the card when applied:

.card-inactive {
  opacity: 0.6;
}

Using JS added.card-inactive whenever a card is out of the viewport.

const card = document.getElementsByClassName("card"); //grabs all the elements with .card class
const container = document.getElementsByClassName("second-container")[0]; //grabs the div with .second-container class

function isInViewport(el) {
  let result = [];
  for (var i = 0; i < el.length; i++) {
    const rect = el[i].getBoundingClientRect();
    // console.log(i, el.length);
    result.push(
      rect.left >= 0 &&
        rect.right <=
          (window.innerWidth || document.documentElement.clientWidth)
    ); // checks whether a div with the .card class is out of the viewport and stores the value in result[]
  }
  return result; // returns an array of boolean values for each element with .card class
}

container.addEventListener("scroll", function () {
  //listens to scroll event inside second-container
  const result = isInViewport(card);
  for (var i = 0; i < result.length; i++) {
    // Below code adds/removes .card-inactive class
    if (!result[i]) {
      card[i].classList.add("card-inactive");
    } else card[i].classList.remove("card-inactive");
  }
});