[TIL] 20211228 animation/ accordion menu/ emotion keyframes 등

1. react forwardRef

https://www.daleseo.com/react-forward-ref/

[React] forwardRef 사용법

 

2. react project structure

https://ko.reactjs.org/docs/faq-structure.html

파일 구조 – React

 

3. slot machine animation

https://stackoverflow.com/questions/62426257/creating-an-animation-for-a-basic-react-slot-machine

Creating an animation for a basic React slot machine

 

4. chart 라이브러리 nivo

https://nivo.rocks/components/

Components | nivo

 

5. 회전하는 원 로딩 애니메이션 만들기

https://code-study.tistory.com/31

CSS 로딩UI 만들기 #1. 회전하는 원(Circle)

 

6. interactive website를 모아놓은 곳

https://www.awwwards.com/websites/web-interactive/

Best Web and Interactive Websites

 

7. emotion/react 에서 keyframes쓰는 법

/** @jsxImportSource @emotion/react */
import { css, keyframes } from "@emotion/react";

const bounce = keyframes`
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0,-4px,0);
  }
`;

const spinCircle = keyframes`
from {
    transform:translate(-50%, -50%) rotate(0);
}
to {
    transform:translate(-50%, -50%) rotate(360deg);
}
`;

const loadingBox_circle = css`
  border: 10px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  border-top: 10px solid green;
  animation: ${spinCircle} 0.8s linear infinite;
  margin: 0 auto;
  margin-top: 100px;
`;

const Emotion = () => {
  return (
    <div>
      <div css={loadingBox_circle}></div>
    </div>
  );
};

export default Emotion;

 

8. offsetTop

html 엘리먼트에 내장된 읽기 전용 값

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

HTMLElement.offsetTop - Web APIs | MDN

 

9. accordion design

https://codesandbox.io/s/nifty-ardinghelli-ybd6c?file=/src/styles.css 

nifty-ardinghelli-ybd6c - CodeSandbox