본문 바로가기

슬라이드1

자바스크립트 슬라이드 효과 : transition 자바스크립트 : 슬라이드 효과 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. HTML 소스 HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, slider__img 박스 안에는 이미지 5장을 삽입해 주었습니다. CSS 소스 각각의 이미지가 담긴 slider 클래스에는 absolute와 z-index 속성을 부여함으로써 이미지를 층층이 쌓아, 한 장처럼 보이게끔 작업해 주었습니다. /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-item.. 2022. 8. 29.

이전 1 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바