iziToast アニメーションするカッコいい通知を実装できる「iziToast」 表示の残り時間がプログレスバーで表示されて自動で消えることが分かって便利です 関連エントリ ブラウザプッシュ通知を簡単に使えるようにするjQueryプラグイン「jquery_push_notification」
BackgroundCheck 背景画像の色を元に上の文字やナビの色を調整できる「BackgroundCheck」 JSによって画像の色味を判定して、文字の色やナビを調整できます。黒い画像に黒いナビ、なとナビが見えなくなってしまいますが、こちらの仕組みを使えばそういったこともなくなりそうです 関連エントリ 背景画像をダイナミックに動かしつつParallax効果を作れる「fullPage.js」 WebGLを使った超リッチな背景イメージ描画「WebGL Scroll Spiral」 背景画像や動画をポップアップする新しいポップアップデザインの実装 CSS3のグラデーションで背景アニメーションできるjQueryプラグイン「Gradientify」
GitHub - opoloo/jquery_upload_preview: This is a small jQuery plugin, which provides a live preview of selected files before they're actually uploaded to the server. 画像や音声ファイルをアップロード前にプレビューできる「jquery_upload_preview」 アップロードした後に「間違った!」と思っても後の祭りですが、事前に確認できるようにしておくと親切かもしれません。 関連エントリ ファイルアップロードのボタンをBootstrapにできる「Bootstrap File Input styler」
STIMED.jsは一定の時間経過等、時間でCSSを制御するスクリプトです。jQueryに依存します。指定方法は以下のような感じ。 stimed.style.create([ {target:'body', time:'00:00', property:'background-color', value:'#fff'}, {target:'body', time:'18:00', property:'background-color', value:'#000'}, {target:'body', time:'24:00', property:'background-color', value:'#fff'} ]); 昼と夜でコントラストを変えたり、要素の色を変えたり、画像を変えたり、要素を動かしたり、とアイデアは豊富です。transition-delay等じゃサポートしきれない仕様に対応
GitHub - jakedowns/pull-quote-center: A jQuery plugin utility which dynamically inserts a symmetrical pull-quote element clone to enable a hacky float: center 文章の中央に画像等をドンと綺麗に配置するjQueryプラグイン「pull-quote-center」 次のように、普通にやると崩れてしまいそうな配置を実現できてしまいます。 関連エントリ FB/Google/Twitterへのシェアボタンを簡単に作れる「jquery.sharebox」 スライダーで画像の比較ができる「jQuery TwentyTwenty Plugin」 長ーいリストをアルファベット別にインデックスしてくれる「jQuery alphaindex」 デフォルトの
Tippy.jsは軽量シンプルなツールチップライブラリです。他ライブラリを必要としない非依存型となっています。Popper.jsがベースみたいですね。オプションもいろいろ。使い方も簡単そうですね。ライセンスはMIT。 Tippy.js
GitHub - narduz86/jquery-tinytimer: Simple timer plugin for jQuery. シンプルなタイマーを実装できる「jquery-tinytimer」 指定領域にシンプルなタイマーを表示し、タイマーの設定やコールバックの設定もオプションで簡単指定できて便利そうです。 関連エントリ 入力値のマスクとバリデーションがリアルタイムに行える「Jquery.inputmask」 ページ遷移をアプリっぽくすることができる「jQuery.smoothState.js」 ドラッグ&ドロップでBootstrapベースのformが作れる「jQuery formBuilder」
Webフォームのバリデーションをするのって面倒ですよね。どうせサーバサイドでバリデーションするのに…。 といいつつも、利用者を苛つかせないためにも、無駄な通信を減らすためにもフロントサイドのバリデーションは重要です。 何か良いライブラリが無いかなと思ってgithubを漁っていたら、良さげなライブラリを見つけました。 validatorjs "A data validation library in JavaScript for the browser and Node.js, inspired by Laravel's Validator."とあるとおり、LaravelのValidatorに似た感じになっているのが特徴です。 Laravelといえば、JSはreact.jsではなくてvue.jsだろうということで、Vueのコンポーネントでのサンプルです。(CSSはBootstrap) もちろ
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか?」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
PurserはWebサイトの訪問者の簡易的なデータを取得する軽量スクリプトです。最初に訪れた日時やリファラ、タイムゾーン、ブラウザに設定してある言語、ランディングページやモニターサイズ、コンバージョンに設定したボタン等をクリックした時間や設置されているURLなどを取得する事ができる、という簡易的なマーケティング用スクリプトです。この類のデータの扱いは慎重に進めないとですが、それはさておき、手軽で良いですね。 Purser
Download This Plugin Back To jQueryScript.Net jQuery before-after.js Example
survey.js : Product Feedback survey 多機能な製品のフィードバックフォームを生成できる「survey.js」 製品の満足度をユーザから受ける際にフォームを作る必要がありますが、そのフォームをJSONデータを元に簡単に作れます。 フォームに使えるタイプは沢山あって自由度のあるフォームが作れて、更に結果もJSONで受け取れます 関連エントリ デフォルトのフォーム要素を改善した「formbase」 フォームのフィールド変更を検出して処理を記述できるjQueryプラグイン「dirrty」 Bootstrapなフォームでのリアルタイムバリデーションを行う「Validator for Bootstrap 3」 フォームのプレースホルダをアニメーションしてズラす「phAnimate」 フォームの送信をAjax化できるjQueryプラグイン「Submitter」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く