Effect/Slider Effect7 [자바스크립트 응용하기] 슬라이드 유형07 슬라이드 효과 07 이번 시간에는 슬라이드 효과의 최종형태입니다. 그런데 지금 자잘한 버그가 많아서 수정중에 있습니다... 심지어 현생이 최근에 너무 바빠져서 수정할 시간이...😪 수정이 완료되는대로 설명을 제대로 덧붙여서 수정본으로 재업로드 하겠습니다. 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.quer.. 2022. 10. 24. [자바스크립트 응용하기] 슬라이드 유형06_ 닷메뉴 무한으로돌리기 슬라이드 효과 06 이번 시간에는 5유형에서 만들었던 닷메뉴를 무한으로 왔다갔다 만들어 보겠습니다. 근데 사실 4유형에서 한것과 별다를게 없어서 쓸 내용도 없고 이 유형은 버그가 참많아요 ^_^ 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.querySelector('.slider__inner'); const.. 2022. 10. 23. [자바스크립트 응용하기] 슬라이드 효과05_ 닷메뉴 슬라이드 효과 05 이번 시간에는 저번 버튼형식의 슬라이더에 추가로 하단에 도트를 추가해보겠습니다. 그리고 당연하게도 이 버튼을 눌렀을때도 이미지가 바뀌게 구성해야 합니다 ^^! 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.querySelector('.slider__inner'); const slider =.. 2022. 10. 23. [자바스크립트 응용하기]슬라이드 효과04_ 버튼식 구성하기 슬라이드 효과 04 이번에는 슬라이드형식 네번째! 버튼으로 슬라이드 조작을 해보겠습니다. 들어가기에 앞서 추후에 이미지를 추가해도 js를 별도로 수정하지 않아도 되게끔 하기 위해서 확인을 하다보니 이미지가 9개까지 되버린점은... 감안하고 봐주세요 ㅎㅎ; 원본 소스 보기 원본 사이트 ▶ 버튼을 누르면 다음 이미지로 이동하는 방식인데요. 생각만으론 참 간단하지만 함정카드가 존재합니다. 첫번째 이미지에서 이전이미지 버튼을 누르면 마지막 이미지로 가야하고, 마지막 이미지에서 다음이미지버튼을 누르면 첫번째 이미지로 가게끔 만들어야 합니다. if문을 사용하는것도 방법인데요. 저는 if문을 사용하지 않고 다른 방법을 사용해보았으니 같이 보시죠! JS 소스 const sliderWrap = document.query.. 2022. 9. 19. [자바스크립트 응용] 슬라이드 효과03 이미지 슬라이드 효과 03 저번 시간에 이어서 세번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 2번유형에서는 딱딱해서 밋밋한 맛을 없애기 위해서 부드럽게 전환되는 효과를 주었는데요. 5번이미지에서 다시 1번이미지로 돌아갈때 빠르게 넘어가서 보기 불편하지는 않으셨는지...(전 사실..안불편했는데...할말하않) 무튼 그래서 이번엔 5번이미지 이후에도 좌측으로 넘어가서 다시 시작하는게 아닌 표현 그대로 1~5, 1~5 순환하듯이 보이는구조를 표현해 보겠습니다! 원본 소스 보기 원본 사이트 ▶ 오늘의 유형은 말씀드렸듯이 마지막 순서에서 첫번째 순서로 다시 넘어갈때 확~!하고 넘어가는게 아니라 물 흐르듯 자연스럽게 계속해서 순환하는 구조로 짜볼게요. 그러기 위해서는 이미지를 평상시처럼 5개로만 활.. 2022. 9. 1. [자바스크립트 응용] 슬라이드 효과 02 이미지 슬라이드 효과 02 저번 시간에 이어서 두번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 슬라이드유형1은 슬라이드 효과가 딱딱하게 바뀌어서 보는 맛이 밋밋하진 않으셨나요? 그래서 준비했습니다! 이번엔 슬라이드가 넘어가는 방식을 부드럽게 표현해보겠습니다. 그리고 자바스크립트 라이브러리 중에서 GSAP와 유명한 JQUERY로도 구현할 예정입니다. 잘 따라와 주세요💨 원본 소스 보기 원본 사이트 ▶ 이번 02유형은 라이브러리 중 GSAP와 JQUERY를 사용했어요! 그래서 원본소스에는 js, GSAP, JQUERY가 올라갈 예정입니다. 말로는 표현이 힘들기도 하고 이해도 잘 안되실 수 있어서 그림으로라도 준비해봤습니다. 오늘의 핵심은 밑의 그림을 참고하시면 되겠습니다. JS 소스 cons.. 2022. 8. 29. [자바스크립트 응용] 슬라이드 효과 01 이미지 슬라이드 효과 웹페이지를 보면서 가장 많이 접했을 유형이기도 한데요. 오늘은 이미지가 슬라이드 형식으로 변화하는 효과를 배워보겠습니다. 원본 소스 보기 원본 사이트 ▶ 슬라이드 유형 사이트는 iframe상의 '소스 보기'를 누르시면 각각 사용된 코드를 확인하실 수 있습니다. 그래서 이번엔 js소스만 올려드리고 같이 알아보는 시간을 가져볼게요. JS 소스 분석하기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderWrap.querySelector(".slider__img"); const slider = sliderImg.querySelectorAll(".slider"); let currentIndex.. 2022. 8. 29. 이전 1 다음 반응형
