codestates / codestates/underTheSea

[✍️ Dev Log] 송다영 / 2021-01-22


Open
#174 0 comments 0 reactions 1 assignee Claimed by @songdayoung1 View on GitHub
Bare Minimum Client Sprint 3
Dominant language
JavaScript
Stars
0
Forks
5
PR merge metrics
No merged PRs in 30d

Description

### 오늘은 어떻게 프로젝트에 기여했나요?

- LandingPage의 CSS 구현 완료
- 그린삭의 스크롤 트리거를 이용한 간단한 반응효과 구현
- Mypage의 CSS 변경
- Searchig 페이지의 오류 해결

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- gsap 라이브러리를 처음 다뤄보았기 때문에 간단한 구현에도 많은 시간이 소요되었다.
- 전체적인 CSS를 수정해야해서 많은 어려움이 있었다.

```js

//LandingSearch.js
// useEffect를 통해 새로고침을 해도 계속 반영되게 하였다.
// marker를 이용해서 반응의 start와 end를 조절해서 기능을 구현하였다.

useEffect(() => {
const txtTimeline = gsap.timeline({
scrollTrigger: {
trigger: ".txt1",
start: "100px 75%",
end: "top 20%",
// markers: true,
toggleActions: "play none restart pause",
},
});
txtTimeline.from(".txt1", { opacity: 0, y: 50, duration: 1 });
txtTimeline.from(".txt2", { opacity: 0, y: 50, duration: 1 });

const tl = gsap.timeline({
scrollTrigger: {
trigger: ".txt1",
start: "100px 80%",
end: "top 20%",
// markers: true,
toggleActions: "play none restart pause",
},
});
tl.from(".manImg", { opacity: 0, x: -100, duration: 1 });
}, []);

```

## 그린삭을 이용한 글자와 그림자 스크롤트리거 사용

스크린샷 2022-01-21 오후 1 47 29

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 미디어 쿼리를 정리하고 개인프로젝트 준비

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.