减少水平滚动中 div 的不透明度，使其部分可见

Question

我正在使用 HTML 和 CSS 创建轮播，它看起来像这样：

代码如下：

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

我想降低部分可见的 div 的不透明度。（它可能在极左或极右）（例如 - 一个在极右）我该怎么做？

Answer 1

这是我最终想出的解决方案，几乎满足了我的需求：

添加了一个新的非活动 class，它会在应用时改变卡片的不透明度：

.card-inactive {
  opacity: 0.6;
}

每当卡片离开视口时，使用 JS 添加 .card-inactive。

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");
  }
});

减少水平滚动中 div 的不透明度，使其部分可见

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

html

javascript

css

jquery

web-frontend