increase / decrease opacity using mousemove event-CodePudding

I have this slider and I want to decrease the opacity and hide .banner div if the slider is sliding left and increase the opacity of .banner div and make the banner div appear again if the slider is sliding right.

My current code can only decrease the opacity but cannot increase it, how can i fix this?

CodePen Link: https://codepen.io/mjkno1/pen/zYWPjEw

let sliderContainer = document.querySelector(".slider-container");
let innerSlider = document.querySelector(".inner-slider");
let banner = document.querySelector(".banner");

let pressed = false;
let startX;
let x;
let bannerOpacity = banner.style.opacity
let oldx = 0

sliderContainer.addEventListener("mousedown", (e) => {
  pressed = true;
  startX = e.offsetX - innerSlider.offsetLeft;
  sliderContainer.style.cursor = "grabbing";
});

// sliderContainer.addEventListener("mouseenter", () => {
//     sliderContainer.style.cursor = "grab";
// });

sliderContainer.addEventListener("mouseleave", () => {
  sliderContainer.style.cursor = "default";
});

sliderContainer.addEventListener("mouseup", () => {
  sliderContainer.style.cursor = "grab";
  pressed = false;
});

window.addEventListener("mouseup", () => {
  // pressed = false;
});

sliderContainer.addEventListener("mousemove", (e) => {
  if (!pressed) return;

  console.log(e.pageX);
  if (e.pageX > oldx && banner.style.opacity === 0) {
    banner.style.opacity  = 0.01
    console.log('right');
  } else if (e.pageX < oldx) {
    console.log('left');
    banner.style.opacity -= 0.01
  }
  e.preventDefault();

  x = e.offsetX;

  innerSlider.style.left = `${x - startX}px`;
  oldx = e.pageX;
  checkBoundary();
});

const checkBoundary = () => {
  let outer = sliderContainer.getBoundingClientRect();
  let inner = innerSlider.getBoundingClientRect();

  if (parseInt(innerSlider.style.left) > 150) {
    innerSlider.style.left -= 10;
    // bannerOpacity -= 0.01
  }

  if (inner.right < outer.right) {
    innerSlider.style.left = `-${inner.width - outer.width}px`;
  }
};

.card {
  height: 300px;
  width: 400px;
  border-radius: 5px;
}

.banner {
  z-index: 2;
  height: 300px;
  width: 200px;
  border-radius: 5px;
  background-color: red;
}

.card:nth-child(odd) {
  background-color: blue;
}


/* .card:first-child {
    visibility: hidden;
} */

.card:nth-child(even) {
  background-color: rgb(0, 183, 255);
}

.slider-container {
  width: 80%;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.inner-slider {
  width: 150%;
  display: flex;
  gap: 10px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 250px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div >
    <div  style="opacity: 1;"></div>
    <div >
      <!-- <div ></div> -->
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

banner.style.opacity has typeof being string.

So, especially when adding a number literal to its value, the type coercion doesn't kick in on our favor. To make the conversion explicit, we should first parse the string as a float number before adding the 0.01 amount.

This is that part refactored (only on the addition):

if (e.pageX > oldx && banner.style.opacity < 1) {
  banner.style.opacity = parseFloat(banner.style.opacity)   0.01;
} else if (e.pageX < oldx && banner.style.opacity > 0) {
  banner.style.opacity -= 0.01
}

And this is the whole demo having the new logic and showing how the opacity gets triggered both when sliding to the left and to the right:

let sliderContainer = document.querySelector(".slider-container");
let innerSlider = document.querySelector(".inner-slider");
let banner = document.querySelector(".banner");

let pressed = false;
let startX;
let x;
let bannerOpacity = banner.style.opacity
let oldx = 0

sliderContainer.addEventListener("mousedown", (e) => {
  pressed = true;
  startX = e.offsetX - innerSlider.offsetLeft;
  sliderContainer.style.cursor = "grabbing";
});

// sliderContainer.addEventListener("mouseenter", () => {
//     sliderContainer.style.cursor = "grab";
// });

sliderContainer.addEventListener("mouseleave", () => {
  sliderContainer.style.cursor = "default";
});

sliderContainer.addEventListener("mouseup", () => {
  sliderContainer.style.cursor = "grab";
  pressed = false;
});

window.addEventListener("mouseup", () => {
  // pressed = false;
});

sliderContainer.addEventListener("mousemove", (e) => {
  if (!pressed) return;

  console.log(`e.pageX:${e.pageX};oldx:${oldx};op:${banner.style.opacity}`);
  console.log(banner.style.opacity   1);
  if (e.pageX > oldx && banner.style.opacity < 1) {
    banner.style.opacity = parseFloat(banner.style.opacity)   0.01;
    console.log('right');
  } else if (e.pageX < oldx && banner.style.opacity > 0) {
    console.log('left');
    banner.style.opacity -= 0.01
  }
  e.preventDefault();

  x = e.offsetX;

  innerSlider.style.left = `${x - startX}px`;
  oldx = e.pageX;
  checkBoundary();
});

const checkBoundary = () => {
  let outer = sliderContainer.getBoundingClientRect();
  let inner = innerSlider.getBoundingClientRect();

  if (parseInt(innerSlider.style.left) > 150) {
    innerSlider.style.left -= 10;
    // bannerOpacity -= 0.01
  }

  if (inner.right < outer.right) {
    innerSlider.style.left = `-${inner.width - outer.width}px`;
  }
};

.card {
  height: 300px;
  width: 400px;
  border-radius: 5px;
}

.banner {
  z-index: 2;
  height: 300px;
  width: 200px;
  border-radius: 5px;
  background-color: red;
}

.card:nth-child(odd) {
  background-color: blue;
}


/* .card:first-child {
    visibility: hidden;
} */

.card:nth-child(even) {
  background-color: rgb(0, 183, 255);
}

.slider-container {
  width: 80%;
  height: 350px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.inner-slider {
  width: 150%;
  display: flex;
  gap: 10px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 250px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
</head>

<body>
  <div >
    <div  style="opacity: 1;"></div>
    <div >
      <!-- <div ></div> -->
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</body>

</html>