The Clean Industry - Clean / Dirty

<html>
<link rel="stylesheet" href="style.css">

<head></head>

<body>
    <main>
        <a href="http://thecleanindustry.com/" title="TheCleanIndustry.com" target="_blank" id="tci-link">
          <img src="https://res.cloudinary.com/losrodriguez/image/upload/v1659457503/cleanIndustry_logo_tfhwml.png" alt="The Clean Industry">
        </a>
        <div class="sneaker-container">
          <img src="https://res.cloudinary.com/losrodriguez/image/upload/v1659457324/tci-sneaker-clean_xmvucf.png" alt="Clean" class="sneaker-clean">
          <img src="https://res.cloudinary.com/losrodriguez/image/upload/v1659457324/tci-sneaker-dirty_lwxyzt.png" alt="Dirty" class="sneaker-dirty">
          <footer>
            <p>The Clean Industry®</p>
            <h1>Authentic Sneaker Care <sup>+</sup></h1>
          </footer>
        </div>
      </main>
</body>
<script type="text/javascript" src="script.js"></script>

</html>

main {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-align: center;
}

a#tci-link {
  position: absolute;
  left: 15px;
  top: 15px;
  transition: all 0.25s ease-out;
}
a#tci-link img {
  width: 80px;
}
a#tci-link:hover {
  transition: all 0.15s ease-in;
  transform: scale(1.05);
  opacity: 0.8;
}

.sneaker-container {
  position: relative;
  cursor: col-resize;
  color: #EA0000;
}
.sneaker-container img {
  max-width: 100%;
}
.sneaker-container .sneaker-clean {
  float: left;
}
.sneaker-container .sneaker-dirty {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  clip-path: inset(0% 50% 0% 0%);
}

footer {
  position: relative;
  width: 100%;
}
footer h1 {
  margin: 0;
}
footer p {
  margin-top: 0;
  margin-bottom: -0.5em;
}


class TCIClean {
  constructor(_container) {
    if (!_container) throw "Container es requerido"
    this.container = document.querySelector(_container)
    this.clean = this.container.querySelector(".sneaker-clean")
    this.dirty = this.container.querySelector(".sneaker-dirty")
    this.friction = 0.15
    this.x = 50
    this.inOver = false
    this.mouse = {
      x: 0,
      y: 0
    }
    this.events()
    this.animate()
  }
  
  events() {
    this.container.addEventListener("pointerenter", (e) => this.onPointerEnter(e), false)
    this.container.addEventListener("pointerleave", (e) => this.onPointerLeave(e), false)
    this.container.addEventListener("pointermove", (e) => this.onPointerMove(e), false)
  }
  
  onPointerEnter(e) {
    this.friction = 0.15
    this.inOver = true
  }
  
  onPointerLeave(e) {
    this.friction = 0.075
    this.inOver = false
  }
  
  onPointerMove(e) {
    this.mouse = {
      x: e.clientX,
      y: e.clientY
    }
    this.render()
  }
  
  get percentX() {
    if (!this.inOver) return 50
    const _x = (this.mouse.x - this.offset.x)
    return parseInt((_x / this.rect.width) * 100)
  }
  
  get rect() {
    return this.container.getBoundingClientRect()
  }
  
  get offset() {
      return {
          x: this.rect.left,
          y: this.rect.top
      }
  }
  
  animate(){
    requestAnimationFrame(() => this.animate())
    this.render()
  }
  
  render() {
    this.x += (this.percentX - this.x) * this.friction
    this.dirty.style.clipPath = `inset(0% 0% 0% ${this.x}%)`
  }
}

const sneaker = new TCIClean(".sneaker-container")
live Code

The Clean Industry - Clean / Dirty

티스토리툴바
