이펙트 만들기/슬라이드 이펙트 만들기4 슬라이드 이펙트 04 슬라이드 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이드 이펙트 04 - 이미지 슬라이드 버튼 이미지 내에 있는 버튼을 클릭 시 이미지가 좌/우로 이동하는 슬라이드 효과입니다. 1. 좌/우 버튼 만들기 클릭 시 이미자가 좌/우로 이동할 수 있도록 좌측과 우측에 각각 버튼을 만들어 줍니다. 기본적인 코드는 슬라이드 이펙트 03와 같으며 버튼이 추가되었습니다. 소스보기 -HTML 파트- prev next -슬라이드 버튼 CSS- .slider__btn a { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(0,0,0,0.4); text-align: cen.. 2022. 9. 24. 슬라이드 이펙트 03 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 - 로테이션 효과 02 위치가 리셋되지 않고 일정 시간 간격으로 이미지를 자동으로 바꿔 출력해주는 효과입니다. 슬라이더 이펙트 02와 기본적인 효과는 같지만 마지막 사진 이후 로테이션이 될때 오른쪽 처음으로 돌아가지 않고 계속 좌측으로 로테이션이 되도록 하는 효과입니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보이는 영역 */ position: relative; width: 800px; hei.. 2022. 9. 24. 슬라이드 이펙트 - 로테이션 효과 01 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 02 - 좌로 이동하는 효과 일정 시간 간격으로 이미지가 좌측으로 이동해 자동으로 바꿔 출력해주는 효과입니다. 슬라이더 이펙트 01은 이쪽에서 볼 수 있습니다. 이번 효과는 자바스크립트와 GSAP를 활용한 2가지 방식이 있습니다. ▶ HTML 파트 01 유형과 같지만 이번 유형은 사진 전체가 좌측으로 이동해야 하기 때문에 한번 더 블록을 만들어 이동하는 파트를 주었습니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img.. 2022. 8. 29. 슬라이드 이펙트 - 트랜지션 효과 슬라이더 이펙트 자바스크립트를 이용한 슬라이드 효과 만들기 입니다. 슬라이더 이펙트 01 - 트랜지션 효과 일정 시간 간격으로 이미지를 자동으로 바꿔 출력해주는 효과입니다. ▶ HTML 파트 5장의 이미지가 일정 간격으로 바뀌므로 우선 5장의 이미지를 img 태그를 활용해서 추가합니다. ▶ CSS 파트 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { position: relative; width: 800px; height: 600px; } .slider { position: absolute; left: 0; top.. 2022. 8. 29. 이전 1 다음
