Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

left, right element를 인자로 받아서 rAF로 롤링 애니메이션을 실행하는 로직을 별도로 구분한다. (RollerTimer 클래스로 분리) #9

Closed
9 tasks done
Tracked by #3
youzysu opened this issue May 23, 2023 · 0 comments
Closed
9 tasks done
Tracked by #3

left, right element를 인자로 받아서 rAF로 롤링 애니메이션을 실행하는 로직을 별도로 구분한다. (RollerTimer 클래스로 분리) #9

youzysu opened this issue May 23, 2023 · 0 comments
Labels
Feature New feature
Milestone
Sprint #01

Comments

@youzysu
Copy link
Owner

youzysu commented May 23, 2023 •
edited
Loading

Screen Recording 2023-05-28 at 19 49 30

  • 5초마다 자동으로 롤링된다.
  • 무한 롤링된다.
  • rAF로 정확한 시점에 콜백이 실행되도록 구현한다.
  • 좌우 영역은 1초 간격으로 번갈아가며 롤링된다.
  • 롤링될 때 바 영역 안에서 제목이 위로 넘어가는 애니메이션을 적용한다.
  • 각 영역에 마우스를 호버하면
    • 무한 롤링이 일시정지된다.
    • 헤드라인에 밑줄을 표시한다.

Refactor
@youzysu youzysu mentioned this issue May 23, 2023
Closed
4 tasks
@youzysu youzysu changed the title 5초마다 자동으로 무한 롤링되고, 좌우 영역은 1초 간격으로 번갈아가며 롤링된다. 5초마다 자동으로 무한 롤링된다. May 23, 2023
@youzysu youzysu added the Feature New feature label May 23, 2023
@youzysu youzysu added this to the Sprint #1 milestone May 23, 2023
@youzysu youzysu changed the title 5초마다 자동으로 무한 롤링된다. left, right element를 인자로 받아서 rAF로 롤링 애니메이션을 실행하는 로직을 별도로 구분한다. (RollerTimer 클래스로 분리) May 26, 2023
youzysu added a commit that referenced this issue May 26, 2023
@youzysu
feat, refactor #9: NewsBar 5초마다 자동으로 뉴스가 무한 롤링된다.
e1965bd 
- dispatch 함수로 action을 전달하여 reducer로 상태를 변경한다.
- 해당 상태를 subscribe하는 함수에 변경된 상태를 인자로 전달하여 실행한다.
- 변경된 새로운 props를 전달받은 컴포넌트는 현재 상태와 비교하여 변경된 부분만 반영한다.
- refactor: 네이밍 일관성을 위해 media를 press로 변경
youzysu added a commit that referenced this issue May 27, 2023
@youzysu
feat #9: AutoRollingNewsBar Animation 구현
37b8b27 
- rAF callback으로 5초 후에 rolling class 추가하기
- transitionend 이벤트 시 다음 news UI로 변경 및 rolling class 제거하기
- refactor: 매직 넘버 수정
youzysu added a commit that referenced this issue May 28, 2023
@youzysu
feat #9 #14: 각 영역에 마우스를 호버하면 무한 롤링이 일시정지된다.
e690c2f 
- AutoRollingNews 컴포넌트에서 isRolling state를 갖는다.
- 마우스 이벤트에 따라 isRolling state 값이 변경된다.
- isRolling이 true일 때만 rolling이 발생되도록 한다.
@youzysu youzysu closed this as completed May 28, 2023
@youzysu youzysu mentioned this issue May 28, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature New feature
Projects
None yet
Milestone
Sprint #01
Development

No branches or pull requests
1 participant
@youzysu