결과물들4 Intersection Observer를 이용하여 스크롤시 등장 모션 구현하기 Intersection Observer를 이용하여 스크롤시 등장 모션 구현하기 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 조금 있어보이는 웹페이지를 구성 할 때 빠질 수 없는 것이 바로 모션(애니메이션)입니다. 모션에는 여러 종류가 있지만 오늘은 스크롤을 내 bellmir.tistory.com 저번 포스팅에서 window.scrollY와 element.offsetTop을 이용하여 스크롤 위치에따른 등장 모션을 구현하는 법을 다뤘었습니다. 그런데 이 방법은 너무 복잡하기도 하고, 여러 요소에 같은 모션을 적용한다 하더라도 각각 높이를 계산하여 따로 붙여하는 수고가 있었습니다. 오늘은 Intersection observer라는 웹 a.. 2022. 2. 18. 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 스크롤 시 등장 모션 만들기 - 순수 js (라이브러리x) 조금 있어보이는 웹페이지를 구성 할 때 빠질 수 없는 것이 바로 모션(애니메이션)입니다. 모션에는 여러 종류가 있지만 오늘은 스크롤을 내릴 때 요소가 화면에 등장하는 모션을 한번 만들어 보겠습니다. 스크롤 관련된 모션이나 기능을 넣을 때는 보통 'ScrollMagic'이라는 라이브러리를 많이 사용하는데 오늘은 그런거 없이 순수 자바스크립트 기능만으로 모션을 구현해 보려고 합니다. 스크롤 모션 구현에 필요한 Web API는 크게 addEventListener와 scrollY, offsetTop 세가지로 각각 무슨 역할인지 알아보고 최종 예제 코드를 살펴봅시다. addEventListener() addEventListener는 특정한 이벤트가 일어나.. 2022. 1. 25. Canvas로 육각형 그래프 그리기 - js / vue canvas로 육각형 그래프 그리기 프로젝트를 진행하다보니 육각형 모양의 그래프를 만들어야 했습니다. 이미지를 사용한다면 좋겠지만, 데이터에 맞는 그래프를 그때그때 그려야 했기 때문에 HTML의 를 사용하여 구현하기로 하였습니다. 정육각형 그리는 법 먼저 정육각형을 그리는 방법부터 알아보겠습니다. 1. 먼저 정육각형의 꼭짓점이 될 6개의 점을 구해야합니다. 각 꼭짓점은 원을 6등분을 하면 구할 수 있습니다. 즉, 60도 간격으로 점을 찍으면 되겠네요. 2. 문제는 그림을 그리기 위해선 꼭짓점의 x좌표와 y 좌표를 구해야 한다는 것이죠. 반지름이 r이고 중심점이 (x,y)인 원을 6등분 했다고 가정해봅시다. 60도는 PI/3이니까 각 점의 x좌표는 x+r*cos(PI/3*i), y좌표는 y+r*sin(PI.. 2021. 12. 13. Count up 효과 (숫자 올라가는 효과) - js / vue Count up 효과 - js, vue로 구현하기 웹 개발을 하다보면 0부터 설정한 값까지 숫자가 올라가는 count-up 모션을 만들어야 하는 경우가 있습니다. 근데 카운트업 효과를 구글에 찾아보면 죄다 jQuery로 구현이 되어있더라구요. 그래서 직접 js와 vue를 이용해서 한번 만들어 보았습니다. 간단하게 만든거니 가져다 쓸 때 고치셔야 할거에요. JSFiddle 창을 클릭하면 결과와 소스를 볼 수 있습니다. JavaScript 로 구현 Vue 로 구현 이해가 안되시면 답글 달아주세요:) 2021. 12. 8. 이전 1 다음
