React.js react-scroll-horizontal

·2022년 2월 6일
0

React

목록 보기
4/12

포트폴리오용 웹을 구상중 스크롤을 가로로 넘기는게 내용을 더 효과적으로 보일거 같다는 생각이 들었다.
스크롤을 가로로 하면 천체들의 크기 비교가 더 직관적으로 보이지 않을까? 싶었다.

react-scroll-horizontal

코드를 구현할까 싶었지만 쉽게 사용 가능한 모듈을 발견해버렸따!

npm.js 설명

🚗사용 방법

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 되는 애니메이션을 구현해야한다.
-> 특정 스크롤 시점에 애니메이션 실행하는 트리거 이벤트 만들기

profile
중요한 건 꺾여도 다시 일어서는 마음

0개의 댓글