parallax Effect05
parallaxEffect05 패럴랙스 이펙트05 - 이질감 효과입니다. 본문의 글과 이미지가 스크롤에 따라 움직여 이질감이 들도록 만들었습니다. HTML과 CSS는 크게 변경이 없으므로, 깃헙을 참고해주세요! 원본 소스 보기 원본 사이트 보기 JAVASCRIPT 스크롤 함수를 실행시키기 위해 현재 스크롤 위치값을 불러오고, 본문의 공통요소인 각 아이템 클래스에 반복문을 사용하여 offset1,2,3 변수를 선언합니다. 이때 offset1,2,3 변수는 각 아이템의 이미지, 글, 번호에 스크롤시 애니메이션 속도를 설정해줍니다. 스타일.트랜스폼으로 애니메이션 효과를 줄 수 있으나, 좀 더 부드러운 애니메이션 효과를 위해 gsap를 사용하여줍니다. (power4.out, expo.out = ease 애니메이..
2022. 9. 20.
