[React] 리액트 풀페이지fullpage.js 적용하기

풀페이지 기능으로 만들어진 웹사이트는 스크롤 하면 페이지 단위로 화면이 스크롤 된다.

 

설치

npm i react-full-page

react-full-page는 기능을 적용시키는 화면은 모두 풀페이지 스크롤 기능이 적용되어야 한다.

 

 

사용

import React from 'react';
import { FullPage,Slide} from 'react-full-page';

export default class FullPageExample extends React.Component{
	render(){
    	return(
        	<FullPage controls>
            	<Slide>
                	<h1>Inner slide</h1>
                </Slide>
                <Slide>
                	<h1>Another slide</h1>
                </Slide>
            </FullPage>
        );
    }
});

 

 

 

---

 

 

html

<div id="root"></div>

 

css

body {
  margin : 0;
}


.section-common {
  width : 100%;
  height : 100%;
  display:flex;
  justify-content : center;
  align-items:center;
  font-size:36px;
}

.section-area1 {
  background-color : red;
}
.section-area2 {
  background-color : blue;
}
.section-area3 {
  background-color : pink;
}


.slide-navigation button:nth-child(1) {
  display: none;
}

.slide-navigation button:nth-last-child(1) {
  display: none;
}

.slide-navigation button {
  background-color: white;
  border-radius: 10px;
  border: 1px solid black;
  width: 5px;
  height: 15px;
  margin: 0 5px;
  font-size: 0px;
  cursor: pointer;
}

.slide-navigation {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  bottom: 0px;
}

.slide-navigation button:disabled {
  background-color: black;
  border: 1px solid white;
}

 

 

js

import {FullPage,Slide} from "https://cdn.skypack.dev/react-full-page@0.1.12";

class TestApp extends React.Component {
  render(){
    return (
    <div>
    <FullPage controls controlsProps={{ className: "slide-navigation" }}>
      <Slide>
        <div className="section-common section-area1">
          1
        </div>
          </Slide>
       <Slide>
       <div className="section-common section-area2">
          2
        </div>
        </Slide>
        <Slide>
        <div className="section-common section-area3">
          3
        </div>
      </Slide>
     </FullPage>
    </div>
  )
 }
}

ReactDOM.render(<TestApp/>,document.getElementById("root"));