Examples

基本的なグラデーションのアニメーション

2色で構成された3種類のグラデーションを使った基本的なアニメーション。

JavaScript

var granimInstance = new Granim({
  element: '#granim-canvas',
  name: 'basic-gradient',
  direction: 'left-right', // 'diagonal', 'top-bottom', 'radial'
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  states : {
    "default-state": {
      gradients: [
        ["#ff9966", "#ff5e62"],
        ["#00F260", "#0575E6"],
        ["#e1eec3", "#f05053"]
      ]
    }
  }
});

document.querySelector('.select-direction').addEventListener('change', function(e) {
  granimInstance.changeDirection(e.target.value);
});

HTML

<canvas id="granim-canvas" style="width:100%;"></canvas>
<select class="select-direction">
  <option value="diagonal">diagonal</option>
  <option value="left-right">left-right</option>
  <option value="top-bottom">top-bottom</option>
  <option value="radial">radial</option>
</select>

画像とbrendingModeを使ったグラデーション v1.1.0

2色のグラデーションと背景色、blendingModeを設定しています。 これは画像とグラデーションを合成する強力で新しい手法です。(v1.1.0から) options.imageのその他のパラメータはoptions.imageで確認することができます。

JavaScript

var granimInstance2 = new Granim({
  element: '#granim-canvas2',
  direction: 'top-bottom',
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  image : {
    source: './img/bg-forest.jpg',
    blendingMode: 'multiply',
    stretchMode: ['stretch','stretch-if-smaller'],
  },
  states : {
    "default-state": {
      gradients: [
        ['#29323c', '#485563'],
        ['#FF6B6B', '#556270'],
        ['#80d3fe', '#7ea0c4'],
        ['#f0ab51', '#eceba3']
      ],
      transitionSpeed: 7000
    }
  }
});

document.querySelector('.blendintMode').addEventListener('change', function(e) {
  granimInstance2.changeBlendingMode(e.target.value);
});

HTML

<canvas id="granim-canvas2" style="width:100%;"></canvas>
<select class="blendintMode">
  <option value="normal">normal</option>
  <option value="multiply">multiply</option>
  <option value="screen">screen</option>
  <option value="overlay">overlay</option>
  <option value="darken">darken</option>
  <option value="lighten">lighten</option>
  <option value="lighter">lighter</option>
  <option value="color-dodge">color-dodge</option>
  <option value="color-burn">color-burn</option>
  <option value="hard-light">hard-light</option>
  <option value="soft-light">soft-light</option>
  <option value="difference">difference</option>
  <option value="exclusion">exclusion</option>
  <option value="hue">hue</option>
  <option value="saturation">saturation</option>
  <option value="color">color</option>
  <option value="luminosity">luminosity</option>
</select>

画像マスクグラデーション

シェイプにグラデーションのアニメーションを作成するために 画像マスクグラデーションを指定します。

JavaScript

var granimInstance3 = new Granim({
  element: '#granim-canvas3',
  direction: 'left-right',
  opacity: [1, 1],
  states : {
    "default-state": {
      gradients: [
        ['#EB3349', '#F45C43'],
        ['#FF8008', '#FFC837'],
        ['#4CB8C4', '#3CD3AD'],
        ['#24C6DC', '#514A9D'],
        ['#FF512F', '#DD2476'],
        ['#DA22FF', '#9733EE']
      ],
      transitionSpeed: 2000
    }
  }
});

HTML

<div class="logo">
  <div class="bloc-logo">
    <canvas id="granim-canvas3"></canvas>
    <a class="logo-mask" href="https://sarcadass.github.io/granim.js/">Granim.js</a>
  </div>
</div>

CSS

.logo {
  width: 100%;
  height: 100px;
  background-color: #eee;
  text-align: center;
}

.bloc-logo {
  position: relative;
  width: 130px;
  height: 49px;
  float: none;
  margin-top: 25px;
  display: inline-block;
}

.bloc-logo canvas,
.bloc-logo .logo-mask {
  display: block;
  width: 130px;
  height: 49px;
}

.bloc-logo .logo-mask {
  position: absolute;
  top: 0;
  left: 0;
  background-size: 130px;
  background-image: url("./img/logo-mask.png");
  text-indent: -9999px;
}

インタラクティブなグラデーション

イベントに反応するグラデーションを作成します。 グラデーションのアニメーション内に表示された状態(state)をクリックすると グラデーションが変化します。

JavaScript

var granimInstance4 = new Granim({
  element: '#granim-canvas4',
  name: 'interactive-gradient',
  elToSetClassOn: '.canvas-interactive-wrapper',
  direction: 'diagonal',
  opacity: [1, 1],
  isPausedWhenNotInView: true,
  stateTransitionSpeed: 500,
  states : {
    "default-state": {
      gradients: [
        ['#B3FFAB', '#12FFF7'],
        ['#ADD100', '#7B920A'],
        ['#1A2980', '#26D0CE']
      ],
      transitionSpeed: 10000
    },
    "violet-state": {
      gradients: [
        ['#9D50BB', '#6E48AA'],
        ['#4776E6', '#8E54E9']
      ],
      transitionSpeed: 2000
    },
    "orange-state": {
      gradients: [ ['#FF4E50', '#F9D423'] ],
      loop: false
    }
  }
});

// no jQuery
document.getElementById('default-state-cta').addEventListener('click', function(event) {
  event.preventDefault();
  granimInstance4.changeState('default-state');
  setClass('default-state-cta');
}, false);
document.getElementById('violet-state-cta').addEventListener('click', function(event) {
  event.preventDefault();
  granimInstance4.changeState('violet-state');
  setClass('violet-state-cta');
}, false);
document.getElementById('orange-state-cta').addEventListener('click', function(event) {
  event.preventDefault();
  granimInstance4.changeState('orange-state');
  setClass('orange-state-cta');
}, false);

function setClass(element) {
  document.querySelector('.canvas-interactive-wrapper .active').classList.remove('active');
  document.getElementById(element).classList.add('active');
};

HTML

<div class="canvas-interactive-wrapper">
  <canvas id="granim-canvas4"></canvas>
  <div class="cta-wrapper">
    <span>
      <a class="active" id="default-state-cta" href="#default-state">Default state</a>
    </span>
    <span>
      <a id="violet-state-cta" href="#violet-state">Violet state</a>
    </span>
    <span>
      <a id="orange-state-cta" href="#orange-state">Orange state</a>
    </span>
  </div>
</div>

CSS

.canvas-interactive-wrapper {
  position: relative;
  height: 300px;
  text-align: center;
}

.canvas-interactive-wrapper canvas {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.canvas-interactive-wrapper .cta-wrapper {
  margin-top: 130px;
  display: inline-block;
}

.canvas-interactive-wrapper .cta-wrapper span {
  position: relative;
  display: inline-block;
}

.canvas-interactive-wrapper .cta-wrapper span a {
  position: relative;
  display: inline-block;
  padding: 3px 7px;
  border: solid 1px transparent;
  margin: 0 20px;
  z-index: 1;
  text-decoration: none;
  color: #222;
  transition: border .3s;
}

.canvas-interactive-wrapper .cta-wrapper span a.active {
  border-color: #222;
}