[JS]スマホやタブレット向けの操作を楽しくするさまざまなアニメーションを実装できるスクリプト -Impulse

サイト構築 -JavaScript

Post on:2014年9月2日

Impulseのデモ

デモはデスクトップブラウザでも楽しめます。

デモページ

まずは、折り紙のようにスライドさせるアニメーション。

Oridomi Cover

上部のハンバーガーアイコンをタップすると、スライドで表示されるメニュー。

Pulldown Menu

ちょっとドラッグするだけで気持ちよくスクロールする慣性スクロール。

Inertia Scroll
※アニメーションGIFにしたらサイズがすごかったので静止画像です。

スクロールに追従するようにエレメントが表示されるバウンシースクロール。

Bouncy Scrolling
※アニメーションGIFにしたらサイズがすごかったので静止画像です。

デモページには他にもたくさんのデモがあります。

Impulseの使い方

実装は各デモによってHTMLやJavaScriptが異なるので、「Pulldown Menu」で実装方法を紹介します。

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。
ここは全デモ共通です。

<head>
  ...
  <script src="/scripts/impulse.js"></script>
</head>

Step 2: HTML

ヘッダ、メニュー、コンテンツをそれぞれdiv要素で実装します。

<body>
  <div class="nav-header">
    <div class="hamburger-menu-handle"></div>
  </div>
  <div class="pull-down-menu">
    <div class="links">
       <a href="#">link</a>
       <a href="#">link</a>
       <a href="#">link</a>
    </div>
  </div>

  <div class="content"></div>
</body>

Step 3: JavaScript

スクリプトで各エレメントを定義し、エフェクトのタイミングやアニメーションを設定します。

var Physics = require('impulse')
var menuEl = document.querySelector('.pull-down-menu')
var handleEls = document.querySelectorAll('.nav-header, .close-handle')
var isOpen = false
var boundry = new Physics.Boundry({ top: 0, bottom: window.innerHeight, left: 0, right: 0 })

var menu = new Physics(menuEl)
  .style('translateY', function(x, y) { return y + 'px' })

var drag = menu.drag({ handle: handleEls, boundry: boundry, direction: 'vertical' })

function end() {
  if(this.moved()) {
    isOpen = menu.direction('down')
  } else {
    isOpen = !isOpen
    if(isOpen) {
      menu.velocity(0, 2000)
    }
  }

  if(isOpen) {
    menuEl.classList.add('open')
    menu.accelerate({ acceleration: 1500, bounceAcceleration: 4000, bounce: this.moved() })
      .to(0, boundry.bottom).start()
  } else {
    menuEl.classList.remove('open')
    menu.spring({ tension: 100, damping: 15 })
      .to(0, boundry.top).start()
  }
}

drag.on('end', end)