inflearn logo
강의

Course

Instructor

Apple website interaction clone!

main.js application contents

코드 적용하면서 전체적으로 문제 없는지 확인 하다 해결 안되는 부분이 있어 문의드립니다~

346

dapedesign5008

3 asked

0

안녕하세요~
js코드는 아니고 css 문젠가 싶기도 한데.. 나름 혼자 찾아서 해결하려 했는데 안되네요ㅜ
2가지 인데요,
첫째로 scene-2의 b번 메세지의 줄바꿈이 창 크기에 따라 유연하게 반응해야 하는데 아래 사진처럼 들쑥날쑥 합니다.
\
이런식으로 창 크기에 따라 다르고 심지어 글이 중간에 안보이기도 합니다.
둘째로 창 크기에 따라 scene-1에 해당하는 본문 내용이 scene-2로 넘쳐 흐릅니다.
문제 없이 잘 보일 때도 있지만 이 역시 창 크기가 변경되면 아래처럼 텍스트가 아래 영역으로 넘쳐 흐르고 그 정도가 창마다 다릅니다.

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

Answer 1

2

j j

결론부터 말씀드리자면  css 에서 

.desc-message {
  width: 50%;
  font-weight: bold;
}

를 찾아서

.sticky-elem.desc-message {
  width: 50%;
  font-weight: bold;
}

로 바꾸시면 됩니다.

.sticky-elem 이 width가 100% 설정되어있는데 이게 우선적으로 적용돼서 그렇습니다.
클래스를 더 구체화해서 우선순위를 높이면 됩니다.

이미지 배경 문의

0

68

1

[크로스브라우징] safari에서 동영상 영역 미노출

0

108

1

항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~

0

111

2

vue강의는안하시나요?!

0

104

1

스크롤 속도에 따른 messageA_opacity_out

0

118

1

drawImage(objs.videoImages[sequence], 0, 0); error

0

91

1

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?

0

131

0

선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.

0

210

1

React에서 load 상태를 어떻게 감지할 수 있을까요?

0

685

1

[섹션7-3: 버그수정 2] tempYOffset 오류

0

197

1

스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?

0

315

2

게속 오류떠서 글 작성해봐요....

0

509

2

Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?

1

492

1

특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.

0

459

2

[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.

0

452

2

페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다

0

435

1

섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.

0

535

1

원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?

0

598

2

라이브러리 질문

1

412

2

translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데

0

410

1

[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ

0

599

2

scrollLoop 함수 질문

0

480

2

도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ

0

1237

2

load 이벤트시 첫 비디오 이미지가 뜨네요.

0

509

2