xoouxa

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 그리고 닷 버튼 기능을 추가해 하단에 뜨는 버튼을 눌러도 사진이 넘어갈 수 있도록 작업해 주도록 하겠습니다. 💛완성작 입니다 CSS 스타일 css에 딱히 큰 변화는 없고, 양쪽 사이드에 뒤로가기 버튼과 앞으로 가기 버튼, 그리고 하단에 닷버튼을 만들어 주어야 하기 때문에 디자인 작업을 해줍니다. HTML prev next 사진 이미지와 이전 이미지 버튼과 다음 이미지 버튼을 설정해 줍니다. 스크립트 let images = [ "img/slideEffect01-1.jpg", "img/slideEffect02-1.jpg", "img/slideEffect03-1.j..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 02. 슬라이드 이펙트 우선 전체 이미지를 100%로 설정해 줍니다. 그 다음 이미지를 덧대어 주는 부분을 설정해 주기 위해 위드값 800, 하이트값을 450으로 지정해 줍니다. 다음은 이미지가 위아래로 움직이게 해주기 위해서 위드값 4000, 하이트값 450을 지정해 줍니다. 마지막으로 개별적인 이미지 값을 설정해 주기 위해서 포지션 릴레이티브를 줍니다. html yuna243441@naver.com 각 슬라이드에 맞는 이미지를 설정해 주기..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 03. 슬라이드 이펙트 우선 전체 이미지를 100%로 설정해 줍니다. 그 다음 이미지를 덧대어 주는 부분을 설정해 주기 위해 위드값 800, 하이트값을 450으로 지정해 줍니다. 다음은 이미지가 위아래로 움직이게 해주기 위해서 위드값 4000, 하이트값 450을 지정해 줍니다. 마지막으로 개별적인 이미지 값을 설정해 주기 위해서 포지션 릴레이티브를 줍니다. HTML 각 슬라이드에 맞는 이미지를 설정해 주기 위해 이너 안에 각각의 이미지를 ..