スクロール要素にプログレスバーを付けられるjQueryプラグイン「PrognRol... 次の記事 ≫：CSS3のグラデーションで背景アニメーションできるjQueryプラグイン「Grad...
テーブルをサクッとレスポンシブ対応にする「resTables」:phpspot開発日誌
スクロール要素にプログレスバーを付けられるjQueryプラグイン「PrognRol... 次の記事 ≫：CSS3のグラデーションで背景アニメーションできるjQueryプラグイン「Grad...
jQuery File Uploadを利用した大容量ファイルのアップロードをChunked uploadで実現する - KayaMemo
大容量のファイルをアップする際に、通常のinput type=fileで送ろうとすると herokuだとタイムアウトになったりして上手くいかなかった。 なので、jQueryのファイルアップロードプラグインにある、chunk uploadを利用してアップした。 ・Github blueimp/jQuery-File-Upload 公式のjQuery File Uploadのデモは以下。 https://blueimp.github.io/jQuery-File-Upload/ セットアップの流れは以下を参考に。 https://github.com/blueimp/jQuery-File-Upload/wiki/Setup 通常のアップロード 以下から最新バージョンをダウンロード。 https://github.com/blueimp/jQuery-File-Upload/releases
bxSliderでポーズ設定をスライド毎に変更する方法 - NxWorld
<ul id="slider"> <li><img src="slide01.jpg"></li> <li><img src="slide02.jpg"></li> <li><img src="slide03.jpg"></li> <li><img src="slide04.jpg"></li> <li><img src="slide05.jpg"></li> </ul> 次にjQueryの指定で、bxSliderを単純に呼び出すだけでなく下記のような形で呼び出します。 オプションがいくつか設定してありますが、その中で重要なのはpause, startSlide, onSlideAfterになるので、その他のautoやpagerといったものは実装したい内容に合わせて変更して問題ないです。 $(function() { var slider = $('#slider').bxSlider()
bxSliderが止まることの考察 - ブログ
スライダーは狭いスペースで多くのイメージを訴求できるので大変便利で、わたしはし後のアイキャッチとして使用することが多いです。 多くのスライダーが無償で提供されていますが、bxSliderはレスポンシブデザインでも使える有名なスライダーのうちのひとつですね！ 今回は「bxSliderが止まる」ことに関して調べたことや考察を書いてみます。 そもそもスライダーは「写真集などじっくり見せたいイメージをずらっとページに並べるのではなくコンパクトに見せたい」というニーズから生まれており、デフォルトは手動でページをめくっていくものなので、コントロールやページャーがついているのですね！しかしアイキャッチ的に使いたい場合、停止されるのはちょっと困りものです。 bxSlider http://bxslider.com/ はこちらからダウンロードできます。 設置については、それをご紹介されているブログがたくさん
画像がちゃんと読み込まれたら実行 を実現する ImagesLoaded ！ | ARAKAZE NOTE
ImagesLoaded アニメーションを多様するようなWebページを作っていると「画像が読み込まれるのが遅くてうまくいかない！」、「画像がちゃんと読み込まれてから関数を実行させたい！」といった場面にぶち当たることが出て来きます。 そんなときに便利なのが「ImagesLoaded」！非常に簡単な記述で、要望を満たしてくれます。 必要なもの 公式ページがあるのでそちらから必要ファイルをダウンロードしてきます。 １つしかありません！ <script src="js/imagesloaded.pkgd.min.js" type="text/javascript"></script> 使い方 使い方も至極単純です。通常のJSで使う場合のほかに、jQueryなどの書き方もあります。 //通常の書き方 imagesLoaded( '#container', function() {/*実行させたい処理
レスポンシブなタイル状レイアウトを実現できる「jquery-mosaic」:phpspot開発日誌
GitHub - tin-cat/jquery-mosaic: A free plugin for jQuery to build responsive mosaics of images or any other content fitted to match heights in multiple rows while maintaining aspect ratios. レスポンシブなタイル状レイアウトを実現できる「jquery-mosaic」 タイル状レイアウトを実装するものもレスポンシブ対応できないものもありますが、こちらは対応可能で安心して使えそうです 関連エントリ JS＆CSS3でWindowsMetroのタイルUIを実装する「TileJS」
【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。
株式会社オンズ 開発ブログ 【jQuery】［Masonry］の表示の不具合を解消するために［imagesLoaded］を併用する方法。 ［jQuery Masonry］を使う際、Webkit系のブラウザ（Safari、Chrome）によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。 巷のブログでは、その不具合を解決するために「<img>要素に［width］［height］属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。 しかし実際には、その方法では問題を解決しきれません。 そこでお勧めするのは、同じjQueryプラグインの［imagesLoaded］を併用するワザです。 ［imagesLoaded］を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。 この特性を利用し
Web制作でよく使うjQueryプラグイン4選。 | ネクストページブログ
こんにちは。デザイナーのこばやし氏に影響されてすみっコぐらしにハマってしまったアンドレです（ちなみにねこ推し）。 さて、前回はjQueryのメソッドについてお話ししましたが、今回はweb制作でよくお世話になっている、jQueryのプラグインを4つご紹介します。 スライドショー slick 以前はbxSliderをよく使っていましたが、最近はslickを使っています。 変えた理由は大きくは2つです。 1つはbxSliderの場合、1ページ中に複数のスライダーを設置すると、bxSliderオブジェクトの挙動が変化し、制御しづらいことです。 もう1つは、よりレスポンシブに強いことです（responsiveオプションにbreakpoint等を含むオブジェクトを渡してやることで簡単に制御できます）。 Tips スライド化される際にdivやbutton要素が挿入されるため、各画像をul>liでマークア
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
ページの隅に隠せるコンテンツ実装「jquery.tabSlideOut.js」:phpspot開発日誌
GitHub - hawk-ip/jquery.tabSlideOut.js: jQuery plugin to create a side/top/bottom tab that slides out to show a feedback form, contact form, notepad etc. ページの隅に隠せるコンテンツ実装「jquery.tabSlideOut.js」 次のように通常はページサイドにしおりのように表示させておいてタップやホバーでコンテンツを表示する、という仕組みの実装が出来ます。 上下左右好きな位置に配置が出来ます 関連エントリ どこかで見たようなモーダルダイアログの実装「draggable-google-modal」 Bootstrapのモーダルダイアログを通知風にページサイドからスライド表示させる「notiModal」
Reframe.js - iframeを自動リサイズするJavaScript MOONGIFT
iframeを使ってWebサイトのコンテンツを埋め込めるサービスが増えています。特に多いのがYouTubeやVimeoなどの動画共有サイトです。埋め込むのは簡単なのですが、厄介なのはコンテンツがレスポンシブでないことです。 ブログなどをスマートフォンで表示すると動画の分だけ表示がはみ出てしまいます。そんな状態を改善するのがReframe.jsです。 Reframe.jsの使い方 Reframe.jsを実行するのは簡単です。以下のコードだけで使えます。 reframe('selector'); デスクトップサイズの場合。 幅を縮めても問題ありません。 Reframe.jsの特徴としては外部のJavaScriptライブラリに非依存ということでしょう。特にブログなどで活躍するのではないでしょうか。またハイブリッドアプリでも使えそうです。 Reframe.jsはJavaScript製のオープンソー
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」 - かちびと.net
placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生成にはcanvasを使っているようですので利用には対応したブラウザが必要になります。CDNも用意されていますのでお試しになってみては如何でしょうか。ライセンスはMITです。 placeholder.jsCDN
テキスト表示域をレスポンシブ化する「AdaptText.js」:phpspot開発日誌
GitHub - luruke/adapttext.js: - AdaptText.js is a dependency free and simple javascript solution capable to fit your text inside the parent element テキスト表示域をレスポンシブ化する「AdaptText.js」 レスポンシブ対応できるものは当たり前のようになってきましたが、こちらは、テキストが指定の範囲に収まるようにテキストのサイズを調整してくれる物になります。 例えレスポンシブ対応でもテキストが長ければガタガタに崩れてしまうところ、テキストが長くなってもレイアウト崩れを防ぐ事ができます。 関連エントリ レスポンシブに動作するメガメニュー実装「megamenu.js」 レスポンシブなフルスクリーンメニュー実装「hotmenu」 レスポンシブなス
ページ間をまるでJSで遷移しているように滑らかにアプリっぽく切り替える「Barba.js」:phpspot開発日誌
Barba.js ページ間をまるでJSで遷移しているように滑らかにアプリっぽく切り替える「Barba.js」 アニメーションを使ってページの切り替えが行われますが、チラツキなどはなくURLもちゃんと変わって遷移していることが分かります。 WEBページをアプリ風にしてアプリと遜色の無いものにかえていくようなニーズは今後も増えそうですが、こうしたものを参考に自分なりに作れるとよさそうですね 関連エントリ ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」
awe.js - AR向けjQueryとも言うべきフレームワーク MOONGIFT
AR（拡張現実）を実現しようと思うと非常に面倒なイメージがあります。カメラの映像を取り込んでマーカーを認識したり、位置情報を使ったり、加速度センサーで向きを取ったりしなければなりません。 実はそれらの機能はすべてスマートフォンに入っていると言えます。そしてawe.jsを使えばjQueryのように容易にARアプリが作れるようになります。 awe.jsの使い方 現在は使えるブラウザが限られます。Firefox for Androidであれば対応しています。まずは位置情報系のAR。 マーカー系も使えます。 awe.jsではこの他、Oculus Riftと組み合わせたり、Google GlassやLeap Motion向けにも作ることができます。Webブラウザ上でARアプリを作ってみたい方はawe.jsを使うと良いでしょう。 awe.jsはJavaScript製のオープンソース・ソフトウェア（MI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「stripe.com」のようなモダンで美しいレスポンシブなナビゲーション実装サンプル:phpspot開発日誌
Account Suspended
Image Captions/Masonry.js
複数のハンドルで範囲指定などに使えるHTML5スライダー実装「Multirange」:phpspot開発日誌
実用的なレスポンシブナビゲーションを実装できる「okayNav」:phpspot開発日誌