vanilla js 로 image slider 만들기

Javascript

방금시작한사람 2020. 2. 3. 23:27

vanila js 는 순수 자바스크립트입니다. 다른 라이브러리가 아닌 javascript에 있는 기능만 씁니당

image slider의 틀은 https://codepen.io/doodlemarks/pen/aFcly 에 있는 이미지 슬라이더를 참고했습니다.

위의 예제의 애니메이션은 jQuery 기반으로 사실 어떻게 동작하는지는 잘모릅니다 느낌상 이럴거다정도...

css와 기본적인 js 를 가져왔고, animation 는 jQuery를 모르는 관계로 새로 구현했습니다.

ul 와 li로 있으며 float: left를 사용해서 이미지를 가로로 펼쳐서 놓습니다.

그리고 자바스크립트로 ul 의 크기를 이미지의 크기 * 이미지 개수에 맞게 증가 시켜줍니다!

animation의 첫번째 인자는 어떻게 변할것인가에 대해 선언합니다.

{transform: ~ }은 css @keyframe과 동일하게 작동합니다. css는 하드코딩이 되어있다면,

js 는 조금 더 동적이라는것..? 아래 코드에서 -100px를 이미지의 사이즈에 맞게 변경이 가능하기때문이죠

offset의 경우, css @keyframe에서 % 랑 비슷합다.

예제는 애니메이션의 85%에 왔을때까지 0px에 있다가, 나머지 15%동안 100px를 움직입니다.

animation의 두번째 인자는 duration, iterations 등과 같은 EffectTiming 에 관하여 설정합니다.

따라서 아래 예제는 이 애니메이션은 2초간 동작하고, 2초의 85%가 왔을때(1.7초는 가만히있다가)

100px를 0.3초만에 움직입니다

그래서 조금 동적으로 보이죠 offset이 없다면 그냥 동일한 속도로 슥슥 지나갑니다.

반복을 위해서 처음에는 setTimeout 같은 것을 생각했으나, 아래 API에 onfinish라는 게 있더라고요.

onfinish는 animation이 끝났을 때, 자동적으로 호출되는 콜백함수입니다.

콜백함수에 animation의 play 함수를 호출하여 같은 animation이 동작합니다

반복만 하면, 계속 같은 이미지만 보이기 때문에 removeChild와 appendChild로

1 2 3 4 의 li 가 있다면 첫번째 노드를 지우고 맨 뒤에 붙입니다

결과적으로 1 2 3 4 => 2 3 4 1 로 변하게 되죠!

그래서 이미지 슬라이더처럼 보이게됩니다!!

의외로 간단하게 되었습니다... api 문서에 좋은게 많더라구요..

아래 API 가보면 공튀기기, 엘리스가 작았다가 커지기도 합니다 ㄷㄷ;

See the Pen YzPmJjK by hi-dot (@hi-dot) on CodePen.

참고문서