kebab00's

- 오늘도 슬라이드 이펙트입니다. - 해야될 것은 오늘은 dot 버튼 대신에 사진을 넣어두고 클릭했을 때 움직이는 것이죠 - 하지만 오늘은 좌표를 움직이는 방식이 아니라 active라는 클라스를 넣어주고 빼주어서 표현하는 방식입니다. // 이미지 저장한 변수 let images = [ "./img/sliderEffect06-min.jpg", "./img/sliderEffect07-min.jpg", "./img/sliderEffect08-min.jpg", "./img/sliderEffect09-min.jpg", "./img/sliderEffect10-min.jpg" ]; let currentIndex = 0; // 현재 보이는 이미지 function imageSlider(parent, images) { /..

- 이번에는 prev/next 버튼을 누르면 이전사진/다음사진으로 넘어가고 밑의 dot버튼을 누르면 해당 차례의 사진으로 넘어가는 스크립트입니다. - 이번에는 javascript으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 이미지가 보이는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 이미지가 움직이는 영역 const slider = ..

- 위의 페이지처럼 시간이 지나면 사진이 상하로 바뀌는 스크립트입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 이건 3번과 4번을 잘 섞어서 사용하면 간단합니다. - 스크립트 코드를 같이 보시죠 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); // 이미지가 보이는 영역 const sliderInner = sliderWrap.querySelector(".slider__inner"); // 이미지가 움직이는 영역 cons..

- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다. - 하지만 저번에 했던 것과 다른 점이 있는데 그건 바로 첫번째 것으로 돌아가는 것이 아니라 마지막 사진 뒤에 첫번째 사진을 복사해두어서 끊김이 없게 한다는 것입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 이번에도 필요한 선택자와 전역변수들을 하나로 모아놨습니다. - 오랜만에 보는 것이 있다면 요소의 width 값을 가져오는 clientWidth가 있겠습니다. - 그리고 let sliderClone = sliderInner.firstElementChild.cloneNode(true); 를 사용해서 첫번째 이미지를 복사해주었습니다. Ja..

- 위의 페이지처럼 시간이 지나면 사진이 상하로 바뀌는 스크립트입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 - 아 이번에는 css에서 바뀐 점이 하나 있는데 바로 사진들을 가로가 아닌 세로로 세워놔야한다는 것입니다. - 그래서 display:flex를 주지 않았습니다. 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. Javascript - 먼저 javascript입니다. - 전에 했던 것과 거의 비슷합니다. 이번엔 X축이 아니라 Y축으로 사진의 높이 만큼이동해주면 됩니다. - setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다. - currentIndex = (currentInd..

- 위의 페이지처럼 시간이 지나면 사진이 좌우로 바뀌는 스크립트입니다. - 이번에도 javascript, jquery, GSAP 세 가지 방식으로 나타내 보았습니다. - 스크립트 코드를 같이 보시죠 선택자 - 선택자와 전역변수들을 하나로 모아놨습니다. Javascript - 먼저 javascript입니다. - setInterval 함수를 사용해서 정해진 시간마다 함수가 실행되게 해주었습니다. - currentIndex = (currentIndex + 1) % sliderCount;으로 이미지의 인덱스 값을 구해서, sliderInner.style.transform = "translateX("+ -800 * currentIndex + "px)" },sliderInterval);로 sliderInner에게 ..