본문 바로가기

HTML+CSS+Javascript30

[javascript] 스크롤마다 한 섹션씩 이동하는 모션 이벤트 만들기 참고 블로그 : https://chpofo.tistory.com/44 스크롤 시 한 영역씩 이동 안녕하세요 :) 오늘은 포트폴리오에서 많이 사용하는 스크롤 시 영역이 이동되는 쿼리를 해볼까 합니다 이전 포스팅에서 JS플러그인을 소개하는 글에서 처음으로 소개했던 플러그인을 사용해도 chpofo.tistory.com 청와대 홈페이지를 본 적 있는 사람(이 많진 않겠지만)은 한번쯤 본 적 있을텐데, 청와대 홈페이지는 스크롤마다 한 섹션씩 이동한다. 이렇게 부드러운 액션 스크롤을 구현한다. 원리는 스크롤 액션 block - 스크롤 1회를 eventListener로 호출 - 호출 시 현재 섹션의 페이지 판단 - 휠이 움직일때의 delta값을 판단해서 아래로 내리는 스크롤인지 위로 올리는 스크롤인지 판단 - if .. 2021. 7. 8.
[CSS3] div 사이에 공백 제거하기 스타트업 개발자다 보니 회사에서 별걸 다 개발하는데, 웹 부분 섹션 스크롤링 구현하는데 희한하게 div 사이에 공백이 생겨서 스크롤링이 희한하게 일어나는것이다...... (티스토리 오류 같은데, 움짤이 이상하게 올라갑니다. 클릭하면 정상 동작하니 동작 오류와 해결책을 불편하시겠지만 클릭해서 확인해주세요.) 아니 대체 이게 뭐시여 ㅠ 하고 찾아보다가 깨달은것은....... div가 사실 html 문서라 시각적 구현할 때 section을 지정한 div 사이에 엔터가 보이면서 생기는 현상이라는 것이다 (머리 부여잡은 토기짤) 그래서, 섹션 div에 클래스를 부여하고, 그 클래스에 font-size : 0px로 지정했다. .section { width: 100%; height: 100%; position: re.. 2021. 7. 6.
JavaScript] fabric.js 를 이용하여 마우스 포인터를 따라 직선 긋기 이전에 itstudy-mary.tistory.com/365?category=900951 Javascript] 강력한 캔버스 라이브러리, fabric 웹에서 잠깐 좌표를 그리고, 그 좌표를 가지고 와야 할 일이 있어서 자바스크립트를 쓰기로 했다. 이쯤이면 슬슬 그래픽 엔지니어로 진화할 것 같다. 기존에도 자바스크립트에는 그래픽을 지원 itstudy-mary.tistory.com 이 포스팅에서, fabric.js의 큰 장점은 그려지는 개체들을 하나하나 객체화 시킨다는데에 장점을 둔다고 했다. 기존의 canvas 라이브러리로 이것을 만드려 하면, 마우스가 움직일 때 마다 만들어지는 선을 하나하나 지우고, 랜더링 하고, 다시 랜더링 된 선을 지우고 해야하지만, fabric.js는 랜더링을 선언허지 않으면 객체화.. 2021. 5. 4.
Javascript] 강력한 캔버스 라이브러리, fabric 웹에서 잠깐 좌표를 그리고, 그 좌표를 가지고 와야 할 일이 있어서 자바스크립트를 쓰기로 했다. 이쯤이면 슬슬 그래픽 엔지니어로 진화할 것 같다. 기존에도 자바스크립트에는 그래픽을 지원하는 canvas 라는 API가 존재하기는 한다. 그러나 이 라이브러리는 정말 그림만 그려서 도면을 그려야 하고, 마우스 오버해서 직선을 그려야 할때, 일일히 이전에 그렸던 직선을 랜더링 제거해야한다는 점이 너무 불편했다. 그러다 보게된 것이 fabric 라이브러리다. (현재 뒤로가기까지 구현되어 있다.) fabric 라이브러리의 장점은 만들어진 요소 하나하나가 객체화 된다는 점이다. 그래서, 뒤로가기도 마지막에 그린 객체 하나를 지정해서 삭제하면 된다. fabric을 자신의 프로젝트에 붙이는 과정은 간단하다. fabric.. 2021. 4. 8.
반응형

티스토리툴바