Segment Effect
今回はメインビジュアルを擬似分割＆シャドウ付けで個性的にな導入部を実現するライブラリを紹介したいと思います。
サンプルファイルだといろいろ他にも組み込まれているので少しややこしいですが、基本的には背景画像を指定したタグがあれば実現する簡単仕様になっています。
用意するもの
まずはこちらのGitHubからプラグインを手に入れます。
最低限必要なファイルはサンプルの中のjsディレクトリの中身3つと、cssディレクトリの中のnormalize.cssとcomponent.cssのふたつとなります。あ、あとは背景に使う画像も必要ですね。
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> <script src="js/anime.min.js"></script> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/main.js"></script>
jsはanime.min.jsはアニメーション部分を、imagesloaded.jsは画像読み込み後に処理を行う為の補助をしているようです。
基本的な使い方
に基本的には.segmenterを用意すれば動くようです。ただ、タイトルアニメーションをつけるなど他のものと組み合わせているのでサンプルはちょっと長めになっています。
<div class="segmenter" style="background-image: url(img/1.jpg)"></div>
Javascriptの記述に関してはsegmenter.animate()を発火させればいいだけです。サンプルではそれをクリックさせた時に発火させる為にクリックイベントをつけています。
segmenter.animate();
切り取り方を変えるには
エフェクトの切り取り方を変えるには、オプションを指定します。サンプルのindex2〜6を見てみればわかると思いますが、切り取る数や位置をオプションとして指定しています。
アニメーションのスピードや動きも設定できるようなので参考に作ってみると面白い思います。
var segmenter = new Segmenter(document.querySelector('.segmenter'), {
pieces: 9, //切り取る数を指定
positions: [ //切り取る位置を指定
{top: 30, left: 5, width: 40, height: 80},
{top: 50, left: 25, width: 30, height: 30},
{top: 5, left: 75, width: 40, height: 20},
{top: 30, left: 45, width: 40, height: 20},
{top: 45, left: 15, width: 50, height: 40},
{top: 10, left: 40, width: 10, height: 20},
{top: 20, left: 50, width: 30, height: 70},
{top: 0, left: 10, width: 50, height: 60},
{top: 70, left: 40, width: 30, height: 30}
],
animation: { //アニメーションの詳細設定
duration: 2000,
easing: 'easeInOutCubic',
delay: 0,
opacity: 1,
translateZ: 85,
translateX: {min: -20, max: 20},
translateY: {min: -20, max: 20}
},
parallax: true, //マウス位置によるパララックスアクションの有無
parallaxMovement: {min: -10, max: -5}, //パララックスのアニメーション量
onReady: function() {
trigger.addEventListener('click', function() {
segmenter.animate();
});
}
});
以上がSegment Effectの使い方でした！
さらに詳しくは公式のGitHubへどうぞ。
