xoouxa

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 위 아래로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 이미지가 부드럽게 위아래로 움직이게 해주도록 하겠습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 04. 슬라이드 이펙트 HTML 순서대로 변화할 이미지 5개를 지정해 줍니다. 그 다음 s1이었다가 s5이 다시 되고 그 다음 또 다시 s1이 되기 위함을 확인하기 위해 class slider s1이라는 이름을 지정해 줍니다. 변수 설정 // 선택자 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = sliderW..

안녕하세요 ヾ(≧▽≦*)o 오늘은 배경 이미지 위에 이미지를 여러장 덧대어 그 이미지가 좌우로 움직일 수 있도록 효과를 한 번 주도록 하겠습니다. 💛 완성작입니다. 이미지가 부드럽게 좌우로 움직이게 해주도록 하겠습니다. 자바스크립트, GSAP, jQurey 세 가지를 이용해 같은 효과를 주도록 하겠습니다. CSS 스타일 총 이미지의 크기가 4800이기 때문에 이미지가 움직이는 영역에 width값을 4800로 지정해 줍니다. 또한 움직이는 개별적인 이미지의 크기는 800이기 때문에 800으로 설정해 줍니다. HTML 순서대로 변화할 이미지 5개를 지정해 줍니다. 그 다음 s1이었다가 s5이 다시 되고 그 다음 또 다시 s1이 되기 위함을 확인하기 위해 class slider s1이라는 이름을 지정해 줍니다..

안녕하세요 ヾ(≧▽≦*)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 각 슬라이드에 맞는 이미지를 설정해 주기 위해 이너 안에 각각의 이미지를 ..