본문 바로가기

Effect/Slide Effect5

[Slide Effect] 슬라이드 이펙트 05 - 이미지 슬라이드(버튼, 닷메뉴) 슬라이드 이펙트 05 : 이미지 슬라이드(버튼, 닷메뉴) 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 지난번 슬라이드04에서 넣었던 연속적으로 좌우로 움직일 수 있게 하는 버튼에서 닷메뉴(Dot Menu)를 추가시켜 보도록 하겠습니다. HTML 소스 slider__wrap > slider__img > slider__inner 안에 이미지 5장이 들어간 구조이며, 그 아래의 slider__btn div태그 안에 이미지를 좌우로 슬라이드 할 수 있는 버튼을 만들어두었다. 마지막 slider__dot의 경우 안의 a 태그들을 JS로 출력시키기 위해 주석 처리한다. JAVASCRIPT SLIDER EFFECT 05 슬라이드 이펙트 ⑤ - 이미지 슬라이드.. 2022. 10. 14.

[Slide Effect] 슬라이드 이펙트 04 - 좌우 이동 버튼 만들기 슬라이드 이펙트 04 : 좌우 이동 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 슬라이드를 연속적으로 좌우로 움직일 수 있게 하는 버튼을 추가해보겠습니다. HTML 소스 slider__wrap > slider__img > slider__inner 안에 이미지 5장이 들어간 구조이며, 그 아래의 slider__btn div태그 안에 이미지를 좌우로 슬라이드 할 수 있는 버튼을 만들어두었다. JAVASCRIPT SLIDER EFFECT 04 슬라이드 이펙트 ④ - 좌로 움직이기(연속적으로) 01 02 03 04 05 06 07 prev next CSS 소스 기존의 슬라이드 효과에서 쓰던 CSS 코드에 버튼용(slider__btn) 코드를 추가하였다... 2022. 9. 18.

[Slide Effect] 슬라이드 이펙트 03 - 좌로 움직이기(연속적으로) 슬라이드 이펙트 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? 01. 변수와 상수(const/let) 선언하기 필요한 만큼의 변수와 상수를 선언해주도록 한다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slid.. 2022. 9. 1.

[Slide Effect] 슬라이드 이펙트 02 - 좌로 움직이기 슬라이드 이펙트 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. 2초마다 다음 사진으로 슬라이드 되는 효과이며, JS 코드와 GSAP, jQuery 코드 세 가지를 보여드리겠습니다. HTML, CSS 코드는 원본 소스 보기 버튼을 눌러 확인해주세요. 자, 그럼 시작해볼까요? JS 코드 슬라이드 이펙트 02의 JS 소스와 부연 설명(주석 처리됨)이다. const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySele.. 2022. 8. 29.

[Slide Effect] 슬라이드 이펙트 01 슬라이드 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 슬라이드 이펙트를 만들어보도록 하겠습니다. HTML과 자바스크립트 소스를 설명드리며 CSS는 복잡해지기 때문에 CSS 소스 보기 버튼을 클릭하여 봐 주시기 바랍니다. 자, 그럼 시작해볼까요? HTML 소스 보기 : 모달 박스 슬라이드 이펙트 01의 HTML 소스와 부연 설명(주석 처리됨)이다. JAVASCRIPT SLIDER EFFECT 01 슬라이드 이펙트 ① - 트랜지션 효과 01 02 03 04 05 06 07 소스 보기 JavaScript HTML CSS // 선택자 const searchKeyword = document.querySelectorAll(".search__info .keyword span"); // 알.. 2022. 8. 25.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바