우아 이거 힘드네용.ㅜㅜ
https://iflue.tistory.com/175
저는 이 사이트의 코드를 긁어와서 홈페이지에 적용해보았습니다.

제가 만드는 사이트.
http://ellensnap1.cafe24.com/portfolio-items/test-12341/

------------------
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script> AOS.init(); </script>
<div data-aos="fade-up" data-aos-duration="1500">
<div class="example">

<img class="alignnone size-full wp-image-36" src="http://ellensnap1.cafe24.com/wp-content/uploads/2021/11/wl-op-7m.jpg" alt="" width="1634" height="913" />

</div>
</div>
<div data-aos="fade-up" data-aos-duration="1500">
<div class="example">

<img class="alignnone wp-image-35 size-full" src="http://ellensnap1.cafe24.com/wp-content/uploads/2021/11/wlop-20se.jpg" alt="" width="1920" height="996" />

</div>
</div>
<div data-aos="fade-up" data-aos-duration="1500">
<div class="example">

<img class="alignnone wp-image-33 size-full" src="http://ellensnap1.cafe24.com/wp-content/uploads/2021/11/wl-op-3s.jpg" alt="" width="1892" height="1075" />

</div>
</div>
<div data-aos="fade-up" data-aos-duration="1500">
<div class="example">

<img class="alignnone size-full wp-image-36" src="http://ellensnap1.cafe24.com/wp-content/uploads/2021/11/wl-op-7m.jpg" alt="" width="1634" height="913" />

</div>
</div>

------------

이렇게 나오면 되긴하는데. .문제는.. 클라이언트가 이걸 하나하나 올리기 힘들거 같습니다.

(지금은 사진 하나의 주소를 저 소스안에 각각 하나하나 넣어주는 방법)
 

윈도우 미디어를 선택하거나 갤러리를 만들어서.. 각각의 이미지가 자동으로 되게끔 하려면 도대체 어떻게 해야 하는건가요?

(플러그인도 좋습니다.)

--

쉽게 말해서..

사진 하나하나에 저 코드를 일일이 넣어주는 방법이 아닌..

한 50장 정도의 사진을 올렸을때 자동으로 각각 저런 효과가 나오게 하는게 궁극적인 목적입니다.

멋진 답변 부탁드립니다.