오식랜드

wrapper 안에 box의 좌표값을 구해보자. 상대위치 getBoundingClientRect 객체를 이용하여 출력해보면 box의 정보값을 보여준다 viewport로부터 box의 위치값이 출력된다. 그리고 여기서 우리가 사용할 top값을 scroll 이벤트에서 출력해보면, 스크롤 할 때 마다 위치가 바뀌게 된다. viewport를 기준으로 잡기 때문에 쭉 스크롤 하여 요소가 화면 보다 더 위로 가게 되면 음수로 출력이 된다. window.addEventListener('scroll', function(){ console.log(box.getBoundingClientRect().top) }) 절대위치 앞에서 구한 상대위치에 스크롤 된 길이를 더해주면 절대값이 나온다. window.pageYOffset 을..

window 객체를 console창에 출력해보면 scrollY값에 스크롤 위치가 담긴다는 것을 알 수 있다. window 이벤트 리스너 중 'scroll'이벤트에 window.scrollY를 출력하게 하면 스크롤 할 때 마다 그 위치값이 나오는 것을 확인할 수 있다. window.addEventListener('scroll', function(){ console.log(window.scrollY) }); 조건문 등을 이용하여 유용하게 사용해보자! if(window.scrollY > 1000)

[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. 제일 첫번..