정리할 내용

css세계는 진짜 엄청 깊고 어려운 것 같다. 그래도 많은 사람들이 라이브러리 형태로 잘 만들어 놨기 때문에 역시 문서만 잘 찾고 읽을 수 있다면, 디자이너가 만든 사이트처럼 만들 수 있을 것 같다.

원래는 스크롤을 하면서 스크롤이 일정 지점에 머물면 css를 변경해주는 방법인데, 이렇게 직접하면 굉장히 비효율적이기 때문에 잘 만든 라이브러리를 사용한다고 한다.

이번에는 CSS중에서 스크롤시 애니메이션을 해주는 AOS라이브러리를 블로그에 적용해보았다. 우선 몇가지 AOS를 제공하는 곳을 소개해보려한다.

참고 사이트

제가 블로그에 적용한 것은 AOS입니다. 사이트에 들어가보면 사용방법에 대하여 친절히 나와있습니다.
저는 CDN방식을 사용했는데, 아마 다운로드 받아서 하는 방식이 좀 더 빠를 것이라 생각합니다.

-AOS를 init할때 아래와 같이 사용했고, 사용할 태그에 data-aos="fade-in"이런 형태로 넣으면 됩니다.

AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

AOS 스크롤시 오른쪽 여백 문제

사이트의 AOS를 적용하고 오른쪽 margin이 계속 남아있었는데 알고보니 fade-left , fade-right를 하게될 경우 overflow에 대한 정의를 내리지 않아서 overflow의 크기 만큼 margin이 발생한 것이었습니다. 그래서 아래와 같이 overflow에 대한 코드를 추가하면 정상동작합니다.

  style="overflow-x: hidden"

참고사이트