barba.js - スムーズなページ遷移を実現 MOONGIFT
Webページを素早く表示したいというニーズは強くあります。AMPのような技術しかり、PWAのCache APIもそうです。遅くて良いことなどありません。とにかくWebページは高速に表示すべきです。そしてそのためのライブラリも多数あります。 今回紹介するbarba.jsは高速、かつスムーズなページ遷移を可能にするライブラリです。 barba.jsの使い方 利用例です。ページが切り替わる際に真っ白な表示になることがありません。 barba.jsはプリフェッチを使ってリンク先のコンテンツを読み取り、現在のページと差し替えることでスムーズな表示を実現します。類似の技術はフレームワークで実現されていることが多いですが、任意のWebサイトに組み込める点においてbarba.jsの需要は多そうです。 barba.jsはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 b
[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ
縦長ページのスクロール エフェクトで再スクロールや上にスクロールする時にも適用したい、高さ指定のない画像を読み込む時にスクロールバーががっくんがっくんするのを避けたい、美しいレイアウトを簡単に実装したい、そんな便利でちょっとずるいスクリプトを紹介します。 ScrollTrigger ScrollTriggerの使い方 Scrollbear Scrollbearの使い方 Barba.js Barba.jsの使い方 Isometric Grids Isometric Gridsの使い方 Multiple.js Multiple.jsの使い方 anime.js anime.jsの使い方 ScrollTrigger ユーザーがスクロールすると、要素にアニメーションが適用されるスクリプトはいくつかありますが、その多くは一度アニメーションが適用されると再び適用されません。下にスクロールしてアニメーショ
![[JS]これを使うだけでWebサイトのインタラクションやレイアウトがかなりよくなる、便利でちょっとずるいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/28da41636539dd792d07680b0ac53af6ec4dba84/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201603%2F2016071113.png)
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
GIF画像・アニメーションを最適化してサイズを削減する「GIFmicro」
GIF画像・GIFアニメーションを最適化してファイルサイズを縮小し、トラフィック量の削減に貢献してくれるソフトが「GIFmicro」です。動画から簡単に好きなサイズや長さのGIFアニメを作れる「Movie To GIF」を使えばいろいろなGIFアニメーションを誰でも簡単に作れますが、できたGIFアニメーションをこのGIFmicroで最適化すれば、よりファイルサイズが小さい状態で人に見せることができます。 GIFmicro | GIFファイル最適化アプリ | Romeolight http://www.romeolight.com/ja/products/gifmicro/ ◆ダウンロードからインストールまで 上記ページの中ほど、右カラム「Download」の下にある「Download Now」をクリック。 ダウンロードした「GIFmicroSetup.exe」を実行します。 「実行」をクリ
重いGIFアニメを軽いムービーに変換してファイルを10分の1以下に圧縮して埋め込みもできる「Gfycat」
ファイルが巨大化してしまったGIFアニメファイルや、URLを指定したYouTubeの動画を軽量なwebm形式のムービーに変換してくれるサービスが「Gfycat」です。このサービスを使うと簡単にファイル形式の変換ができるほか、サイトやブログに埋め込むためのURLを取得することもできるようになります。 Gfycat - jiffier gifs http://www.gfycat.com/ ファイル変換を行うためには、まずページ右上にある「Upload」をクリック。 すると、ファイル選択用のダイアログが表示されます。「From Computer」タブにファイルを直接ドラッグ&ドロップするか、「browse」をクリックしてファイルを選択すればOKです。 または、「From URL」タブを選択し、YouTubeなどのURLをペーストして「Fetch」をクリックすることでも変換を開始することが可能で
アニメーションを高速化する「Velocity.js」を使ってみた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今更ですが、jQueryのプラグインでアニメーションを高速化してくれる「Velocity.js」を使ってみました。 今回は、簡単な使い方をまとめたのでご紹介したいと思います。 まずは準備から http://julian.com/research/velocity/ 上記の公式ページにjQueryやtransitとのアニメーションの比較をできるデモがありますが、他よりかなり軽快に動くようです。モバイル対応もいい感じらしいですよ。 使うときは、ソースをとってくるか、用意されているCDNなどからVelocity.jsを読み込みます。 <!-- 今回はjQueryも読み込む --> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <!-- CDNから読み込んでみる --> <script s
GIFファイルを自動的にMP4に変換し高速ロード可能なImgur新機能「Project GIFV」
画像共有サイトの「Imgur」がアップロードされたアニメーションGIFファイルをgifv形式というMP4ムービーに変換する「Project GIFV」を開始しました。gifv形式のMP4ムービーはアニメーションGIFファイルよりもファイルサイズが劇的に小さいので、ウェブサイトやブログに埋め込むと、ロードが従来よりかなり早くなります。 Introducing GIFV – Imgur Blog http://imgur.com/blog/2014/10/09/introducing-gifv/ ImgurにアップロードされたGIFファイルは自動的にgifv形式のMP4ムービーに変換されますが、gifv形式のファイルをHTML5でサイトやブログに埋め込んだ際の見た目はGIFファイルと全く同じ。しかも、ファイルサイズがGIFファイルよりも少なくなるため、ロードがかなり早くなります。 ということで
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
[JS]jQuery無し、アニメーションを使ったスライダーを簡単に実装できる軽量スクリプト -slidr.js
コントローラーとパンくず slidr.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 ... <script type="text/javascript" src="/path/to/slidr.min.js"></script> </body> Step 2: HTML 各パネルはinline, inline-block, blockのどの要素を使用しても構いません。ラッパーにidを付与するのを忘れずに。 <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut</li> </ul> <div id="s
jQuery slimMenu - A lightweight responsive and multi-level navigation menu plugin.
slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly. With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)! Features: Multi-level nested menus. 100% mobile responsive men
[JS]後発だけに高性能で、実装はシンプルで超軽量のツールチップのスクリプト -jQuery PowerTip
jQuery PowerTip jQuery PowerTip -GitHub jQuery PowerTipの特徴 jQuery PowerTipのデモ jQuery PowerTipの使い方 jQuery PowerTipの特徴 実装が簡単。 シンプルな構造。 ツールチップはカーソルに追従とスタティックに表示の2種類をサポート。 ツールチップの追従するエリアは設定可能。 カスタマイズも簡単。 キーボードナビゲーションにも対応。 表示のアニメーションは、スムーズなフェードインとフェードアウト。 ツールチップは複数設置可。 あらゆる要素にツールチップを表示可能。 ビヘイビアやイベントをもった複雑なコンテンツにも対応。 6KBと超軽量。 jQuery PowerTipのデモ デモは、ベーシックな3種類が用意されています。 Demo: 左のエリアをホバーすると東にツールチップを表示し、ツールチ
ページ遷移不要の、シンプルなWebサイトを作るための軽量jQueryプラグイン・Pagify - かちびと.net
よく見かける、ページ遷移のない Webサイトを作る為のjQueryプラ グイン。ですが、高機能な物では なく、極めてシンプルで、ライブ ラリも軽量です。サクッと作りた い時のテンプレにもいいかも。 僕の語彙の無い説明よりサンプル見た方が早そうですね。 ※漢字も間違ってたので修正しました ページ遷移不要で、内容を書き換えた際もフラグメントURLにしてくれます。以下サンプル。 Sample コード <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7'></script> <script src="pagify.js" type="text/javascript"></script> jQuery本体とプラグインを読み込みます。 $(
背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH
同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。 IE7でもOK。6だとfixedが効かないので、ちょっとアレです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script>
[JS]通知パネルをアニメーションで表示する超軽量のスクリプト -Humane JS
jQueryなど他のスクリプトに依存せずに動作する、アニメーションで表示する通知パネルを実装するスクリプトを紹介します。 Humane JS デモページ [ad#ad-2] 上記デモの「Welcome Back」の通知パネルは、下記のスクリプトで実装されています。 JavaScript humane("Welcome Back"); 通知パネル内のテキストにはHTMLも使用可能で、スタイルシートを利用することも可能です。 JavaScript humane("<p style='color:red'>Invalid Username and/or Password</p>"); [ad#ad-2] スクリプトのオプション スクリプトのオプションでは下記を設定できます。 通知パネルの表示時間 表示時間終了後、マウス・キーボード操作があるまで表示 新しい通知パネルがすぐに表示されるかどうか 対
[JS]タブの機能性のみを追求したフレキシブルな超軽量スクリプト -EasyTabs
スムーズなアニメーションでタブを切り替え、各タブコンテンツの#リンクにも対応した、タブの機能性のみを追求したjQueryのプラグインを紹介します。 JQuery EasyTabs Plugin デモページ：同じページに複数のタブを設置 [ad#ad-2] EasyTabsの主な特徴 タブの切り替え時にはスムーズなアニメーションが可能 外観はCSSで簡単にカスタマイズ可能 ブラウザのバックボタンとフォワードボタンに対応 各タブは#リンクが有効でブックマークが可能（SEOにフレンドリー） タブは指定された時間で自動切り替え可能 グローバル変数の使用はしていません ページ内に複数のタブコンテンツを設置可能 valid HTML Markup 超軽量（5KB） オープンソース（MIT and GPL licenses） タブのスタイリングはCSSでもJavaScriptでも可能 AJAXコンテンツ
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
パネルをフェードのエフェクトで表示するスライドショーの超軽量スクリプト -TinyFader
jQueryなど他のスクリプトに依存せずに動作する、パネルをフェードのエフェクトで表示するスライドショーの超軽量（1.4KB）スクリプトを紹介します。 Fading JavaScript Slideshow – TinyFader デモページ [ad#ad-2] スライドショーはリスト要素で実装されており、パネル内にはリスト要素内に配置できるものであれば、どんなコンテンツでもサポートします。 パネル「1」は、見出しとパラグラフとリンクのコンテンツ スクリプトのオプションでは、オート表示の時間、スライドショー本体やページネーションのクラス名、アクティブ時のクラス名、ポジションなどを設定できます。 var slideshow=new TINY.slider.slide('slideshow',{ id:'slides', // ID of the parent slideshow unorde
GPUの性能をフル活用したエフェクトが美しいフリーの画像ビューア「SuperSlide」
Windows環境で動作するスライドショービューア「SuperSlide」はスライドの切り替わりに「GPU」の性能をフル活用を用いた美しいエフェクトが堪能できます。ハードウェアアクセラレーションを用いているため、画像の拡大縮小や回転が非常にスムーズに行えます。 また、バックグラウンドで画像を先読みすることによって次の画像の表示を素早く行う機能、画像を見ながらあらかじめ指定したフォルダへコピーや移動が可能、実行ファイルのみで起動可能で他のファイルは不要、キーボードでほとんどの操作が可能であるなどシンプルながらもしっかりとした作りになっています。 詳細は以下から。 実際のスライドショー表示やぬるぬる動く拡大縮小回転の表示などのデモ動画はこちら。 YouTube - 「SuperSlide」でのスライドショー表示 YouTube - 「SuperSlide」での画像の回転拡大縮小 SUPERSL
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://portbox.joeynavarro.com/
GitHub & BitBucket HTML Preview