Reactでアプリを作成しました【10】【Website with Animations using Framer Motion】

環境の準備

①ターミナルでreactアプリケーションを作成する。

$ npx create-react-app <プロジェクト名>
% cd <プロジェクト名>
% npm start

② 必要なパッケージをインストールする。

$ npm install styled-components framer-motion
$ npm install --save typewriter-effect
$ npm install react-spring

コンポーネント・ファイル構成

src
├── components
       └──  Hero.js
├── App.js
├── App.css
├── index.js
├── .env

.env

//.env
SKIP_PREFLIGHT_CHECK=true

App.js

import Hero from "./components/Hero";

function App() {
  return <Hero />;
}

export default App;

src/components/Hero.js

import React from "react";
import styled from "styled-components";
import Typewriter from "typewriter-effect";

export const Nav = styled.nav`
  background: #000;
  height: 80px;
  //   margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;

  @media screen and (max-width: 960px) {
    transition: 0.8s all ease;
  }
`;

const Section = styled.section`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #131313;
`;
const Container = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  padding: 3rem calc((100vw-1300px) / 2);

  @media screen and (max-width: 768px) {
    grid-grid-template-columns: 1fr;
  }
`;

const ColumnLeft = styled.div`
  display: flex;
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem;

  h1 {
    margin-bottom: 0.5rem;
    font-size: 2rem;
  }
  div {
    margin: 3rem 0;
    font-size: 4rem;
    line-height: 1.1;
  }
`;
const Button = styled.div`
  padding: 1rem 3rem;
  font-size: 1rem;
  border: 2px solid #fff;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  background: transpartent;
`;
const ColumnRight = styled.div``;

const Hero = () => {
  return (
    <>
      <Section>
        <Container>
          <ColumnLeft>
            <div className="explanation">
              <Typewriter
                onInit={(typewriter) => {
                  typewriter
                    .typeString("Welcome to the Dogaben")
                    .pauseFor(10)
                    .deleteAll()
                    .typeString("Watch the video and learn!")
                    .pauseFor(10)
                    .deleteAll()
                    .typeString("Journey to the Unknown, 100 Years of Life")
                    .pauseFor(10)
                    .deleteAll()
                    .typeString("Change your life!")
                    .pauseFor(10)
                    .deleteAll()
                    .typeString("Enjoy your life!")
                    .pauseFor(10)
                    .deleteAll()
                    .typeString("Let's get started with Dougaben!")
                    .start();
                }}
              />
             
            </div>
            <Button>Get Started</Button>
          </ColumnLeft>
          <ColumnRight></ColumnRight>
        </Container>
      </Section>
    </>
  );
};

export default Hero;

##参考サイト
[How to Make a React Website with Animations using Framer Motion]
(https://www.youtube.com/watch?v=BcrZ8sNWnfo&t=179s)
[How to create typewriter effect in ReactJS ?]
(https://www.geeksforgeeks.org/how-to-create-typewriter-effect-in-reactjs/)