본문 바로가기

슬라이드효과3

자바스크립트 : 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 이전 버튼, 다음 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. 선택자 및 변수 만들기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".sli.. 2022. 10. 18.

자바스크립트 슬라이드 효과 : 버튼 자바스크립트 슬라이드 효과 : 버튼 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 해당하는 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. CSS 소스 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모(움직이는 부분) */ display: .. 2022. 9. 18.

자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트 슬라이드 효과 : 좌로 움직이는 유형 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 왼쪽으로 미끄러지듯이 이미지가 넘어가는 효과를 추가해준 유형입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, 그 안에는 slider__inner 박스, 그 안 slider 박스 안에는 각각 이미지 5장을 삽입해 주었습니다. 각각의 div 박스의 용도는 CSS 소스에서 추가로 설명하도록 하겠습니다. 궁금하면 보시든가... CSS 소스 /* slider */ .slider__wrap { width.. 2022. 8. 29.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바