포트폴리오용 웹을 구상중 스크롤을 가로로 넘기는게 내용을 더 효과적으로 보일거 같다는 생각이 들었다.
스크롤을 가로로 하면 천체들의 크기 비교가 더 직관적으로 보이지 않을까? 싶었다.
react-scroll-horizontal
코드를 구현할까 싶었지만 쉽게 사용 가능한 모듈을 발견해버렸따!
🚗사용 방법
import React, { Component } from 'react'
import HorizontalScroll from 'react-scroll-horizontal'
class ScrollingHorizontally extends Component {
render() {
const child = { width: `300em`, height: `100%`}
return (
<body>
<HorizontalScroll>
<div style={child} />
</HorizontalScroll>
</body>
)
}
📖구현할 components
천체들을 보여줄 컴포넌트인 slide.js 만 스크롤 시 넘어가고 header는 고정되어야한다.
스크롤 타이밍에 따라 다음 슬라이드가 Fade In 되는 애니메이션을 구현해야한다.
-> 특정 스크롤 시점에 애니메이션 실행하는 트리거 이벤트 만들기
중요한 건 꺾여도 다시 일어서는 마음