인프런 커뮤니티 질문&답변

작성한 질문수

애플 웹사이트 인터랙션 클론!

특정 타이밍 스크롤 애니메이션 적용하기

질문 드립니다.

작성

305

안녕하세요~

매일 한걸음 한걸음 강의들으면 공부하고 있는 수강생 입니다ㅎㅎ

'완전히 빠져들게~~ 세라믹' 이 문장을

중간에 오게 하기 위해서 main-message의 스타일에

top: 35vh; 를 추가해주셨는데

왜 화면의 중간에 위치하려면 35%로 적어주는 걸까요?

대략 그정도 되어보여서 임의로 정하신 건지

아니라면 통상적으로 그렇게 사용하는 건지

만약 텍스트가 2줄 이상이라면 수치는 변경되야 하는건지

잘 모르겠습니다ㅎㅎ

css style HTML/CSS javascript 인터랙티브-웹 svg 웹 디자인 클론코딩

퀴즈

강의에서 소개된 스크롤 애니메이션 구현 방식에서, 애니메이션 진행 상태를 결정하는 주요 요소는 무엇일까요?

시간(Time)

스크롤 값(Scroll Value)

마우스 움직임(Mouse Movement)

키보드 입력(Keyboard Input)

답변 2

1분코딩

지식공유자

아, 위치나 디자인 같은 경우는 적당히 보기좋게 준 것이랍니다.
수치는 디자인에 맞게 수정하셔도 무방하겠습니다^^
kain74님이 좋은 답변 달아주셨네요!

kain74

// 저같은 경우는 이런식으로 했어요... 텍스트길이가
// 늘어나도 중앙으로 항상 배치되게끔요.
.main-message{
    font-size:2.5rem;
    opacity:0;
    top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
스크립트도 시작되는위치가 -30% 되도록 처리하고
끝나는 위치가 -70%가 되게하면 될꺼같습니다.

dape_design

작성한 질문수

전체 Q&A

질문하기