ファイルアップロード関連のjQueryプラグイン１０:phpspot開発日誌
10 jQuery File Uploading Plugins | 3D Models, Website Templates and Illustrations blog | Templates.com ファイルアップロード関連のjQueryプラグイン１０ ファイルアップロードといってもSWFを使ったりAJAXを使ったりと方法が色々あって、いろんなやり方ができるjQueryプラグインです。 望みの挙動に近いものを選んでカスタマイズすれば作りたいものが最速で作れそうですね 関連エントリ facebookのフレンズセレクタ風UIを実装できるjQueryプラグイン「fcbkListSelection」 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 ギャラリー等を面白く見せられるjQueryプラグイン「Minimit」
ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラム:phpspot開発日誌
Draggable Image Boxes Grid | Codrops ドラッグで全体を移動できる超オシャレなイメージギャラリー実装プログラムのダウンロードができます。 Flashを使わずにここまで出来るのは素晴らしい限り。画像をクリックした後のアニメーションも良い感じです。 デモページ ギャラリーサイトをやるなら、これでやってみたいと思ってしまうようなハイクオリティなギャラリープログラムでした。 チュートリアル形式でソースコードの解説も行われているので勉強にもなります 関連エントリ PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ 上下左右にスライドできるおしゃれな画像ギャラリー作成スクリプト＆チュートリアル
ページをめくる表現を与えられるJavaScript「Useful Peel Back With jQuery」
人は秘密を覗きたくなる生き物です。 というわけで、ページがめくれそうな感じのデザインがあると見てもらえる率が高まりそうです。 Useful Peel Back With jQueryはそれを実現してくれます。 sponsors 使用方法 Useful Peel Back With jQuery | peel backからファイル一式をダウンロードします。 あとは下記のように記述すれば右上に登場！ <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.peelback.js"></script> <script> $(function() { $('body').peelback({ adImage : '隠しておく画像.png
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」:phpspot開発日誌
画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 2011年11月01日- webdev.stephband.info | jticker 画面上で誰かがタイピングしているようにアニメーションできるjQueryプラグイン「jticker」 タイピングしているようにアニメーションさせて動きを作ることで利用者の注目を集められます。 文書を読んでもらいたい場合なんかにも効果があるかもしれません。 流れる様にテキストアニメーション。 複数の文書を続けてスライドショーっぽくすることも出来るみたいです。 これはなかなか使えそうですね 関連エントリ テキストをCSS3でぼやけさせてアニメーションできたりするjQueryプラグイン「TextBlur」 カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 テキ
PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」:phpspot開発日誌
PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 2011年10月27日- Asketic Swipe Gallery | jQuery Plugins PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」 この手のものはスマホ限定だったりするのですがPCでもドラッグ＆ドロップのようにしてスワイプさせて画像を送ることができるようになっています。 両方に対応させる場合に個別に対応するよりも一緒に作ってしまいたいという場合に使えますね デモページはこちら 今後はもっとこうしたクロス環境でも似たように動作する物が出てくるかもしれませんね。 数年後にはスマホがPCを追い抜くという予測もあるぐらいなので、スマホありきでPCもとりあえず対応なんていう流れになっ
背景画像を使わず動的に背景模様を描画できるjQueryプラグイン「NoiseGen」:phpspot開発日誌
NoiseGen Demo 背景画像を使わず動的に背景模様を描画できるjQueryプラグイン「NoiseGen」。 次のような模様を$(element).noiseGen(options); のように呼び出すだけで描画できるプラグインです。 パラメータをいじることでパターン画像を変更できるあたりがなかなか面白いです。パラメータを変えてみて遊んでみるのもよさそう それにしてもこういう背景なら画像を使うのが当たり前ですが、JSを使うという発想が素晴らしいですね。 こうした細かなハックが重なって新しいハックが生まれていきそう。 関連エントリ 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 背景画像に使えるド派手なフリーのベクターイ
[JS]年表や社史など、アニメーションでスライドする時間軸コンテンツを簡単に実装できるスクリプト -Timelinr
jQuery Timelinr [ad#ad-2] Timelinrのデモ Timelinrの実装 Timelinrのデモ デモでは、水平レイアウト、垂直レイアウト、オートプレイの3種類があります。 スライドのアニメーションもかっこいいですが、パネル表示時のズームもいいですね。 デモ：オートプレイ [ad#ad-2] Timelinrの実装 HTML 時間とパネルをそれぞれリスト要素で実装し、divで内包します。 「#timele, #dates, #issues」はデフォルトの設定です。 <div id="timeline"> <ul id="dates"> <li><a href="#">date1</a></li> <li><a href="#">date2</a></li> </ul> <ul id="issues"> <li id="date1"> <p>Lorem ipsum.
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
Ascensor.js
Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system. It works with jquery >= 1.7. This plugin is entirely free to use, but you're always welcome to pay me a beer Download Ascensor.js Get the minified version → Implementation Basic implementation <div id="ascensor"> <div>Content 1</div> <div>Content 2</div> <div>Content 3</div> </div> <script src="jquer
影をマウス位置に追随させられるJavaScript「OKShadow」
twitter facebook hatena google pocket 要素にドロップシャドウをかけることがあるかと思いますが、OKShadowを利用すると、その影をマウス位置に追随させることが可能です。 これにより、3D表現を擬似的に実現させられます。 sponsors 使用方法 OKShadowからファイルをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="okshadow-1.0.js"></script> <script> $(function(){ $('#id名').okshadow(); }); </script> あとはidを要素に振れば完成です。 <div id="id名">テキストなど</div>
スマートフォンサイトを作る時に便利なフリックが実装できるjQueryプラグイン7選
スマートフォンを使うときによく使う操作方法としてフリックがあります。このフリックの操作でギャラリーができるjQueryプラグインを集めました。 Androidを持ってないので、全てがAndroidで動くかは未検証ですがだいたい動くと思います。 flickGal 自分が一番つかってるのがこのflickGalです。 PC（IE以外）でも動作します。 flickGal・・・iPhoneでフリックギャラリーを簡単に実装できるjQueryプラグインです – piglovesyouの日記 flickable こちらはPCでフリックができるようにできるプラグインです。そのままスマートフォンでも使えます。 PCでも（IE6でも）よく動きます。 jQuery.flickable: iPhone and Android like flick scrolling plugin flickSimple こちらもP
VW Beetle Cabrio | Volkswagen Deutschland
Exterieur Geht mit der Zeit. Ob es steht oder fährt, das Beetle Cabriolet mit seiner markanten Optik und den frischen Farben fällt auf. Mehr erfahren Interieur Farbig und individuell. Cockpit und Interieur im Beetle Cabriolet überraschen mit moderner Zahlenoptik und vielfältiger Farbauswahl. Mehr erfahren Sitze Sitzgefühl mit Stil. Sitzen Sie gut? Im Beetle Cabriolet ganz bestimmt - und das nicht
エフェクトが無駄に凄いイメージスライダーを実装出来るjQueryプラグイン・Chop Slider - かちびと.net
実用性は別にして、こういうの嫌いじゃない ので記事にします。よくあるイメージギャラリー なんですが、画像が変わる際のエフェクトが 無駄に凝っています（褒め言葉です）。こんな 事もflashを使わないで出来るんだなー、と 素直に関心したので、同じ気持ちで見て 頂けたら嬉しいです。 エフェクトはかなり多く用意されており、どれもなかなか派手な印象です。これだけのエフェクトをクロスブラウザに対応させているのもちょっと驚きです。※IE6にも対応とあるのですが、現在諸事情で確認出来ませんので対応してなかったらごめんなさい。 えらいこっちゃ・・なエフェクトばかりです。エフェクトはかなりの数が用意されており、１つのエフェクトも細かい設定が可能になっています。 まずはエフェクトの一部を無言でご紹介します。 ちょっとヒーローとかの変身シーンみたいな感覚です・・実際に動きを見てもらうと、いかに無駄にすごい動きか
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」:phpspot開発日誌
全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 2011年08月05日- jQuery.fracs larsjung.de 全体のプレビューをページサイトに出してドキュメントのどこにいるかを分かりやすくできる「jQuery.fracs」 縦に長ーいサイトだと今どこ読んでいるのか？わからなくなってしまうことがありますね. このライブラリを使えばページのサムネイルが動的に生成され、とってもわかりやすいだけでなく、サムネイル上をドラッグ＆ドロップでページ移動できちゃいます 右横にページ全体像のサムネイル 拡大するとこんな感じです ドラッグ＆ドロップでページ内を瞬間移動可能。 これはナイスですね 関連エントリ ページ内ハイライト検索が実装できるjQueryプラグイン「Plain Text Keyword Search」 今までなかっ
今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」:phpspot開発日誌
今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 2011年08月04日- Flexible Nav jQuery library 今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 <a name="hoge"></a> と <a href="#hoge"></a> を使って実現するページ内ナビゲーションをスマートに実現できます。 h1〜h3のエレメントでドキュメントの見出しを定義しておいて、プラグインで初期化すると、ページの右側に見出しが現れます。 文書の長さに応じて見出し間の距離が表されて、文書の構造が非常にわかりやすく、辿りやすくなります。 見出しをクリックすると、指定位置に移動できるのはもちろん、ドキュメント位置に応じて現在参照している見出し部分がハイライトされるので
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
[JS]jQueryのプラグイン33 1選 -2011年6月 | コリス
galleryFocus フォーカスした周辺をアニメーションでフェードさせ、中心をくっきり見せるギャラリー。 [ad#ad-2]
jQueryとHTML5でジオロケーションするデモ:phpspot開発日誌
Geo Location with HTML5 and Jquery jQueryとHTML5でジオロケーションするデモとサンプルがダウンロード可能になっています。 特にスマートフォン向けの機能として実装する際に参考にできそうです。 いざ実装するという段階になったときにサクっと実装できそうなので覚えておいて損はなさそうですね。 関連エントリ HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 HTML５でブラウザにドラッグ＆ドロップでファイルアップ可能なjQueryプラグイン「jQuery HTML5 Uploader」 HTML5のDesktop Notificationを簡単に実現するjQueryプラグイン「jwNotify」 jQueryとCSS3、HTML5でここまで出来るホバーインタフェース
レイアウトに関する強力なjQueryプラグイン６つ:phpspot開発日誌
6 Powerful jQuery Plugins to Create and Enhance Website Layout | Queness レイアウトに関する強力なjQueryプラグイン６つが紹介されていました。 一昔前では不可能では？と思われたような複雑なレイアウトもjQueryを使うことで簡単に実現できます。 ちょっと変わったレイアウトにしたいっていう時に参考にさせてもらいましょう UI.Layout リサイズ可能な複雑なレイアウト作成 Masonry ブロックを新聞みたいにしきつめて表示 jLayout divをならべてその親divのclassにルールにしたがって記述することで複雑なレイアウトが簡単に作れます jQuery pageSlide ページ全体をズラしてアニメーションしながらサイドバーを出すエフェクト jQSlickWrap 画像にあわせて文書をまわりこませられる C
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
taikikawakami.tk