[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ

Post on:2016年7月15日

ScrollTrigger

ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーションを楽しみ、上にスクロールすると何も起きず、再度下にスクロールしても何も起きない、よく見かけると思います。それならそもそもいらないんじゃないかとも思えます。

ScrollTriggerはrequestAnimationFrameを使用し、要素のスクロールポジションに基づいてアニメーションを適用させるので、下にスクロールした時だけでなく、上にスクロールした時、繰り返し下にスクロールした時にも同様に適用することができます。

ScrollTrigger
ScrollTrigger -GitHub

デモでは下にスクロールした時はもちろんのこと、上にスクロールした時にもアニメーションを適用できます。

デモページ: 下にスクロール

デモページ: 上にスクロール

ScrollTriggerの使い方

Step 1: 外部スクリプトとJavaScript

当スクリプトを外部ファイルとして記述し、スクリプトを初期化します。

<body>
  ...
  コンテンツ
  ...
  <script src="ScrollTrigger.min.js"></script>
  <script>
  document.addEventListener('DOMContentLoaded', function(){
    ScrollTrigger.init();
  });
  </script>
</body>

<body>

...

コンテンツ

...

document.addEventListener('DOMContentLoaded', function(){

ScrollTrigger.init();

});

</script>

</body>

初期化時のパラメータは「bindTo」と「scrollIn」の2つで、オプションです。
「bindTo」はトリガーとなるHTML要素で、デフォルトは「document.body」で、特定の要素を指定することもできます。「scrollIn」はスクロールのポジションを得る要素で、デフォルトは「window」で、スクロールするdiv要素などを指定することもできます。

Step 2: HTML

アニメーションを適用する要素にdata-scrollを与えます。

<div data-scroll></div>

1	<div data-scroll></div>

Step 3: アニメーションの設定

アニメーションはCSSで設定します。
その要素がビューポート上にない時は「.invisible」で、ある時は「.visible」が与えられるので、それぞれのclassにアニメーションを定義します。

.invisible {
    transition: opacity 0.5s ease;
    opacity: 0.0;
}

.visible {
    transition: opacity 0.5s ease;
    opacity: 1.0;
}

.invisible {

transition: opacity 0.5s ease;

opacity: 0.0;

}

.visible {

transition: opacity 0.5s ease;

opacity: 1.0;

}

上記の指定はフェードのアニメーションで、要素がビューポートにスクロールして入ると次第にはっきりとします。

Scrollbear

ページを表示する時に、そのページ内にある画像が読み込まれるにつれ、スクロールバーのサイズが変わり、ポジションが変化してしまいます。少しだったらそんなに気にならないかもしれませんが、画像がたくさんあるページだとイラっとする人もいるかもしれません。

Scrollbearはコンテナの高さをトレースし、画像が読み込まれてコンテナの高さが変化する時でもスクロールのポジションを維持することができるスクリプトです。

Scrollbear
Scrollbear -GitHub

Scrollbearの使い方

Step 1: JavaScript

当スクリプトを外部ファイルとして記述し、適用するコンテンツを指定します。

<body>
  ...
  コンテンツ
  ...
<script type="text/javascript" src="scrollbear.js"></script>
<script type="text/javascript">
Scrollbear.start(document.querySelector('#bear'))
</script>
</body>

<body>

...

コンテンツ

...

Scrollbear.start(document.querySelector('#bear'))

</script>

</body>

Step 2: HTML

Scrollbearで範囲を指定できるようにidやclassを与えます。

<div id='bear' style='overflow: scroll;'>
    <div id='container'>
        <p>content</p>
    </div>
</div>

<p>content</p>

</div>

Barba.js

Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？

Barba.jsはPJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトです。

Barba.js
Barba.js -GitHub

Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。
ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。

Poignée de main virile

ページの移動時に、スクリプトが利用されています。

Barba.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="barba.min.js" type="text/javascript"></script>
</body>

<body>

...

コンテンツ

...

</body>

JSファイルは、CDNでも配布されています。

<body>
  ...
  コンテンツ
  ...
  <script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/0.1.0/barba.min.js" type="text/javascript"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

通常のHTMLに、スクリプトを適用する要素にclassを与えます。

<div id="barba-wrapper">
  <div class="barba-container">
    ...Put here the content you wish to change between pages...
  </div>
</div>

...Put here the content you wish to change between pages...

</div>

#barba-wrapperはラッパー用、.barba-containerはコンテナ用です。

Step 3: JavaScript

スクリプトを初期化して、実行します。

Barba.Pjax.start();

1	Barba.Pjax.start();

エフェクトやイベントの実装方法は、下記ページをご覧ください。

Isometric Grids

Isometric GridsはまるでPSDのモックアップを見ているかのような3Dのアイソメトリックのグリッドにパネルやカードを配置し、インタラクションも備えたスクリプトです。

Isometric Grids -GitHub

デモではその大胆なデザインを活かした2通りのレイアウトが用意されています。一つ目は3Dのグリッドがそのままスクロールするデモです。

Demo: Scrollable Grid

二つ目は固定タイプで、ヒーローヘッダのように使われています。

Demo: Static Grid

Isometric Gridsの使い方

Step 1: 外部ファイル

外部ファイルを</body>の上に記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="js/imagesloaded.pkgd.min.js"></script>
  <script src="js/masonry.pkgd.min.js"></script>
  <script src="js/dynamics.min.js"></script>
  <script src="js/classie.js"></script>
  <script src="js/animOnScroll.js"></script>
  <script src="js/main.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

各パネルをリスト要素で配置します。

<div class="isolayer isolayer--scroll1 isolayer--shadow">
  <ul class="grid grid--effect-flip">
    <li class="grid__item">
      <a class="grid__link" href="https://dribbble.com/forefathers">
        <img class="grid__img layer" src="img/canvas.png" alt="Canvas Dummy" />
        <img class="grid__img layer" src="img/wireframe.png" alt="Wireframe Dummy" />
        <img class="grid__img layer" src="img/Dribbble1/1.jpg" alt="01" />
        <span class="grid__title">Forefathers</span>
      </a>
    </li>
    ...
    ...
  </ul>
</div>

<span class="grid__title">Forefathers</span>

</a>

</li>

...

</ul>

</div>

Step 3: JavaScript

ラッパーを指定し、スクリプトを実行します。

<script>
(function() {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  [].slice.call(document.querySelectorAll('.isolayer')).forEach(function(el) {
    new IsoGrid(el, {
      type : 'scrollable',
      transform : 'translateX(-15vw) translateY(275px) rotateX(45deg) rotateZ(45deg)',
      stackItemsAnimation : {
        properties : function(pos) {
          return {
            translateZ: (pos+1) * 50,
            rotateZ: getRandomInt(-3, 3)
          };
        },
        options : function(pos, itemstotal) {
          return {
            type: dynamics.bezier,
            duration: 500,
            points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],
            //delay: (itemstotal-pos-1)*40
          };
        }
      },
      onGridLoaded : function() {
        classie.add(document.body, 'grid-loaded');
      }
    });
  });
})();
</script>

