HTML+CSS+Javascript/Javascript15 [javascript] 스크롤마다 한 섹션씩 이동하는 모션 이벤트 만들기 참고 블로그 : https://chpofo.tistory.com/44 스크롤 시 한 영역씩 이동 안녕하세요 :) 오늘은 포트폴리오에서 많이 사용하는 스크롤 시 영역이 이동되는 쿼리를 해볼까 합니다 이전 포스팅에서 JS플러그인을 소개하는 글에서 처음으로 소개했던 플러그인을 사용해도 chpofo.tistory.com 청와대 홈페이지를 본 적 있는 사람(이 많진 않겠지만)은 한번쯤 본 적 있을텐데, 청와대 홈페이지는 스크롤마다 한 섹션씩 이동한다. 이렇게 부드러운 액션 스크롤을 구현한다. 원리는 스크롤 액션 block - 스크롤 1회를 eventListener로 호출 - 호출 시 현재 섹션의 페이지 판단 - 휠이 움직일때의 delta값을 판단해서 아래로 내리는 스크롤인지 위로 올리는 스크롤인지 판단 - if .. 2021. 7. 8. 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. 12. HTML 문서의 동적 구성 이미 로드가 완료된 HTML문서에도 새로운 HTML 코드를 추가할 수 있다. 이를 가능하게 해주는 프로퍼티가 createElement 이다. DIV 객체를 동적으로 생성,삽입,삭제하는 예제 DIV 생성 다음처럼 DIV 버튼을 누르면 새로운 div가 생성되게 된다. 즉, 새로운 태그가 생기게 된다. 2020. 3. 13. 이전 1 2 3 4 다음 반응형
