오식랜드

숫자가 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 출력, 올릴..

코드 전체 보기 : https://github.com/dudrbrb/Vue.js/blob/main/pullpage-nuxt/pages/index.vue 들어가며 여러가지 편리한 라이브러리가 많지만, 설치하고 불러오고 응용하는 과정을 못견디고 직접 구현을 해보았다. 야매이긴 하지만 결과는 매우 만족! 단 170줄로 무거운 라이브러리와 같은 기능을 구현해냈다. scrollTo를 사용했을 때, 모바일 브라우져의 상단 주소창, 하단의 툴바 등의 영향으로부터 벗어나기 위해 나는 transfom을 이용했다. 구조 잡기 '.section'을 추가하면 그 숫자만큼 pagination을 만들어 내기 위해 page라는 변수 안에 '.section'을 담아 v-for로 pagination을 생성했다. 0 1 2 3 스타일은..