(function() {

function getRandomInt(min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}

[].slice.call(document.querySelectorAll('.isolayer')).forEach(function(el) {

new IsoGrid(el, {

type : 'scrollable',

transform : 'translateX(-15vw) translateY(275px) rotateX(45deg) rotateZ(45deg)',

stackItemsAnimation : {

properties : function(pos) {

return {

translateZ: (pos+1) * 50,

rotateZ: getRandomInt(-3, 3)

};

options : function(pos, itemstotal) {

return {

type: dynamics.bezier,

duration: 500,

points: [{"x":0,"y":0,"cp":[{"x":0.2,"y":1}]},{"x":1,"y":1,"cp":[{"x":0.3,"y":1}]}],

//delay: (itemstotal-pos-1)*40

};

}

onGridLoaded : function() {

classie.add(document.body, 'grid-loaded');

}

});

})();

</script>

Multiple.js

Multiple.jsは複数のパネルを半透明の美しいグラデーションにまたがり、背景を続き画像として配置することができます。非常にシンプルなHTMLで実装でき、デモを実際に見るとその美しさに感動すら覚えます。

Multiple.js
Multiple.js -GitHub

スクリプトにはオプションが用意されており、さまざまなレイアウトに簡単に変更することができます。

デモページ: ギャップ調整

背景画像やグラデーションを変更することも可能です。
右上のパネルは左のパネル群の続き画像になっています。

デモページ: 背景画像とグラデーションの変更

Multiple.jsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

<head>
  ...
  <link href="./multiple.css" rel="stylesheet">
</head>
<body>
  ...
  コンテンツ
...
  <script src="./multiple.min.js"></script>
</body>

<head>

...

</head>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

各パネルをdiv要素で実装し、classを加えます。

<div class="item">コンテンツ</div>
<div class="item">コンテンツ</div>
<div class="item">コンテンツ</div>

<div class="item">コンテンツ</div>

Step 3: JavaScript

適用する要素を指定し、スクリプトを実行します。

var multiple = new Multiple({
  selector: '.item',
  background: 'linear-gradient(#273463, #8B4256)'
});

var multiple = new Multiple({

selector: '.item',

background: 'linear-gradient(#273463, #8B4256)'

});

パネル毎に不透明度をしたい時は、個別に記述します。

new Multiple({
  selector: '.item.second',
  background: 'linear-gradient(rgb(70, 106, 177), #32A668)',
  opacity: true
});

new Multiple({
  selector: '.item.third',
  background: 'linear-gradient(rgb(70, 106, 177), #32A668)',
  opacity: .9
});

new Multiple({

selector: '.item.second',

background: 'linear-gradient(rgb(70, 106, 177), #32A668)',

opacity: true

});

new Multiple({

selector: '.item.third',

background: 'linear-gradient(rgb(70, 106, 177), #32A668)',

opacity: .9

});

anime.js

anime.jsはその名の通りWebページにアニメを適用する軽量のスクリプトで、CSSアニメーションを使ってDOM要素やSVG、JavaScriptのオブジェクトで機能します。

anima.js
anima.js -GitHub

デモではanime.jsを使った楽しいアニメーションを楽しめます。

デモページ

anime.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="anime.min.js"></script>
</body>

<body>

...

コンテンツ

...

</body>

Step 2: HTML

HTMLは非常にシンプルで、アニメーションさせたい要素を指定できるようclassやidを付与しておきます。

<article class="green">
  <div class="blue"></div>
</article>

</article>

Step 3: アニメーションの設定

JavaScriptでアニメーションを適用する要素を指定し、アニメーションを定義します。

anime({
  targets: 'div',
  translateX: '13rem',
  rotate: {
    value: 180,
    duration: 1500,
    easing: 'easeInOutQuad'
  },
  scale: {
    value: 2,
    delay: 150,
    duration: 850,
    easing: 'easeInOutExpo',
  },
  loop: true,
  direction: 'alternate'
});

anime({

targets: 'div',

translateX: '13rem',

rotate: {

value: 180,

duration: 1500,

easing: 'easeInOutQuad'

scale: {

value: 2,

delay: 150,

duration: 850,

easing: 'easeInOutExpo',

loop: true,

direction: 'alternate'

});

[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ

ScrollTrigger

ScrollTriggerの使い方

Step 1: 外部スクリプトとJavaScript

Step 2: HTML

Step 3: アニメーションの設定

Scrollbear

Scrollbearの使い方

Step 1: JavaScript

Step 2: HTML

Barba.js

Barba.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

Isometric Grids

Isometric Gridsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

Multiple.js

Multiple.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

anime.js

anime.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: アニメーションの設定

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Category

Blog Info

[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ

ScrollTrigger

ScrollTriggerの使い方

Step 1: 外部スクリプトとJavaScript

Step 2: HTML

Step 3: アニメーションの設定

Scrollbear

Scrollbearの使い方

Step 1: JavaScript

Step 2: HTML

Barba.js

Barba.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

Isometric Grids

Isometric Gridsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

Multiple.js

Multiple.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: JavaScript

anime.js

anime.jsの使い方

Step 1: 外部ファイル

Step 2: HTML

Step 3: アニメーションの設定

Related Posts

Sponsors

Recnet Entry

Pickup Entry

Recommend

Category

Blog Info