자신 만의 애니메이션 헤더를 구성하고 웹 사이트에 쉽게 적용할 수 있습니다.

https://www.finisher.co/lab/header/

먼저 그누보드 기본 배포판에 쉽게 적용한 것을 보세요.

https://skin.fiance.co.kr/ (상단 부분)

적용방법은 사이트에 있는 것처럼 아주 쉽습니다.

1.  적용할 부분에 클래스 및 스타일을 추가하세요.

<div class="header finisher-header" style="width: 100%; height: 300px;"> Logo, navigation, etc. </div>

2. 라이브러리를 다운로드후 적당한 곳에 올리고 반영하세요.

<script src="finisher-header.es5.min.js" type="text/javascript"></script>

3. 라이브러리 로딩을 위해 아래 코드를 추가합니다.

new FinisherHeader({
  "count": 6,
  "size": {
    "min": 1100,
    "max": 1300,
    "pulse": 0
  },
  "speed": {
    "x": {
      "min": 0.1,
      "max": 0.3
    },
    "y": {
      "min": 0.1,
      "max": 0.3
    }
  },
  "colors": {
    "background": "#9138e5",
    "particles": [
      "#6bd6ff",
      "#ffcb57",
      "#ff333d"
    ]
  },
  "blending": "overlay",
  "opacity": {
    "center": 1,
    "edge": 0.1
  },
  "skew": -2,
  "shapes": [
    "c"
  ]
});