jQuery Cards
Login to join the community jQuery Cards is a community to share and geek out about the latest, coolest jQuery plugins Login with: [TheChamp-Login] We'll never post to Twitter or Facebook without your permission. Top jQuery Plugins in 2020 jexcel jExcel is is a very light jquery plugin to embed a spreadsheet, compatible with Excel, in your browser. You can […] rUhuman simple captcha alternative Aa
ScrollUp demo - Mark Goodyear
scrollUp 2.0.0 Demo See the scrollUp v2.0.0 changelog for more information. Demo styles Tab Pill Link Image Demo styles can be found in the css/themes/ folder. activeOverlay Demo For demo purposes, toggle the activeOverlay below. Show activeOverlay Dummy content Dummy content to ensure the page is long enough to scroll on all screen sizes. Pellentesque habitant morbi tristique senectus et netus et
入力フォームを更に便利にするjQueryプラグイン5つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 以前こちらの記事「入力フォームをユーザーフレンドリーにする便利なJSプラグイン」でもいくつか紹介させていただきましたが、今回また新たに制作された入力フォームが更に便利になるプラグインを5つほど紹介したいと思います。 flexselect http://rmm5t.github.io/jquery-flexselect/ セレクトボックスの各項目をフレキシブルに表示できるjQueryプラグイン。 選択だけでなく、フォームに文字を入力させることでソートも行えるようになっています。項目数が多い場合に有効活用できそうです。 Multi-Column-Dropdown http://djsmithme.github.io/Multi-Column-Select/ セレクトボックスのUIをボタンで選択する形式に変更し使いやすくするjQueryプラグイン。 一項
jQueryプラグイン - SVGファイルからパスアニメーションを作成 - Lazy Line Painter
Illustratorなどのグラフィックソフトで作成したSVG（Scalable Vector Graphics）ファイルから、パスアニメーションを作成するjQueryプラグイン「Lazy Line Painter」を紹介します。 jQueryプラグイン「Lazy Line Painter」これがなかなかおもしろい！プラグインなので、早速、管理人もSVGファイルから作成してみました。デモをご覧ください。 「Lazy Line Painter」のデモ 絵心ゼロ……。でも、おもしろいですね！ さて、気を取り直して「つくり方」をみてみましょう。 つくり方1. SVGファイルを作成 「Illustrator」などのSVG形式に対応しているグラフィックソフトで、SVGファイルを作成します。 2. SVGファイルをjQueryコードへ変換 「Lazy Line Painter」へアクセスし、SVGファ
【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 | Digital experience University
2013年 05月 09日 【初心者でもできる！】JavaScriptでFlashのようなタイムラインアニメーションを簡単に作る方法 Yoshiaki Sato はじめまして、フロントエンド担当のヨシアキです。 この記事では、JavaScriptで作るFlashのようなタイムラインアニメーションについて、編集や管理の手間が省けるような作り方を説明していきます。 初心者向けに解説していますので、ぜひこの記事を参考にしてご自分のタイムラインアニメーションを作ってみて下さい！ 目次 はじめに - 増え続けるJavaScript製アニメーション 下準備 - HTMLとCSS JavaScriptアニメーションの作成！ まとめ このアニメーションのサンプルを見る はじめに - 増え続けるJavaScript製アニメーション iOSなどで表示ができないFlashの代替手段としてJavaScriptで
マウスオーバーで動くなめらかカルーセルパネル (1/2)
軽快でなめらかなカルーセルパネル 毎週アップロードされる充実した動画コンテンツを、カルーセルパネルやボックスレイアウトで賑やかかつコンパクトにまとめている「Universiteit van Nederland」。このサイトのカルーセルパネルは、マウスカーソルの位置に応じて軽快でなめらかに動く。 STEP 1：基本構造を用意する 今回作成するカルーセルは、横長のコンテンツをマウスの座標に応じて左右に移動させることで、スクロールの動きを演出している。 通常のボックススクロールでは、overflow: scroll; でスクロールバーを表示させ、スクロールバーの操作によってコンテンツを移動させる。今回のカルーセルは、スクロールバーの代わりにマウス座標を利用するため、overflow: hidden;で表示ボックス（.holder）からはみ出す部分を非表示化。内部（.inner）に横長のコンテンツ
jQueryを使った要素の回転を手軽に実装出来るおすすめプラグイン8選 | WebChokoTips – ウェブチョコチップス
先日色々と調べてみていいなーと思った回転系のプラグインを紹介していきたいと思います。 ユニークな演出を手軽に実装することができるので、とてもオススメのプラグインです。基本的に無料のものばかりなので気軽に使って見てください！ jQueryRotate.js DEMO 要素を回転させるためのプラグイン。 回転させたい要素にたいして、$(selector).rotate( 45 ); の様に使えます。 試しに動かしてみたらIE8以下では動作しないようでした。 rotate.js DEMO こちらもjQuereyRotate.jsと同じく要素を回転するプラグインです。 こちらはIE8、IE7でも正しく動作しました！ 指定方法もcss()を使った書き方が出来るので、扱い易いかと思います。
いろんな画像をクルックルクルックル回すイケイケjQueryプラグイン 「jQueryRotate」｜わざログ｜ うずまきブログ｜ 名古屋のホームページ制作／印刷物デザイン 株式会社うずまきデザイン
気候もすっかり穏やかになり、メシウマな季節がやってきましたね。七輪の上でサンマさんが焼き焦がれていく姿を拝見しながら酒が飲みたい、そんな今日このころ。申し遅れました、3度の飯より酒浴びたい、マークアップエンジニアのマツモトです。 先日、画像をクルックルクルックル回してください（アニメーション的な）というお仕事があったので、本日はそのときに実装した回しワザの紹介をしたいと思います。回したがり屋なあなた、必見です。 デモはこちら どうやって回すの？ 方法はいくつかあって、 今でもバリバリ現役、Flash使っちゃえばエエやん いやいや時代の最先端はCSS3先生です 困ったときはjQuery！ ぐらいが新米マークアッパーの思いつく限界値です。あしからず。 ３つの候補者が出そろったところで、審議！ Flash まず１つめFlashですが、僕が育った世代では既に『Flashいらなくね？』の時代であった
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
[JS]異なる高さのパネルを高いものに揃えたり、指定した高さに揃えるスクリプト -Equal Column Heights 2.0
Demo 7: 高さを変更する際にさまざまなスタイルを加えることができます。 ここでは背景色をグレーに変更。 Equal Column Heights 2.0の使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 各パネルを内包するラッパーを用意します。 <div class="hoge"> <div>パネル</div> <div>パネル</div> <div>パネル</div> </div> Step 3: JavaScript jQuery
jQuery Pseudo Plugin (:before and :after in Internet Explorer)
A jQuery plugin for :before and :after in Internet Explorer. Pseudo-who? CSS2's :before and :after pseudo-selectors are really handy ... but they don't work in Internet Explorer. Nope, not even IE7. I bet you're thinking: "But what if we used as many proprietary Microsoft features as possible all at the same time, that'll show 'em!" And you know what? You're absolutely right. You've just gotta lov
フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ:phpspot開発日誌
Creating CSS3 Animated Modal Windows in an Image Gallery | InsertHTML フラットだけど立体的なCSS3アニメーション付モーダルダイアログ実装デモ。 フラットデザインなのに立体的なUIはなかなかクールで、フラットデザインを実装する上で今後欠かせない要素となってきそうです。 そのモーダルダイアログを実装するデモが公開されており、一見の価値ありです。 関連エントリ ハイクオリティなソーシャル向けのフラットアイコンセット BootstrapベースのフラットUI実装フレームワーク「Furatto」 文具等のフラットなステーショナリーアイコンセット フラットな６２種類のファイル・タイプアイコンセット「File Type Icons」
jQueryのtoggleでアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある（主に下ネタ）」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい（´ω`） さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle／fadeToggle／toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
郵便番号から住所を補完する jquery.ajaxzip2 を拡張したよ · けんごのお屋敷
先日、郵便番号から住所を補完する jQuery のプラグイン jquery.ajaxzip2 を紹介しました。 これは AjaxZip 2.0 - Ajax郵便番号→住所自動入力フォーム（CGI不要版）を jQuery プラグインとして実装したもので、利用するためには自前で JSON 形式の住所データをサーバーに配置する必要がありました。そこで JSON 形式の住所データを準備しなくても良いように JSONP 形式の住所データも読み込めるように jquery.ajaxzip2 を少し拡張してみました。 外部の API を利用して住所を補完する JSONP については、詳しくは検索すれば情報が沢山でてきますのでここでは割愛しますが、要するに JSONP を使えば外部のサービスが提供する郵便番号検索 API などから住所を補完できるようになります。 郵便番号から住所データを引ける JSONP
イマドキのIDE事情(128) 「Codiqa」でjQuery MobileのデザインをWYSIWYG編集!
jQuery MobileとCodiqa jQuery Mobileは、スマートフォン向けのWebアプリケーションを作成するためのUIフレームワーク。iPhoneやAndroidをはじめ、様々なモバイルデバイスに対応している。HTMLに簡単な記述を追加するだけで、ネイティブアプリケーションのようなリッチなユーザインタフェースを作成できるのが特徴だ。 Codiqaは、このjQuery Mobileを使用したWebアプリケーションのデザインを、Webブラウザ上でWYSIWYG編集可能なサービスを提供している。アカウントを作成することで無償で利用可能で、有償のプレミアムアカウントにアップグレードすると作成したアプリケーションの保存や共有、画像のアップロードなどが可能になる (プロジェクト数などに応じて$10/月と$30/月のプランが用意されている)。 Codiqaを試してみよう Codiqaを利
クールなカウントダウンパーツを作れるjQueryプラグイン7つ | Web活メモ帳
カウントダウンを用いた表現は、販促やキャンペーンを行う際に視覚的に訴えれるツールでは無いでしょうか。 単純なテキストだけでは味気ないので、クールな表現をする際に使えそうなjQueryプラグインを集めてみました。 どなたかの参考になれば幸いです。 jQuery Countdown Timer チュートリアルと共に詳しい作り方を紹介しています。 Add a Countdown Timer on Your Website 数字はテキストで、背景を変更する事でカウントダウンを表現しています。 Littlewebthings CountDown カウントダウン完了後にユーザーにお知らせするためのメール送信処理のサンプルも合わせてダウンロード出来ます。 jQuery CountDown Plugin こちらは3.2.1・・・ とカウントダウンするタイプ。サイトを表示してから一定時間経過した後に表示させ
jQuery Mobileベースのサイトを直感的に制作できるサービス「Codiqa」 * R4 * Webサービスレビューサイト
jQuery Mobileベースのサイトを直感的に制作できるサービス「Codiqa」 2012年7月11日 Tag：webサイト制作 Text by 上瀧 ツイート HTML、CSSの記述をせずに、スマートフォンサイト制作を行えるWebサービス「Codiqa」のご紹介です。 現在、登録後30日間は無料で利用できます。 使い方を説明します。 サイトにアクセスし、トップページの「Create a Free Account」からユーザー登録を行います。 必要項目の記入が終わったら、利用規約等の確認後「Get Started」を押します。 メールアドレスの認証などは行われずに、ダッシュボードにアクセスできます。 今回は、はじめからサイトを作るので、「Projects」の右の「＋New」ボタンをクリックし、ダイアログにプロジェクト名を入力します。 すると、編集画面が表示されます。 画面右上のバーには
Cooky、特に飲食関連のビジネスやブログにぴったり
個人でも商用でも、そしてクライアントのプロジェクトでも無料で利用できる、スマートフォン・タブレット向けのサイトが簡単に作成できるjQuery Mobileを使ったテンプレートを紹介します。 Cooky -Free Mobile Site Template Cookyの特徴とラインセス Cookyのデモ(ページ） Cookyのデモ（エフェクト・テンプレート） Cookyの特徴とライセンス Cookyはスマートフォン・タブレット向けのサイトが簡単につくれるよう、ページやエレメントが一式揃ったテンプレートです。 その名の通り、特に飲食をベースにしたビジネスやブログなどを想定してデザインされています。 ValidなHTML5+CSS3で実装された11ページ。 グリッド、アコーディオン、リスト、ボタンなども用意。 レスポンシブ対応のスライダー。 コンタクトフォーム。 jQuery Mobile, G
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5のplaceholder属性をIEでも使えるようにするjQueryプラグイン「ah-placeholder.js」
Ionic: Enterprise App Platform
