タイトルと画面の一部分だけを入れ替えてページ遷移の体感速度をいい感じに上げてくれるpjax。 pjax自体も導入はそこまで難しくはないんですが、「Barba.js」を使ったら簡単すぎてひっくりこけたので導入メモ。このサイトで使っています。160901現在。 luruke/barba.js: Create badass, fluid and smooth transition between your website's pages. 詳しくは Barba.js のリポジトリのリドミを読んでくれという感じなのですが luruke/barba.js: Create badass, fluid and smooth transition between your website's pages. <script src="barba.min.js" type="text/javascript">

Barba.js 今回はPJAXを比較的簡単に実装し、シームレスなページ遷移を実現するjavascriptプラグイン「Barba.js」を紹介します。 ちょっと前まではサポートブラウザの関係でいまいち仕事では使えることが少なかったPJAXですが、IE9以下をほぼ考えなくても良くなってきている昨今ならどんどん使っていけるのではないでしょうか。 というわけで、こちらサポートブラウザはpushStateが使えるモダンブラウザ＆IE10+っぽいです。 用意するもの まずはGitHubからプラグインを手に入れましょう。 いろいろ入っていますが、とりあえず最低限必要なのはbarba.min.jsのみです。 ただ、Barba.jsを作動させたりトランジションを書いたりする用の外部jsも用意しておくといいかもしれませんね。 <script src="barba.min.js" type="text/jav

スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。 jQueryで特定の要素が存在するかどうかを判別する処理【.length】 タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。 要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。 要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。 「.length」を使っての「#sample」が存在した際の処理は以下のようになります。 ◆SCRIPT $(function(){ if($('#sample').length)

一口にテキストエフェクトとは言ってもアニメーションのほうとビジュアルのほうと両方を融合させたものがあります。 ハリウッドのSF映画なら、必ずと言ってもいいくらい、映画の特徴を的確に捉えた超カッコイイテキストエフェクトをかけますよね！僕はトランスフォーマーのタイトルのような、動きも見た目もSFチックなのが好きです。 そういうのをWeb上でもインタラクティブに出来たら最高ですよね？如何せん、映像分野に比べてテキストエフェクト作成を手助けしてくれるツールが泣くほど少なく、制限も多くて自由性に乏しいがゆえに、個性的なテキストエフェクトを実装しようものなら、とてもじゃないがかなり骨が折れちゃう仕事になりそうです。 でも、それも過去の話！ とは言いたいところだが…まだまだ全然映像分野の足元にも及ばないのが現状…　とは言ってもCSS3のおかげで昔よりは随分良くなってきたのも事実。 今回は、手間暇要らずで

仮想DOMとか、react.js とか最近聞くようになりました。フロントエンドに関わるものとして、UIパフォーマンス向上を志すなら、少し触って明日の糧にしようと思っていろいろ調べていたら、そもそもブラウザのレンダリングとは何かもよくわかっていなかったので出直そうと思った、というごくつまらない話です。 ブラウザのレンダリングとは DOMの読み込み、リサイズ、イベント発火で再描画、くらいふわっとわかったフリになっていた。 http://www.yoheim.net/blog.php?q=20140703 下のURLをわかりやすく解説 http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ ごつい http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technolo

【diamonds.js】ダイヤモンドみたいな形のイメージギャラリーを作るjQueryプラグイン diamonds.jsを使えば、ダイヤモンドのような菱形の形をしたイメージギャラリーを実現することができます。他とは違う、ちょっと変わったイメージギャラリーを探している方にオススメかも。ただ残念な事に、ＩＥには対応してい […]

※本ページは、アフィリエイト広告を利用しています。 人気の「配色アイデア手帖」シリーズから、3年8ヵ月ぶりの完全新作の配色本が発売です！ 今回は「色とイラスト」とあるように、イラストや絵を描く人のために作られた配色本。世界観を創り出す配色、感情表現を表す配色、時間帯にマッチした配色、オノマトペに合った配色など、イラストレーターや絵師さんにぴったりの一冊です。 そして今回も特典として収録されているカラーすべてのPhotoshopやクリスタのスウォッチデータがダウンロードできます！ 大切な人へのクリスマスプレゼントとして、自分用のクリスマスプレゼントとしてもぴったりな一冊です！

Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers

facebookのウォールを表示させることができるjQueryプラグインメモ 便利です！ まず、下記のURLにジャンプ http://www.neosmart.de/social-media/facebook-wall/ 下記の情報を入力します。 FacebookID 自分のIDをいれます 　※ユーザーネーム（ユニークURL）設定してないとだめかも… Access Token? ※これは、入力する場所の下にあるリンクをクリックすればOK Show guest entries? ゲストの人が投稿したエントリーも追加します？ Show comments? コメントも表示する？ Max number of comments? どのくらいの投稿を表示する？　※1～10投稿まで選べるよ Time conversion? 何時間ごとに更新しますか？　※12時間か、24時間か選べるよ そして、緑のref

JavaScriptの人気ライブラリ『jQuery』は豊富な機能とクロスブラウザな点がとても良く、私も頻繁に活用しています。 むしろJavaScript開発には欠かせないものとなっています。 そんなjQueryですが、プラグイン開発も盛んで、世界中のエンジニアが様々なプラグインを作成・公開しています。 それも、jQueryはプラグイン開発がとても簡単に出来る事に起因しているのではないでしょうか？ 簡単だからこそ、独自にプラグインを追加する方達の理由としては、 新たな便利な機能を追加する方もいれば、ある程度纏まった処理を汎用的にする為にプラグイン化する方もいるでしょう。 プラグイン開発の理由は人それぞれですが、プラグインの作成方法を知らない事にははじまりません。 今回は、そんな『jQuery』の独自プラグインの作成方法を、分かりやすく4ステップに分けて解説したいと思います。 即時実行の無名関

Webページ上でカーソル位置やクリックされた位置によって ポップアップを出したりモーダル位置を調整したりツールチップを出したり いろいろと処理を加えることがあると思います。 そんな際のページ上のポイント位置の座標（X座標／Y座標）を取得して 位置を調整する処理方法を簡単に紹介してみたいと思います。 jQueryでページ上の座標（X座標／Y座標）を取得する方法【ページ全体の場合】 ページ上のX座標・Y座標を取得するには —————————– X座標 = e.pageX Y座標 = e.pageY —————————– を使って値を取得することができます。 各座標の値を取得するサンプルとして ページ上のクリックされた位置のX座標／Y座標を取得してみると。 ページ上のクリックされたポイントのX座標／Y座標を取得（別枠で表示されます）※別枠で表示される画面内をクリックしてみてください。 クリックさ

以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU