https://oswdiary.net/archives/4865
barba.jsをWordpressで導入してみた。非同期画面遷移で体感速度アップ | 沖縄移住ライフハック
非同期に画面遷移をおこなえるようにするjs。 どんなものかは、公式のデモを見てください。すぐわかります。 Barba.js Demos Circles Demo いいですよね。 読み込み時パッと白くなるような野暮なインタラクションがなくなり、スムーズに画面が遷移していますね。URLのとこもちゃんと変わってるからブログみたいなページものサイトでも使えるし。 オサレやーん Barba.jsをWordpressに導入というわけで本番たたき台でもある、私の個人Wordpressブログ（みなみのひげブログってのが昔あった）で試しました。 参考にしたのはこの辺のページ。 Barbaドキュメント翻訳 | Barba – にほんご。Pjax（非同期画面遷移）でシームレスな画面遷移ができるBarba.jsjQueryとBarba.jsでpjax対応サイトを制作する【demo有り】 | oku-log【爆速】
AjaxでWordPressのページをシームレスに遷移させるコードをおおよそ作成した | 日常の生活と仕事を雑記するコーダーのブログ | CattleMute
仕事での備忘録や田舎住まいの生活などの日常を雑記したコーダーのブログ CattleMuteキャトルミュート WordPressのページをAjaxを利用してシームレス（継ぎ目なし）に遷移したいという話があった。 話が出たとき、「ああ、ついにこういう系のやつが来たか」と思ってげんなり。 まぁ自作のURLを処理するフレームワークとかに実装するなら別に大した問題でもない。 が、WordPressみたいに複雑にパラメータを処理してページを表示するタイプのCMSには、自分が預かり知らぬところの表示処理も考慮して実装するのは案外難しかったりする。 とりあえず、無理なら無理でもいいということだったので、それを行うために山積みの問題と格闘してそこそこ時間を取って作成してみた。 まぁ、時間を取った割に、いろいろな制約が重なって残念ながらお蔵入りになったけど。 制約を守って使う分には使えそうなので、掲載しようと
Barba.jsを使って、metaタグを動的に更新する方法 - Qiita
Barba.Dispatcher.on( 'newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) { if ( Barba.HistoryManager.history.length === 1 ) { // ファーストビュー return; // この時に更新は必要ありません } // jquery-pjaxから借りた var $newPageHead = $( '<head />' ).html( $.parseHTML( newPageRawHTML.match( /<head[^>]*>([\s\S.]*)<\/head>/i )[ 0 ], document, true ) ); var headTags = [ // 更新になってほうしいタグ "meta[name='keyw
【爆速】WordPressで始めるpjax入門 - Qiita
AWS+KUSANAGIでWordPressサイトを運用しており、その時点でかなり速かったのですが、さらに高速化するべくpjax(barba.js)を導入しました。 導入後、ページ遷移体感速度が5000兆倍になったので導入方法をシェアします。 barba.jsとは pjax(非同期画面遷移)を使いやすくしたjsライブラリ。 これを使うとページ遷移時にコンテンツ部分のみを読み込むことができ、 まるでネイティブアプリを使っているようなページ遷移を体験できます。 また、animation、prefetch、cache等に対応しています。 デモサイト barba.jsを導入しているサイトのご紹介。 ・Grid Demo（公式） ・Next/Prev Demo（公式） ・Circles Demo（公式） ・Accueil | Effektiv, cabinet de recrutement（非公式）
jQueryとBarba.jsでpjax対応サイトを制作する【demo有り】 | oku-log
ナビ部分は固定されていてコンテンツ部分だけが切り替わっていく。かつurlもきちんと変更されている。 そんなサイトをご覧になったことはありますでしょうか。 今回は『pjax』を使ってそんなサイトを制作する方法をご紹介します。 具体的な要件は以下の通りです。 軽量なプラグイン『Barba.js』を使ってpjax対応をする jQueryを使ってページ遷移時にアニメーション（フェード）をつける ページ遷移時にurlが変更される ナビゲーション部分を固定してコンテンツ部分だけが変わっていく まずは以下のリンクからデモをご覧ください。 jQueryとBarba.jsでpjax対応サイトを実装するdemo ヘッダー（背景が白い部分）は固定されており、リンクをクリックするとコンテンツ部分（背景がグラデーションの部分）のみがフェードで切り替わる。 合わせてurlも変更されていることをご確認いただけましたでし
ページ遷移の表現に特化したjqueryプラグインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
フロントエンドエンジニアのゆたろです。どうもです。 最近、暖房の風で頭がぼーっとしてる毎日を過ごしています。さて、最近はリッチな表現のWebサイトが標準になってきました。コンテンツ以外の表現を求められることもしばしばあります。そんな要件のなか、最近よく聞くページ遷移の表現に特化したプラグインを紹介していきます。 ▼目次 シンプルなフェードで遷移 jquery.fademover.js 変形できたり、Overlayできたり animsition.js カスタマイズ次第でオリジナルの演出 jquery.pjax.js まとめ シンプルなフェードで遷移 jquery.fademover.js http://www.detelu.com/fademover/ jquery.fademover.jsはページ遷移時にフェードイン・フェードアウトをしてくれるプラグインです。プラグイン自体も非常に軽く、実
ページ遷移アニメーションに、高速な読み込み！？名前ほど難しくないPjaxを実装しよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、ライダーです。今年4月、新卒フロントエンドエンジニアとして入社しました。 バイクに乗っていたことを理由に、大学入学時からライダーと呼ばれているのですが、最近バイクを売り払い自転車にジョブチェンジしました。 今後もライダーとしてやっていきます。どうぞよろしくお願いします。 さて、最近はシームレスなページ遷移アニメーションを実装しているサイトがとても多く見られますね。中にはネイティブアプリかよ！ って思わせるくらいのシームレスさのものも。そんなシームレスなアニメーションを可能にするためのひとつの手段に、Pjaxというものがあります。 Pjaxとは まずは概要を把握しましょう！ 簡単にいうと、Pjaxとは、ページを遷移させる手法のひとつです。 通常のページ遷移とは違い、AjaxとHistoryAPIの合わせ技による見せかけのページ遷移です。 実例 百聞は一見に如かず。まずは実例をみ
Pjax（非同期画面遷移）でシームレスな画面遷移ができるBarba.js | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、Designer / EngineerからArt Directorに変わりました奥田です。 肩書きはあまり気にしていないのですが、Art Directorというと指示するだけでデザインしていないみたいなのと、後でTechnical Directorも付け加えるべきだなと思ったのは内緒です。 さて、最近ではページの読み込みにローディングをはさんでいるサイトがよくみられます。 そんな時、非同期でページ遷移すれば必要な箇所だけを読み込み、少ないロード時間でページをシームレスに変更することが出来ます。 そこで今回はPjax（非同期画面遷移）を導入できるBarba.jsをご紹介したいと思います。 Barba.js サイトの中になぜPjaxを使うのか、そのメリットが掲載されていたのでご紹介します。 ページ間の素敵なトランジションを作成して、ユーザーのエクスペリエンスを向上させる可能性があり
WordPressでPjaxの実装後よくあるトラブルの解決方法 - ナオユネット
WordPressでPjaxを実装した後、色々な壁にぶち当たったので、その時の解決方法を紹介していきます。 WordPressでPjaxを実装する 「jquery-pjax」というjQueryプラグインを使います。 GitHub defunkt / jquery-pjax <?php get_header(); ?> <nav id="gnav"> <ul> <li><a href="">nav1</a></li> <li><a href="">nav2</a></li> <li><a href="">nav3</a></li> <li><a href="">nav4</a></li> <li><a href="">nav5</a></li> </ul> </nav> <div id="main_content"> <!-- コンテンツが入れ替わる部分 --> </div> <?php g
簡単！超軽量！プラグインなしでページ遷移時にフェードイン・アウトさせる方法
サイト内の別ページへの切り替え時にフェードイン／フェードアウトなどのエフェクトを施してくれるJavascriptやjQueryプラグインはいくつかあります。 例えば、以下のようなもの。 また、「PJAX」というjQueryプラグインを利用すると、非同期通信でウェブページ内の更新が必要な特定の範囲だけリンク先の別ページの対象コンテンツに置き換えて表示することで、ヘッダーエリアやサイドバー、フッターなどの重複するコンテンツは表示したままにして通信量を減らし、ページ遷移を高速にすることもできます。 さらに、このPJAXを利用してページ遷移効果の実装をより扱いやすくした「Barba.js」という軽量なプラグインもあります。 これらの素敵なプラグインを活用して、新しいインタラクティブなWordPressテーマを作ろうと企画したのですが、開発中のテーマではあらゆる機能やエフェクトのためのスクリプトを読
【爆速】WordPressで始めるpjax入門 - Qiita
AWS+KUSANAGIでWordPressサイトを運用しており、その時点でかなり速かったのですが、さらに高速化するべくpjax(barba.js)を導入しました。 導入後、ページ遷移体感速度が5000兆倍になったので導入方法をシェアします。 barba.jsとは pjax(非同期画面遷移)を使いやすくしたjsライブラリ。 これを使うとページ遷移時にコンテンツ部分のみを読み込むことができ、 まるでネイティブアプリを使っているようなページ遷移を体験できます。 また、animation、prefetch、cache等に対応しています。 デモサイト barba.jsを導入しているサイトのご紹介。 ・Grid Demo（公式） ・Next/Prev Demo（公式） ・Circles Demo（公式） ・Accueil | Effektiv, cabinet de recrutement（非公式）
Barba.js
Create badass, fluid and smooth transition between your website's pages. barba.js is a small (4.4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website's pages. It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user's web experience. This production-ready version is n
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
