CodePen Embed - Intersection Observer 5

#images-box
  ul.images-box_list
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/ali-inay-y3aP9oo9Pjc-unsplash.jpg?raw=true", alt="ごはん")
    li.images-box_item
      img(src="https://github.com/ND-AkikoFujii/codepenImg/blob/main/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg?raw=true", alt="カフェ")

View Compiled

@property --stripe-width1{
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --stripe-width2{
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --stripe-width3{
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --stripe-width4{
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --stripe-width5{
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --stripe-width6{
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}
@property --stripe-width7{
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: true;
}

#images-box{
  margin-top: 100vh;
}
.images-box{
  &_list{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    list-style: none;
  }
  &_item{
    position: relative;
    img{
      position: relative;
      z-index: 2;
      width: 180px;
      height: 230px;
      object-fit: cover;
      transition: 2s ease --stripe-width1,
        2s ease --stripe-width2,
        2s ease --stripe-width3,
        2s ease --stripe-width4,
        2s ease --stripe-width5,
        2s ease --stripe-width6,
        2s ease --stripe-width7;
      mask-image: radial-gradient(circle at right top, #fff 0 var(--stripe-width1), transparent var(--stripe-width1) var(--stripe-width2), #fff var(--stripe-width2) var(--stripe-width3), transparent var(--stripe-width3) var(--stripe-width4), #fff var(--stripe-width4) var(--stripe-width5), transparent var(--stripe-width5) var(--stripe-width6), #fff var(--stripe-width6) var(--stripe-width7), transparent var(--stripe-width7)  200%);
      mask-repeat: no-repeat;
    }
    &.is-show{
      --stripe-width1: 100%;
      --stripe-width2: 120%;
      --stripe-width3: 140%;
      --stripe-width4: 160%;
      --stripe-width5: 175%;
      --stripe-width6: 180%;
      --stripe-width7: 190%;
    }
  }
}

View Compiled


const targetEl = document.querySelectorAll(".images-box_item")

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-show')
    } else {
      entry.target.classList.remove('is-show')
    }
  })
}, {
  threshold: .5
})

targetEl.forEach(element => {
  observer.observe(element)
})

This Pen is owned by nd_akikofujii on CodePen.

See more by @nd_akikofujii on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.