codestates / codestates/underTheSea
[✍️ Dev Log] 송다영 / 2021-01-22
- 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 });
}, []);
```
## 그린삭을 이용한 글자와 그림자 스크롤트리거 사용

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] 미디어 쿼리를 정리하고 개인프로젝트 준비
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.