# 테오의 구글 스프린트 6기
# ScrollAnimation & PageTransition

## Install

With npm

npm install --save scroll-animation-js

or yarn

yarn add --save scroll-animation-js

## Usage

### BasicScroll

interface BasicScroll {
  top?: boolean;
  bottom? boolean;
  onScroll?: () => void;
}
 

import { BasicScroll, FeatureScroll } from "scroll-animation-js"

function Component() {

  return (
    <BasicScroll top={true}>
      <button>위로 가기</button>
    </BasicScroll>
  );
}

### FeatureScroll

interface FeatureScroll {
  top?: boolean;
  bottom? boolean;
  onScroll?: () => void;
}
 

import { BasicScroll, FeatureScroll } from "scroll-animation-js"

function Component() {

  return (
    <FeatureScroll fadeIn={true} ...>
      <div>페이드인 되는 요소</div>
    </FeatureScroll>
  );
}

### Page Transition

interface PageTransition {
  option: 'padeIn' | 'padeOut' | 'slide' | 'bubble';
  duration: number;
  delay: number;
  from : 'top' | 'bottom' | 'left' | 'right';
  to : 'top' | 'bottom' | 'left' | 'right';
}

import { PageTransition } from "my-animation-js"

function Component() {

  return (
    <PageTransition option='padeIn' from="top" to="bottom" >
      <span>위로 페이드인 되며 전환</span>
    </PageTransition>
  );
}

## Getting Started

Read the [documentation](https://react-scroll-parallax.damnthat.tv/) for setup and usage instructions.

- [Usage](https://react-scroll-parallax.damnthat.tv/docs/usage/)
- [How it works](https://react-scroll-parallax.damnthat.tv/docs/examples/how-it-works)

### Demos

- [Storybook v3](https://react-scroll-parallax-v3.surge.sh/) - [Source Code](https://github.com/jscottsmith/react-scroll-parallax/tree/v3/stories)
- [Demo 1](https://react-scroll-parallax-examples.vercel.app/) - [Source Code](https://github.com/jscottsmith/react-scroll-parallax-examples)

### Docs: Hooks

- [`useParallax()`](https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax)
- [`useParallaxController()`](https://react-scroll-parallax.damnthat.tv/docs/usage/hooks/use-parallax-controller)

### Docs: Components

- [`<Parallax>`](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-component)
- [`<ParallaxBanner>`](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-banner-component)
- [`<ParallaxProvider>`](https://react-scroll-parallax.damnthat.tv/docs/usage/components/parallax-provider)