오식랜드

[nuxt] 실제 업무 중 사용한 슬라이드를 공유하려고 한다. 실제 foreigner.lawfirmy.com/ 에 적용한 슬라이드다. Template Nuxt에서 작업했던 슬라이드라 Nuxt의 구조를 가져왔다. html의 body라고 생각하면 된다! 구조를 보면, slide-wapper > slide-container > slide 가 있고, slide 안에 이미지와 글 공간이 마련되어 있다. Title 1 / 3 태그 안의 @click은 클릭 이벤트를 바인딩 시켜준 것이다. element.addEventListener('click', function())과 같은 의미이다. 사람 이미지와 글 아래의 좌, 우 버튼 클릭시 슬라이드가 넘어가는 이벤트를 호출한다. Style 슬라이드가 absolute이면 ac..

텍스트를 강조하기 위해 밑줄이 그어지는 듯한 모션이 필요할 때가 있다. 그 때 유용한 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%..