슬라이드4 SITE | sliderType #1 👊🏻 SITE | slider 유형 뽀개기 ✔︎ CSS Point ☑︎ blind 효과 사용하기 ☑︎ 이미지 스프라이트 / ir 효과 사용하기 /* sliderType */ .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider__img { background: url(../img/slider_bg01.jpg) no-repeat center / cover; } .slider__img .desc { width: 1160px; margin: 0 auto; padding: 100px 20px; } .slider__img .desc span { font-size: 16px; background-color: #fff; padding.. 2022. 9. 6. SLIDER | 이미지 슬라이더 | 좌로 넘기기 SLIDER 효과_좌로 움직이는 이미지를 만들어보자 ! SLIDER 효과 중 이미지가 좌로 움직이는 효과를 만들어 봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! 이미지 좌로 움직이기 | 여러 이미지를 감싸는 slider__wrap을 일정 시간 간격마다 좌로 이동해서 이미지가 움직이는 것처럼 보이게 해줍니다. currentIndex = (currentIndex +1) % sliderCount; | 이 밖의 if 조건문을 사용할 수도 있습니다. 2022. 8. 29. SLIDER | 이미지 슬라이더 | transition 효과 SLIDER 효과를 만들어보자 ! SLIDER 효과를 통해 이미지가 넘어가는 페이지를 만들어봅시다. 원본 페이지 내에서도 소스보기를 통해 코드를 바로 확인해보실 수 있습니다^0^ 원본 소스 보기 script를 살펴봅시다 ! setInterval(() =>{},2000) | 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용하는 함수입니다.(2000 = 2초) let nextIndex = (currentIndex + 1) % sliderCount; | 나머지 값을 활용해서 이미지가 순서대로 나올 수 있도록 해줍니다. 2022. 8. 29. QUIZ | 문제 만들기 | 방법 06 | 슬라이드 형식 QUIZ를 만들어보자 ! QUIZ의 여러 형태 중 객관식(여러문항); 슬라이드 형식 형식으로 만들어봅시다. 원본 소스 보기 script를 살펴봅시다 ! + 정답 확인 버튼을 누를 경우, 문제 카운트수가 1씩 증가되며 그에 따라 다음 문제로 체인지 + 동시에 맞고 틀림을 알려줬던 강아지의 모습도 원래대로 돌리기 위해 like 와 dislike 제거 + 마지막 문제에 도달했을 경우 총 몇문제중 얼만큼 맞췄는지 표시 2022. 8. 24. 이전 1 다음
