Granim.js에서 그라데이션을 애니메이션으로 표시하여 웹 사이트를 풍부하게 만듭니다.

GitHub에서 트렌드가 들어있는 JavaScript 라이브러리 Granim.js의 소개 기사입니다.

데모 화면 가 준비되어 있으므로 어떤지 봐 주세요.

※집필 시점(2016/09/15)의 버전은 v1.0.5 입니다.
출시된지 얼마되지 않아 상당한 빈도로 업데이트되었습니다.
버그 픽스나 기능 추가등의 변경이 들어간다고 생각합니다.

사용법

기본적으로는 데모 화면 이나 API 를 봐 주세요.

본 기사에서는 거기를 봐도 알기 어려운 점을 기재해 갑니다.

라이브러리는 zip을 다운로드하는 것이 더 쉽습니다. (npm에서도 제공됩니다)
htps : // 기주 b. 이 m/사 r카다 s/g 등에 m. js/레아세 s
위에서 최신 버전을 떨어 뜨려 둡니다.

최소 구성은 다음과 같습니다.

태그 준비

granim.js 로딩

new Granim({}); 에서 그라데이션 설정

...
<canvas id="canvas-basic"></canvas>

<script src="granim.js"></script>

<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    opacity: [1, 1],
    states : {
        "default-state": {
            gradients: [
                ['#F00', '#000'],
                ['#000', '#00F']
            ]
        }
    }
});
</script>
...

API 보충

API 에서 알기 어려운 곳을 보충해 둡니다.

element

document.querySelector() 로 지정하는 셀렉터의 캐릭터 라인을 지정

name, elToSetClassOn

이러한 속성은 그라데이션이 밝거나 어두운 상태에서 어떤 스타일을 변경하고자 할 때 사용됩니다.

Granim.js의 톱 페이지는 이것을 사용합니다.
밝을 때는 문자를 검은색 바탕으로, 어두울 때는 흰색 바탕으로 스타일을 전환하고 있습니다.

이름

모든 문자열에서 괜찮습니다.

elToSetClassOn

element property와 같이 document.querySelector()로 지정하는 셀렉터의 캐릭터 라인을 지정합니다.
지정되지 않은 경우 에 추가합니다.

무엇을 하고 있는가

그라데이션의 밝기를 계산하여 전체 그라데이션이 어두운 상태인지 밝은 상태인지를 계산합니다.
어두운 상태라면 elToSetClassOn 에서 얻은 HTML 요소에 다음 클래스를 추가합니다.nameの値 + -dark
반대로 밝은 상태라면 다음과 같이 설정합니다.nameの値 + -light
예)
name에 hoge를 지정하면hoge-dark , hoge-light 입니다.

isPausedWhenNotInView

그리는 그라데이션이 브라우저 화면 밖으로 갔을 때 애니메이션을 멈추는 기능입니다.
그라디언트의 일부가 다시 브라우저 화면에 있으면 움직이기 시작합니다.
※스크롤 이벤트를 감시하고 있다

opacity

불투명도입니다.
opacity로 지정하는 배열의 길이는 그라데이션의 색상 수와 일치해야 합니다.

예)gradients에 3색 지정하고 있으므로 opacity도 3개

    opacity: [1, .5, 0],
    states : {
        "default-state": {
            gradients: [
                ['#485563', '#29323c', '#29323c'],
                ['#00c6ff', '#0072ff', '#0072ff']
            ]
        }
    }

stateTransitionSpeed

여러 State를 전환할 때의 속도입니다.
※State는 그라데이션의 1 세트입니다.
데모 화면 의 Interactive Gradients 에 State를 전환하는 샘플이 있습니다.

기술 개요

원래 태그에는 그라데이션을 만드는 방법이 있습니다.

createLinearGradient(선형 그라데이션)

createRadialGradient(원형 그라데이션)

내부적으로는 이러한 기능을 세세한 주기로 불러, 의 내용을 갱신하는 것으로 그라데이션의 애니메이션화를 실현하고 있습니다.

후기

필자는 화면이 가챠가챠 움직이는 것 같은 웹사이트는 싫지만, 색이 바뀔 정도라고 끈질기지 않아도 좋다고 생각합니다.

데모 화면 의 헤더로 사용되고 있는 것처럼 원 포인트로 사용하는 것도 있다고 생각합니다.