[태그:] aos

HTML

<div class="grid">
  <div class="grid-item" data-aos="fade-up">Item 1</div>
  <div class="grid-item" data-aos="fade-up">Item 2</div>
  <div class="grid-item" data-aos="fade-up">Item 3</div>
  <div class="grid-item" data-aos="fade-up">Item 4</div>
  <div class="grid-item" data-aos="fade-up">Item 5</div>
  <div class="grid-item" data-aos="fade-up">Item 6</div>
  <div class="grid-item" data-aos="fade-up">Item 7</div>
  <div class="grid-item" data-aos="fade-up">Item 8</div>
</div>

CSS

.grid {display: flex; flex-wrap: wrap; margin: 0 -5px; overflow: hidden;}
.grid-item {width: calc(25% - 10px);margin: 0 5px;margin-top: 10px; height: 200px;background: #f8f8f8}

JS

$(document).ready(function () {
  const $gridItems = $(".grid-item");
  let delay = 0; // 초기 delay 값
  const delayIncrement = 100; // delay 증가 값 (밀리초 단위)

  $gridItems.each(function () {
    $(this).attr("data-aos-delay", delay);
    delay += delayIncrement; // delay 값을 증가시킴
  });
});

결과보기

See the Pen aos-data-delay 순차적으로 by Juyeon (@Juyeon) on CodePen.