[TIL] 220414
세미 프로젝트 - intro의 스크롤과의 싸움
LINE｜라인은 언제나 사용자와 함께 합니다.
메신저 앱 그 이상의 경험을 제공합니다. 라인은 새로운 인프라 경험, 새로운 커뮤니케이션 경험을 모두에게 전달하고자 합니다.
line.me
이런 인트로를 만들려면 어떻게 해야될까
1. 인트로가 뜰 때 스크롤바가 사라져야 한다.
2. 페이지 중간에서 새로고침을 하면 인트로가 재실행되고 '상단으로 이동' 또는 '그 자리에 스크롤 위치 유지' 해야 한다.
3. 인트로가 끝나면 없어지고 index화면 클릭이 가능해야한다(html도 이동안하고 페이지 내에서 유지)
일단 크게 이 정도이고 스크롤바가 사라지는 건 정적인 영역에서는 css를 이용하면 되는데 저런 동적인 화면에서는 자바스크립트/제이쿼리 사용이 불가피하게 필요했다. 내가 못해서인지 css를 이용해서는 스크롤바가 제대로 사라지지 않았다.
재생되는 애니메이션에
HTML/CSS 스크롤바 숨기기 없애기 (스크롤 동작)
스크롤은 동작하지만 스크롤바를 숨기고 싶은 경우가 있어요. 예제를 통해 알아볼게요. 우선, 스크롤을 생성하겠습니다. 안녕하세요. 스크롤바 숨기기. 스크롤은 동작. Scrollbar hide. Scroll active.
gofnrk.tistory.com
이 코드를 활용해 keyframe에도 넣어보고 그냥 class값에도 넣어보고 다양하게 해봤지만 다 되지 않았다.
(실패한 것도 좀 적어놔야될것 같다. 막연하게 그냥 안됐다! 라고만 생각하고 기록에 남기질 않으니 나중에 돌이켜봤을 때 내가 어떻게 바꿨으면 성공할 수 있었는지 영원히 모르게 되버리는 것 같다.)
그래서 이제 자바스크립트나 제이쿼리를 활요해보려했지만 이해도가 부족해 제대로 구현해내지 못했고, 애니메이션이 끝나면 자동으로 상단으로 이동해있는 정도에 그쳤다.
쉬운게 없군..