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

dape_design님의 프로필 이미지

작성한 질문수

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

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

질문 드립니다.

21.07.28 23:18 작성

·

221

0

안녕하세요~
매일 한걸음 한걸음 강의들으면 공부하고 있는 수강생 입니다ㅎㅎ
'완전히 빠져들게~~ 세라믹' 이 문장을
중간에 오게 하기 위해서 main-message의 스타일에
top: 35vh; 를 추가해주셨는데
왜 화면의 중간에 위치하려면 35%로 적어주는 걸까요?
대략 그정도 되어보여서 임의로 정하신 건지
아니라면 통상적으로 그렇게 사용하는 건지
만약 텍스트가 2줄 이상이라면 수치는 변경되야 하는건지
잘 모르겠습니다ㅎㅎ

답변 2

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

2021. 08. 20. 17:27

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

0

kain74님의 프로필 이미지

2021. 08. 03. 16:18

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