[코드 스테이츠 / Final-Project] 134일차, "SVG 애니메이션과의 사투"

별별 에러들이 나오고 있다.

1. SVG 태그를 사용하고 fixed 속성을 부여하니 브라우저 크기를 줄이다 보면 이미지 위를 덮어버리는 문제가 발생했다

=> 이 태그를 만들기 위해 참조했던 네스프레소에서는 이 문제를 해결하기 위해 이미지 위를 덮으려고 할 때마다 반응형으로 SVG 태그가 축소되었다

=> 나도 이 방법을 사용해서 원래 계획은 데스크탑, 모바일 환경 이렇게 두 환경만 CSS 를 만지기로 했으나 메인페이지에서만 태블릿 환경(992px)을 추가하여 CSS 를 만지기로 했다. 그렇게 태블릿 사이즈가 되면 축소된다. 

2. 메인페이지에서 애니메이션 구현하는데 모바일 환경에서는 이상하게 된다

=> pageOffset 이 px 로 고정돼 있어서 그런 것 같다.

=> 또, 태그의 위치 때문에 문제가 발생했다.

=> 내가 원했던 UI 는

[ 데스크 탑 ]

(문구 - 일러 1)

(일러 2 - 문구)

(문구 - 일러 3) 

 

[ 모바일 ] 

일러 1

문구 1

일러 2

문구 2

일러 3

문구 3

 

인데, 저 데스크탑 태그의 위치 때문에 실제로는

 

[ 모바일 ]

문구 1

일러 1 

일러 2

문구 2

문구 3

일러 3

 

이런 순으로 쌓였다

 

================================

 

첫 번째 문제의 해결 방법은 밑의 코드다

    const maxScroll = document.body.offsetHeight - window.innerHeight;
    const currentY = window.pageYOffset;
    const ratio = currentY / maxScroll;

 

이렇게 작성해서 ratio 에 따라 이벤트가 발생하도록 만들었다. (그리고 SVG 의 stopover 태그를 누르면 그 해당 비율로 넘어가도록 구현했다)

 

================================

 

두 번재 문제의 해결 방법은 밑의 코드다

 

window.matchMedia('screen and (max-width: 768px)').matches

 

이렇게 하면 지금 화면이 모바일 화면인지 아닌지 true, false 로 값을 반환해준다. 이 코드를 활용해서 true 일 경우에는 태그의 위치가 달라지도록 구현했다.