Spinning Effect

by Soya Natsuki

HTML

<html>
  <body>
    <div class="container">
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
      <div class="card">
        <img class="card-image spin" src="https://via.placeholder.com/40" alt="card-image">
      </div>
    </div>
  </body>
</html>

CSS

.container {
  width: 50%;
  border: #000 1px solid;
  height: 200px;
  overflow: auto;
}

.card {
  border: #ccc 1px solid;
  padding: 5px;
}

.spin {
  border-radius: 50%;
  animation: spin 1s 2 ease-in-out;
}

@keyframes spin {
  from {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 359deg);
  }
}

JavaScript

const isInViewport = (el) => {
	const rect = el.getBoundingClientRect()
  return (
  	rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  )
}