no-image

JavaScript

フレキシブルで美しいアニメーションによるファイルアップローダー「FilePond」

FilePondはフレキシブルで楽しいJavaScriptファイルアップローダープラグインです。美しいアニメーションでアップロードも素早いことから、ハイセンスなファイルアップローダーを探している人にはピッタリです。

FilePond

デモ

デモではページ読み込み時にすでにファイルが指定された状態になっています。アップロード領域内の右側にある上矢印ボタンをクリックするとファイルのアップロードが開始されます。

アップロード中はパーセント表示でリアルタイムで進捗状況を確認できるようになっています。アップロードが完了すると全体が緑色になり、「Upload complete」と表示されます。

また、指定したファイルを取り消す場合は右側にあるバツ印をクリックすればOKです。

ファイルの指定はアップロード領域内にドラッグ&ドロップでも指定できるのが便利ですね。

FilePond

no-imageマウスの動作に連動するシャドウエフェクト実装「Jquery Shadow Plugin」前のページ

CSSで実装できるコンパクトで可愛いメニュー「CSS Only Fab Icon Menu」次のページCSS Only Fab Icon Menu

関連記事

  1. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  2. marginotes

    JavaScript

    テキストの余白に注釈をつけて読みやすい記事をつくれる「marginotes」

    marginotesは、クールなマージンノートを作成するjQueryプ…

  3. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

  4. Emergence.js

    JavaScript

    ブラウザで要素の可視性を検出する「Emergence.js」

    Emergence.jsは、ブラウザで要素の可視性を検出することができ…

  5. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  6. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP