number flow 구현

[gringrape]

[gringrape]

아이디어

https://codepen.io/hjortureh/pen/pGlki

기본 생각

• 일렬로 쭉 나열된 숫자를 생각 [1, 2, 3, 4, 5]
• 숫자들 전체가 아래위로 움직인다고 생각
• 초기 위치는 처음 숫자로 결정되어 있음
• 아래 버튼을 누르면 일정한 간격 만큼 이동
• 위 버튼을 누르면 일정한 간격 만큼 이동
• 현재 숫자의 스타일 설정
• 현재 숫자 아래위 숫자들의 스타일 설정
• 그외의 숫자들은 visibility hidden? 자리를 차지하지 않고 숨기는 설정 혹은 overflow hidden 아무거나

[gringrape]

연습

할 일

• [x] 버튼 구현
• [x] 숫자 위치 잡기
• [x] 버튼 클릭시 아래 위 움직임 구현
• [x] 스타일 설정

[gringrape]

개선

• [x] 현재 인덱스를 상태로 저장
• [x] 인덱스에 따라 위치 결정
• [x] 인덱스에 따라 스타일 결정 - 일단, 현재 인덱스가 아니면 투명

[gringrape]

[gringrape]

추가

지금은 전체가 이동하므로 아래것까지 영향을 받는다. 높이가 일정한 컨테이너로 감싼 후에 overflow hidden 해주면 o.k.