애플 뮤직 UI 응용

[정성은]

이 효과를 정말 구현하고 싶어서

중하교 수학 1차함수 인강까지 들어가며 공식구하는 법을 알았습니다.

 

그런데 결론은 안됩니다. ㅠㅠ

 

1. 스크롤이 1300일때 시작해서 2000일때까지

 opacity는 (1 ~ 0)까지,  scale은 (1 ~ 0.9)까지 변경입니다.

 

2. html

 

3. css

 

3. 1차함수 공식 구하기

 

4. 제이쿼리

 

어디가 잘못 되서 효과가 안나타날까요?

sticky만 적용되는 상황입니다.

ㅠㅠ

[정성은]

또 비슷한 효과도 응용해 보았는데 역시 적용이 안되네요;;

앞에 것과 같은 html, css, js를 같이 쓰고 있는 메인페이지이고요

누끼 이미지가 자기 섹션과 여자 그림 중간에서 스크롤에 따라 위로 아래로 왔다갔다 하는

모션을 주려고 했습니다. 스티키가 아니고, 스크롤이 300~450 구간에서
그림이 살짝 위로 올라가고 스크롤이 위로 올라가면 내려가는 효과입니다.

 

1. 전체그림

 

2. 시작점, 끝점

 

3. 원하는 모션

 

4. html, css

 

5. 제이쿼리

 

에궁... 왜 이 모션이 둘다 다 이럴까요?

[codingapple]

id가 card-box인 요소는 있는데 class가 card-box인 요소를 조작하고 있군요 

밑의 예제는 안움직이면 셀렉터같은게 잘못된 것이고

예상과 달리 많이 혹은 적게 이동하는거면 수식이 틀렸을 뿐입니다

 

[정성은]

와~~~
애플UI 정말 ID를 CLASS로 해놨었네요 ;;;
그거 고치니 작동합니다~
2번째 카드까지 값 구해서 시동한다음에
 2번째 응용 위아래 움직이는 것도 해보겠습니다~

감사합니다.

[정성은]

그냥 값만 바꾸고

eq(0)을 eq(1)로 바꾸면 되야되는걸텐데요...ㅠㅠ

또 왜 안될까요?

에휴;;;

스크롤 값은 1330~2000 => 2300~3000을 바껴서

b(y의절편) 값만 10씩 올라가던데요

 

 

ㅠㅠ

[codingapple]

if문으로 스크롤바높이가 2300부터 3000까지일 때만 둘째 코드 실행하라고 하면 될듯요 

[정성은]

자꾸 일일이 여쭤봐서 죄송합니다.;;

혼자서 아무리 끙끙대도 안되고,

수학인강까지 들으면서 구현하고 싶은건데

계속 안되서요 ㅠㅠ

 

if문으로 엮었는데 왜 안될까요? ㅠㅠㅠㅠㅠㅠ
아 정말 울고 싶네요.

1. if와 else if로 묶음

2. 둘째만 if로 함

 

위 부분에 누끼컷 300-450 스크롤 되는것은 어떻게든 해보겠습니다.

근데 스크롤이 구간이 3가지가 되면 각각 if문으로 해야 하나요?

[codingapple]

html파일 내에서 같은 id는 2개 이상 쓸 수가 없습니다

#card-box를 클래스로 바꾸거나 그래봅시다

 

[정성은]

와~~~

됩니다!!!

감사합니다

 

코딩이란걸 집에서 원격으로 배운지 1달 보름이라 실전 경험이 전혀 없는

흔하디 흔한 초짜의 실수가 마구 마구네요^^;;;

 

이론상으론 다 알면서도,

막상 쌓인 경험이 축적 되지 않음 쉽게 찾을 수 없는 습관과 훈련 부분이네요.

[글쓴이]

글