scroll3 [javascript] 자바스크립트 스크롤 캔버스 애니메이션 (애플 홈페이지) 참고: https://css-tricks.com/lets-make-one-of-those-fancy-scrolling-animations-used-on-apple-product-pages/ 애플은 제품 페이지에 적용한 매끈한 애니메이션으로 잘 알려져 있습니다. 예를 들어, 화면에서 스크롤하면 MacBook이 열리고 아이폰이 회전하면서 하드웨어를 보여주고 소프트웨어를 시연하며 제품이 어떻게 사용되는지에 대한 대화형 이야기를 들려줍니다. 여러분이 보는 대부분의 효과들은 HTML과 CSS로만 만들어지지 않습니다. 그럼 뭘까요? 알아내기 조금 어려울 수도 있습니다. 브라우저의 DevTools를 사용하더라도 요소뿐이기에 답을 찾기 힘듭니다. 이 효과 중 하나를 자세히 살펴보고 어떻게 만들어졌는지 알아보겠습니다. .. 2023. 3. 15. [javascript] 자바스크립트 스크롤 애니메이션 참고: https://css-tricks.com/books/greatest-css-tricks/scroll-animation/ JavaScript를 사용하지 않고 CSS 만으로 스크롤 애니메이션을 할 수도 있습니다. 수평 스크롤바 포스트를 보면 확실히 CSS 매직입니다. 하지만 이번에는 JavaScript에 의해 만들어진 아주 작은 정보인 페이지가 얼마나 멀리 스크롤 되었는지를 가지고 CSS에서 다양한 스크롤 애니메이션 작업을 할 수 있습니다. 스크롤 애니메이션 다음의 자바스크립트 한 줄로 스크롤된 페이지의 비율을 알아낼 수 있고 CSS 커스텀 속성을 설정할 수 있습니다. window.addEventListener('scroll', () => { document.body.style.setProperty(.. 2023. 3. 12. [javascript] CSS scroll indicator (수평 스크롤바) 참고: https://css-tricks.com/books/greatest-css-tricks/scroll-indicator/ JavaScript를 쓰지 않고 사용자가 페이지를 얼마나 스크롤 했는지 보여주는 진행 표시줄을 만드는 방법이 있습니다. 그래디언트와 포지셔닝을 잘 사용해서 말입니다. 이미 스크롤 위치를 표시하는 빌트인 브라우저 기능이 있습니다. 우측에 표시되는 스크롤 막대로 아주 잘 작동합니다. 또한 이 스크롤 바 스타일을 바꾸는 표준화된 방법까지도 있습니다. body { --scrollbarBG: #CFD8DC; --thumbBG: #90A4AE; scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG); } 여기에 최.. 2023. 3. 12. 이전 1 다음
