JS

스크롤을 할 때마다 한 페이지씩 넘어가는 사이트를 구현하는 방법 두 가지를 소개해보고자 한다. 가장 간단한 플러그인을 활용하는 방법이다. 아래는 데모사이트이다. 아래 사이트에 접속하면 fullPage가 어떻게 동작하는지 볼 수 있다.\[https://alvar

먼저 텍스트를 복제하고 부모에 자식으로 붙여준다.이때, 주의할 점은 원래의 클래스명은 지워주는 것이다.(\* 지우지 않을 경우 각각의 텍스트를 선택할 때 문제가 된다.)라이브러리를 사용해서 각각의 텍스트를 split 시켜준다.이때, 다른 함수 내에서도 splitType

스크롤 이벤트를 부드럽게 처리하는 방법은 lenis 라이브러리을 사용하면 간단하다.lenis 라이브러리를 사용하여 스크롤 이벤트를 부드럽게 처리하는 JavaScript 코드는 다음과 같이 작성할 수 있다.이 코드는 다음과 같은 작업을 수행한다. Lenis 클래스의 인스

이전에 작성한 글에서 css로 가로스크롤을 구현한 예제가 있다.하지만 이 예제는 각각의 요소의 넓이를 보장해주기 못하고 화면의 사이즈를 변경했을 때 각각의 div의 사이즈가 작아지는 등의 여러 문제들이 존재한다.따라서 가로 스크롤을 swiper을 통해 만들어보고자 한다

GSAP란?=> GSAP를 사용하면 웹 사이트나 웹 애플리케이션에서 다양한 요소들을 부드럽게 애니메이션화할 수 있습니다. => 이미지는 회전을 하면서 작아지고 커지는 효과를 연출하였습니다.from 메서드는 to 메서드의 반대라고 생각하면 된다.end: "+=2000"

GSAP에서 텍스트 효과를 사용하려면 유로 플러그인을 사용해야 한다.따라서, 텍스트를 분리하는 작업은 자바스크립트로 작업하거나 글씨만 분리해주는 플러그인을 사용해야 한다.위의 코드와 같이 분리하고 싶은 텍스트 클래스를 .split으로 지정한 후 다중 선택자로 반복문을

요소의 클래스를 토글하는 데 사용한다.=> 요소의 클래스를 토글하면 해당 클래스가 없으면 추가되고, 이미 클래스가 존재하면 제거됩니다. 예를 들어, GSAP의 toggleClass를 사용하여 요소의 특정 상태에 따라 클래스를 추가하거나 제거하여 애니메이션 효과를 만들