ページ間をスムーズに遷移させるためのLookForward.jsをリリースしました

OSS

ページ間をスムーズに遷移させるためのJavaScriptは数多く配布されていますが、使い方が複雑だったりHTMLの構造上の縛りがあるものが多く、気軽に使えるライブラリはあまり多くありません。そこで、a要素に対してクラスを振るだけでスムーズにページ間遷移をするJavaScriptを今回作成しました。

https://appleple.github.io/lookforward/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。

  1. デモ
  2. 特徴
  3. 使い方
  4. アニメーションの指定
  5. イベント
  6. SCSSのカスタマイズ
  7. ダウンロード
  8. リンク

デモ

まずは、どのようなものなのか体験してみたください。
下のリンクをクリックするとスムーズにページ遷移します。

slideright slideleft slidedown slideup scaleup scaledown

特徴

  • HistoryAPIを使ったスムーズなページ遷移
  • コンテンツのロード時にローディングエフェクトを表示
  • ページを開いたとき・閉じたときのイベントリスナーを用意

使い方

CSS及びJavaScriptの読み込み

<link rel="stylesheet" href="./css/lookforward.min.css">
<script src="./js/lookforward.min.js"></script>

CDNを使った読み込み

<link rel="stylesheet" href="https://unpkg.com/lookforward@0.1.1/css/lookforward.min.css">
<script src="https://unpkg.com/lookforward@0.1.1/js/lookforward.min.js"></script>

HTMLの記述

<a href="./a.html" class="js-lookforward" data-transition-enter="slideup" data-transition-leave="slidedown">Label</a>

JavaScriptの記述

window.addEventListener('DOMContentLoaded',function(){
   new LookForward(".js-lookforward");
});

アニメーションの指定

またLookForward.jsでは以下のようにa要素にdata-transition-enter属性及びdata-transition-leave属性にアニメーションの種類を指定することができます。

<a href="./a.html" class="js-lookforward" data-transition-enter="slideup" data-transition-leave="slidedown">Label</a>

data-transition-enter属性にはリンクがクリックされてページ遷移する際のアニメーションを指定します。data-transition-leave属性にはページ遷移先で、前のページに戻る際のアニメーションを指定します。
data-transition-leave属性に値が設定されていないと、デフォルトでは、data-transition-enter属性で指定されたアニメーションと逆の動きをします。
以下がLookForward.jsで用意されているアニメーションです。

#アニメーション,#data-transition-enter, #data-transition-leave
slideleft,右から左に要素が出現します, 右から左に要素が消えていきます
slideright,左から右に要素が出現します, 左から右に要素が消えていきます
slideup,下から上に要素が出現します, 下から上に要素が消えていきます
slidedown, 上から下に要素が出現します, 上から下に要素が消えていきます
scaleup, 拡大しながら要素が出現します, 拡大しながら要素が消えていきます
scaledown, 縮小しながら要素が出現します, 縮小しながら要素が消えていきます

イベント

また、LookForward.js ではページが開いたときや閉じたときに関数を実行するためのイベントリスナーが用意されています。

var lookforward = new LookForward('.js-lookforward');
lookforward.on('open',function(e){
  console.log('open');
});
lookforward.on('close',function(e){
  console.log('close');
});
lookforward.on('closeAll',function(e){
  console.log('closeAll');
});

SCSSのカスタマイズ

$animation-speed,次の画像に遷移する際のアニメーションのスピード,デフォルト：0.3s
$animation-function,アニメーションのイージング,デフォルト：ease-out

ダウンロード

ダウンロードはこちらから行えます。

ダウンロード

もしくは、npm、yarnを使ったインストールが可能です。

npm install lookforward --save
yarn add lookforward

npmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。

const LookForward = require('lookforward');

Babelをお使いの方はimportもご利用いただけます。

import LookForward from 'lookforward';

リンク

appleple.github.io/lookforward

github.com/appleple/lookforward

シェアする

関連記事

カテゴリー

タグクラウド

ブログ内検索

関連記事

Webにまつわる お困りごとをご相談ください。

こんなお手伝いができます

Webコンサルタントとしてのお手伝い／UIデザインのご相談／デジタルメディアの総合プロデュース／パンフレット・DMなどのDTP、ロゴ制作などのビジュアルデザイン

お問い合わせ

資料ダウンロード

何について知りたいですか？