[해피CGI][cgimall] GSAP를 이용한 무한 이미지 슬라이드

GSAP을 이용한 이미지 슬라이드입니다.

스크롤하거나 버튼을 클릭하여 순서를 변경할 수 있고 무한으로 슬라이드됩니다.

사이트를 구성할 때 다양한 방식으로 사용하기 좋습니다.

 

 

HTML 구조

<div class="gallery">

<ul class="cards">

<li>0</li>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

<li>10</li>

<li>11</li>

<li>12</li>

<li>13</li>

<li>14</li>

<li>15</li>

<li>16</li>

<li>17</li>

<li>18</li>

<li>19</li>

</ul>

<div class="actions">

<button class="prev">Prev</button>

<button class="next">Next</button>

</div>

</div>

 

CSS 소스

* {

box-sizing: border-box;

}

body {

background: #111;

min-height: 100vh;

padding: 0;

margin: 0;

}

.gallery {

position: absolute;

width: 100%;

height: 100vh;

overflow: hidden;

}

 

.cards {

position: absolute;

width: 14rem;

height: 18rem;

top: 40%;

left: 50%;

transform: translate(-50%, -50%);

}

 

.cards li {

list-style: none;

padding: 0;

margin: 0;

width: 14rem;

height: 18rem;

text-align: center;

line-height: 18rem;

font-size: 2rem;

font-family: sans-serif;

background-color: #9d7cce;

position: absolute;

top: 0;

left: 0;

border-radius: 0.8rem;

}

 

.actions {

position: absolute;

bottom: 25px;

left: 50%;

transform: translateX(-50%);

}

 

button {

  display:inline-block;

  outline: none;

  border: none;

  padding: 8px 14px;

  background: #414141;

  background-image: -webkit-linear-gradient(top, #575757, #414141);

  background-image: -moz-linear-gradient(top, #575757, #414141);

  background-image: -ms-linear-gradient(top, #575757, #414141);

  background-image: -o-linear-gradient(top, #575757, #414141);

  background-image: linear-gradient(to bottom, #575757, #414141);

  text-shadow: 0px 1px 0px #414141;

  -webkit-box-shadow: 0px 1px 0px 414141;

  -moz-box-shadow: 0px 1px 0px 414141;

  box-shadow: 0px 1px 0px 414141;

  color: #ffffff;

  text-decoration: none;

  margin: 0 auto 10px;

  -webkit-border-radius: 4;

  -moz-border-radius: 4;

  border-radius: 4px;

  padding: 12px 25px;

  font-family: "Signika Negative", sans-serif;

  text-transform: uppercase;

  font-weight: 600;

  cursor: pointer;

  font-size: 13px;

  line-height: 18px;

}

 

button:hover {

  background: #57a818;

  background-image: -webkit-linear-gradient(top, #57a818, #4d9916);

  background-image: -moz-linear-gradient(top, #57a818, #4d9916);

  background-image: -ms-linear-gradient(top, #57a818, #4d9916);

  background-image: -o-linear-gradient(top, #57a818, #4d9916);

  background-image: linear-gradient(to bottom, #57a818, #4d9916);

  text-shadow: 0px 1px 0px #32610e;

  -webkit-box-shadow: 0px 1px 0px fefefe;

  -moz-box-shadow: 0px 1px 0px fefefe;

  box-shadow: 0px 1px 0px fefefe;

  color: #ffffff;

  text-decoration: none;

}

 

button {

  font-size: 20px;

  font-weight: 400;

}

 

a {

  color: #88ce02;

  text-decoration: none;

}

a:hover {

  text-decoration: underline;

}

JS 소스

gsap.registerPlugin(ScrollTrigger);

 

let iteration = 0; // gets iterated when we scroll all the way to the end or start and wraps around - allows us to smoothly continue the playhead scrubbing in the correct direction.

 

const spacing = 0.1,    // spacing of the cards (stagger)

snap = gsap.utils.snap(spacing), // we'll use this to snap the playhead on the seamlessLoop

cards = gsap.utils.toArray('.cards li'),

seamlessLoop = buildSeamlessLoop(cards, spacing),

scrub = gsap.to(seamlessLoop, { // we reuse this tween to smoothly scrub the playhead on the seamlessLoop

totalTime: 0,

duration: 0.5,

ease: "power3",

paused: true

}),

trigger = ScrollTrigger.create({

start: 0,

onUpdate(self) {

if (self.progress === 1 && self.direction > 0 && !self.wrapping) {

wrapForward(self);

} else if (self.progress < 1e-5 && self.direction < 0 && !self.wrapping) {

wrapBackward(self);

} else {

        scrub.vars.totalTime = snap((iteration + self.progress) * seamlessLoop.duration());

scrub.invalidate().restart(); // to improve performance, we just invalidate and restart the same tween. No need for overwrites or creating a new tween on each update.

self.wrapping = false;

}

},

end: "+=3000",

pin: ".gallery"

});

 

function wrapForward(trigger) { // when the ScrollTrigger reaches the end, loop back to the beginning seamlessly

iteration++;

trigger.wrapping = true;

trigger.scroll(trigger.start + 1);

}

 

 

.
.
.
자세한 소스는 데모 사이트나 첨부파일을 통해 확인 가능합니다.