scrollnav.js
A small, dependency free JavaScript plugin for auto generating and tracking single page navigation (aka a Table of Contents) Get started View the demos Features Simple setup Pass your page’s content to scrollnav and it will generate the navigation and track scrolling automatically. Fully customizable All the styling is up to you, make scrollnav look and behave however works best for your project.
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
Roundabout | Webサイト制作支援 | ShanaBrian Website
ダウンロードと設置 こちらからダウンロードし解凍します。 解凍したJavaScriptファイルを任意の場所に設置します。 次の要素を<head>内に記述します。 パスは環境により変更してください。 HTML <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.roundabout.min.js" type="text/javascript"></script> HTML <ul id="sample"> <li><img src="img/image1.jpg" width="160" height="90" alt="" /></li> <li><img src="img/image2.jpg" width="160" height="90" alt="" /></l
クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」
TOP > plugin > クリエイティブな動きがデザインが実装できる フリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」 魅力的なwebサイトを実現させるためには、他にはないデザインや動きを取り入れることで、より理想に近づけることができます。今回はそんな魅力的な動きを実装できるフリーjQueryプラグイン「30 Free jQuery Plugins for February 2014」を紹介したいと思います。 （Drop） そのまま利用しても、自分のデザインと組み合わせて使っても、クリエイティブなwebサイトを作り出せるプラグインがまとめられています。 詳しくは以下 scrollReveal.js スクロールするとバーの動きを楽しむことができるプラグイン。個性的なデザインのサイトに仕上げたい時におすすめ。 leas
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」 | Web活メモ帳
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
jQuery+CSSで実装するナビゲーションメニュー総集編 - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Down Menu Fly-out Menu with jQuery and CSS3 カッコいいですねー。反対側からスライドするフライアウトメニュー
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」:phpspot開発日誌
ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 2010年05月19日- Plugins | jQuery Plugins ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」。 ドロップダウンメニューといえば、複数のアイテムが表示され、クリックするとページ移動するというのが普通の動きですが、ドロップダウンメニュー内に好きなコンテンツを入れこんでしまうことが出来るのがMegaMenu。 一見何の変哲もないナビゲーション マウスオーバーすると、テーブルコンテンツがアニメーションしながら表示されます。 フォームだって埋め込んでしまえます。ログインフォームなんかを置くといいのかも リストも次のように綺麗に表示されます。リンクを貼って普通にメニューのように使うことも出来ますね。
[JS]画像だけでなく、テキストなども拡大表示できるスクリプト -AnythingZoomer
demo: calendar 仕組みは、通常表示用の画像・テキストとは別に、拡大表示用の画像・テキストを用意し、それをクリップして表示しています。 そのためデータが二重に実装するのが弱点です。 AnythingZoomerはjQueryのプラグインのため、実装にはjquery.jsが必要です。
[JS]滑らかにスライドするナビゲーションを実装するチュートリアル
滑らかにスライドするアニメーションが軽快なナビゲーションを実装するチュートリアルをSoh Tanakaから紹介します。 Animated Navigation with CSS & jQuery demo デモでは背景の有無の2パターンで、どちらも滑らかにスライドするアニメーションが面白い効果を生み出しています。 ナビゲーションはリスト要素で実装されており、「overflow:hidden;」でマスクし、マウスのホバーでスライド表示させています。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="topnav"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li
iPhoneスタイルのチェックボックスをjQueryで簡単実装:phpspot開発日誌
Introducing iPhone-style Checkboxes iPhoneスタイルのチェックボックスをjQueryで簡単実装。 次のようなiPhoneに使われているようなUIのチェックボックスを実装するライブラリが公開されています。 使い方は次のように、$(エレメント).iphoneStyle() という風に初期化するだけという簡単さです。 <script type="text/javascript" charset="utf-8"> $(document).ready(function() { $(':checkbox').iphoneStyle(); }); </script> 微妙にアニメーションする部分も芸が細かくていいです。 関連エントリ iPhone/iPodTouch風のON・OFFスイッチをJavaScriptで作成しよう iPhoneのロック解除の際のあのUIを
[JS]設置が簡単なパネルをスライド表示させるスクリプト -Slide box
divで実装したパネルをページの上部から、スムーズなアニメーションでスライド表示させるスクリプト「Slide box」を紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リストから必要な物を選ぶUIを実現する「jQuery.SelectListActions」:phpspot開発日誌
ドラッグ＆ドロップで調整できるタイムテーブルUI「jq.Schedule」:phpspot開発日誌
http://www.hp-stylelink.com/news/2015/02/20150217.php
[JS]パネルを水平方向にスライドしてエリアを拡大するスクリプト -sliding menu revisited
Site Under Maintenance
Site Under Maintenance