barba.js v2の非同期遷移に憧れがありました。
chatgptさんのお力をかりつつ、なんとかできたので備忘録として置いておこうと思います。
超初心者的なものだと思いますので、スルッと読み飛ばしてくださいな。
wordpress上で使用しています。
アナリティクスや、metaタグなどは、実装していません。
実装コード
function.phpで各ファイル読み込み
function add_files() {
wp_deregister_script( 'jquery' ); // 既に登録されているjQueryを解除する。
// jquery
wp_enqueue_script('jquery-js', 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), NULL, false);
// gsap
wp_enqueue_script('gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js', array(), NULL, false);
// barba.js cdn本体を読み込む
wp_enqueue_script('barba-js', 'https://unpkg.com/@barba/core@2.9.7/dist/barba.umd.js','array(jquery-js)', NULL, false);
// カスタムのjsを読み込む
wp_enqueue_script('barba-custom',get_template_directory_uri() . '/src/js/barba-custom.js','array(barba-js)','',true);
// カスタムのjsを読み込む
wp_enqueue_script('main-js',get_template_directory_uri() . '/src/js/main.js','array(barba-custom)','',true);
}
add_action('wp_enqueue_scripts', 'add_files');
barba-custom.jsでページ遷移指定の設定
// 指定した時間待機する Promise を返す関数
function delay(n) {
n = n || 1000;
return new Promise((done) => {
setTimeout(() => {
done();
}, n);
});
}
// ページ遷移時に実行されるアニメーションを定義する関数
function pageTransition() {
var tl = gsap.timeline();
tl.to(".loading-screen", {
duration: 0.6,
opacity: 1,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
});
tl.to(".loading-screen", {
duration: 0.6,
width: "100%",
left: "0%",
ease: "Expo.easeInOut",
delay: 0.6,
opacity: 0,
});
}
// wordpress使用時、カスタム投稿の記事に自動的にtarget="_blank"が発生したので、削除
function removeTarget() {
const links = document.getElementsByTagName('a');
for (let i = 0; i < links.length; i++) {
if (links[i].hasAttribute('target') && links[i].getAttribute('target') === '_blank') {
links[i].removeAttribute('target');
}
}
}
// Barba.jsの初期化とアニメーションの設定
$(function () {
barba.init({
sync: true, //ページ遷移が同期的に実行されるようにするオプション
transitions: [
{
async leave(data) {
// ページ遷移前に実行されるフック関数
const done = this.async();
pageTransition(); // アニメーションを実行
await delay(1000); // 1秒待機する
done(); // ページ遷移を実行
},
async enter(data) {
// ページ読み込み後に実行されるフック関数
},
async once(data) {
// 初回ページ読み込み時に実行されるフック関数
pageTransition(); // アニメーションを実行
},
},
],
prevent: function (e) {
// Barba.jsのリンクとして実行させたくない場合の処理
// ページ上のWordpressの管理画面へのリンクは発火させない
if (e.el.classList.contains('ab-item')) {
return true;
}
}
});
});
// ページ遷移後にページトップから開始
barba.hooks.after((data) => {
window.scrollTo(0, 0);
});
// ページ遷移前に実行されるフック関数
barba.hooks.beforeEnter(() => {
const script = document.createElement('script');
script.src = 'http://localhost:10094/wp-content/themes/portfoilio2023/src/js/main.js';
document.body.appendChild(script);
removeTarget();
});
-遷移用のhtmlにloading-screenをつけて色々しています。
– functions.php に enqueue で、諸々のjsは読み込ませています。
以下解説
このコードは、
このスクリプトで、delay()関数は指定した時間待機する Promise を返す関数であり、引数にミリ秒単位で待機する時間を指定できます。pageTransition()関数は、ページ遷移時に実行されるアニメーションを定義する関数であり、GSAPライブラリを使用してローディング画面が表示され、消えるアニメーションを定義しています。
$(function () { ... }); はjQueryを使用してドキュメントがロードされるまで待ち、その後にBarba.jsの初期化を行います。
barba.init() メソッドは、Barba.jsライブラリを初期化し、いくつかのオプションを設定します。上記の例では、シンクオプションとTransitionsオブジェクトを設定しています。
sync: true オプションは、トランジションの開始と終了が同期されていることを示します。これは、新しいページの読み込みが完了する前に古いページから遷移することを防ぐために重要です。
次に、トランジションオブジェクトが定義されています。この例では、3つの異なるフック（leave、enter、once）を持つ1つのトランジションが定義されています。
async leave(data) { ... } の部分は、現在のページから次のページへの遷移中に発生するアニメーションを定義するための空間です。この例では、 pageTransition() 関数を呼び出して、ページ遷移中にアニメーションを実行するように指示しています。await delay(1000) は、1秒間の遅延を加えてアニメーションを途切れさせるためのものです。
async enter(data) { ... } の部分は、新しいページが表示される際のアニメーションを定義するための場所です。
async once(data) { ... } の部分は、トランジション内で1回だけ呼び出される関数を定義するための場所です。新しいページの読み込みとともに発生します。
以上がBarba.jsのTransitionsオブジェクトの例です。必要に応じて、async leave、async enter、および async once をカスタマイズして、ウェブサイトに最適なトランジションを作成してください。
barba.hooks.beforeEnter
Barba.jsを使用してウェブサイトのページトランジションを実装する場合、次のトランジションが開始する直前にこのフックがトリガーされます。barba.hooks.beforeEnter()では、新しいJSファイルを生成し、HTMLのbody要素に追加することで、動的にJSファイルを読み込んでいます。この関数はページ遷移前に実行されるフック関数です。
追記
①固定ページ内で、カスタム投稿のループを回し、<a href=”<?php the_permalink();?>”>で記事へのリンクを取得していたところ、<target =”_blank”>が自動的に発生してしまう問題が発生。
JSでaタグのtarget=”_blank”を削除するコードを追記
function removeTarget() {
const links = document.getElementsByTagName('a');
for (let i = 0; i < links.length; i++) {
if (links[i].hasAttribute('target') && links[i].getAttribute('target') === '_blank') {
links[i].removeAttribute('target');
}
}
}