오식랜드

텍스트를 강조하기 위해 밑줄이 그어지는 듯한 모션이 필요할 때가 있다. 그 때 유용한 clip! script에서 cilp을 늘려 밑줄 긋는 모션을 만들어보자 clip을 사용할 때 주의할 점이 있다. 1. clip의 대상은 position이 absolute여야 한다. 2. 요소가 overflow : visible일 때는 적용되지 않는다. 2. :before, :after와 같은 가상 요소는 script에서 직접 선택이 안돼서, 가상요소의 상위 선택자에 클래스를 추가하는 방식으로 해줘야 한다. clip의 문법을 알아보자. 밑줄 모션에서는 사각형 좌표를 사용한다. clip : rect( , , , ) right 좌표를 0 에서 nnnpx만큼 이동시켜주며 밑줄이 그어지는 것 처럼 보이게 할 것이다. 밑줄 그어지..

숫자가 0에서부터 특정 숫자로 화면에 보여지며 바뀌는 모션이 필요할 때가 있을 것이다. 내 경우에는 사건을 총 5000건을 맡았다! 하며 0에서 5000으로 숫자가 올라가는 모션을 만들 목적이였다. 코드는 아주 아주 간단하다! setInterval로 count = 0 에서 100씩 더해주다가, 5000이 되면 setInterval을 멈추는 clearInterval을 실행하고, 리턴시켜준다. 물론 시간, 숫자 등은 원하는대로 커스텀 하면 된다! innerHTML에서 사용한 코드는 숫자 서식을 지원하는 객체의 생성자이다. 원하는 지역의 서식을 사용하면 된다. 참고 링크 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/N..

여러 요소에 공통 모션 1. 요소의 위치 절대값을 구해서 배열에 모은다. 2. 요소의 위치가 scrollY값을 넘게 되면 style을 수정해준다. 3. css에서 transition으로 모션의 속도를 조정해준다 4. eleOffset에 -600 등 으로 모션 실행 오프셋을 조정해준다. 제목1 제목2 제목3 한 요소에 도달했을 때, 요소와 밀접한 다른 요소의 연속 모션 위와 같은 코드에서 ele2를 넣어주고, 모션이 실행되는 forEach문 안에 setTimeout안에 ele2의 모션을 넣어준다. 0.2초의 간격을 주며 연속적으로 일어나게 하면 된다. Woody Buzz Lightyear Bo Peep 한 요소에 도달했을 때 연속으로 여러개 나타나기 title들이 연속적으로 나타나야 할 때 1. 제일 첫번..

코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue 지금까지 fullpage.js는 구현이 다 되었다! 이번 포스트는 필수는 아니지만, 페이지별로 다른 함수를 필요로 할 때, 또는 같은 함수에서 타겟을 현재 페이지의 요소들로 설정할 때 용이할 것이다. watch로 pageIndex 감시 우선 console.log 하나만 넣어놓으면, 페이지가 바뀔 때 pageIndex를 출력해준다. 그것을 응용하여 section별로 필요한 함수를 호출할 수 있을 것이다.

코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue pagination에 click이벤트 적용시키기 @click으로 이벤트를 바인딩 해준다. 인자로 pagination의 index를 넘겨 같은 index의 페이지로 넘어가도록 한다. moveEnet 에 pagination index를 pageIndex에 적용해주는 코드 추가. 그래야 이동 후 휠, 드래그 등에서 에러가 발생하지 않는다. 마우스 드래그 / 터치 이벤트 이 두 이벤트는 사용하는 함수가 같다. 아래 사이트에서 긁어온 후 조금 수정한 거라 이해하기에는 원 블로그가 편할 듯 하다. 참고 블로그 : marshall-ku.com/web/tips/%EC%..

코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue 마우스 휠 이벤트 먼저 마우스 휠 이벤트를 셋팅 한 후에, 마우스 드래그와 터치 이벤트까지 적용시켜 줄 것이다. data 변수 - pageIndex : 현재 보여지는 페이지의 index를 담아 활용할 것이다. - nowMoving : 페이지가 움직이는 동안에 이벤트가 중복되지 않도록 도와줄 변수이다. methods - catchAction : wheel, touchmove, mousemove 등의 이벤트 리스너를 담는 함수이다. - wheelEvent : 마우스 휠 이벤트가 감지됐을 때 실행하는 함수 스크롤을 내일때 e.deltaY 는 100 출력, 올릴..