ブログ - JavaScript

ページ間をスムーズに遷移させるための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-enterdata-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



お電話でのお問い合せはこちら(10時〜19時)

052-485-8577