ページ間をスムーズに遷移させるためのLookForward.jsをリリースしました
OSS
ページ間をスムーズに遷移させるためのJavaScriptは数多く配布されていますが、使い方が複雑だったりHTMLの構造上の縛りがあるものが多く、気軽に使えるライブラリはあまり多くありません。そこで、a要素に対してクラスを振るだけでスムーズにページ間遷移をするJavaScriptを今回作成しました。
https://appleple.github.io/lookforward/では、簡単に英語で利用方法が解説されていますが、こちらでは日本語でしっかり解説します。
デモ
まずは、どのようなものなのか体験してみたください。
下のリンクをクリックするとスムーズにページ遷移します。
特徴
- 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 --saveyarn add lookforwardnpmでのインストール後は、BrowserifyやWebpackなどのbundleツールを使ったrequireも可能です。
const LookForward = require('lookforward');Babelをお使いの方はimportもご利用いただけます。
import LookForward from 'lookforward';リンク
appleple.github.io/lookforward
github.com/appleple/lookforward
