TOP  >  jQuery

Tag : jQuery

2018年02月09日

フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」

webサイトからのお問い合わせなどにフォームを設置しますが、スマートフォンライクの時代となった今、従来のデザインをそのまま取り入れるとタテに長くなってしまう傾向が。そんな状況を解消できる、フローティングラベルを取り入れたフォームサンプルまとめ「9 Floating Form Label jQuery & JavaScript Plugins」を今回は紹介します。

floating5
GitHub – Baedda/floating-form-labels: jQuery plugin that makes inline form labels usable again.

プレースホルダの文字が、入力するとタイトルとして浮き出すので、フォーム上に常に配置する必要がなく、長さを軽減することができるサンプルがピックアップされています。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:45  |  
Category: plugin   
このエントリーをはてなブックマークに追加
2017年06月17日

360度 ローテーションプラグイン「8 Best jQuery 360 Degree Image Rotation Plugins」

私たちがWebサイトから何か情報を得る時に欠かせないのは、商品や記事の詳細を知ることができる写真ではないでしょうか。そんな写真を見せる演出に利用したい、360度回転するローテーションプラグイン「8 Best jQuery 360 Degree Image Rotation Plugins」を今回は紹介したいと思います。

360_01
360 Javascript viewer, 360 degrees JQuery image viewer

見せたいものの全景がぐるっと確認できる、リアルで見ることができない商品の全体像をブラウザ上で効果的に見せられるプラグインが紹介されています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:37  |  
Category: Tool   
このエントリーをはてなブックマークに追加
2017年05月15日

スマートフォンから閲覧する為に最適化されたフォトスライダー「SmartPhoto.js」

スマートフォンの幅広い普及によって、UIや動作周りもスマートフォンに最適化されるようになってきました。そんな中今回ご紹介するのは、スマートフォン向けのフォトスライダーの作り方を紹介する「SmartPhoto.js」です。

SmartPhoto.js_01

スマートフォンで大きな写真を楽しめるフォトスライダーで、横スライドタイプのスマートフォンからの閲覧に最適化したギャラリーを簡単に作ることが出来ます。

詳しくは以下
(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2016年04月15日

軽量でクリエイティブなツールチップjs「POPPER.JS」

補足やアクセントなど色々なシーンで使えるツールチップ。今回紹介するのは様々な動きの制御が簡単にできる、軽量でクリエイティブなツールチップjs「POPPER.JS」です。

popper01

javascript自体は3.5KBと非常に軽量で、実装方法もjavascriptに普段触れている人であれば簡単に制御が可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:48  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2016年04月13日

階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」

国内でも商業施設の中でも重要な役割を担うフロアマップ。どうわかりやすく直感的に見せるかというのは商業施設においては一つの課題となっていますが、今日紹介するのは、階層表現が可能なインタラクティブなフロアマップ「Interactive Mall Map」です。

InteractiveMallMap_800x600

こちらのフロアマップは各階層ごとに積み重なっているビューから始まり、各階層ごとに詳しく見ていけるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:46  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
2016年03月15日

FacebookライクなGIFアニメーションプレビュー「Facebook Like GIF Preview Using jQuery」

動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。

fbGifPreview1

こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。

詳しくは以下

GIFのマークをクリックするとGIFアニメーションがスタートし、再度クリックすると元に戻ります。挙動については、デモサイトが準備されていましたので「Gif Preview with jquery」からご覧ください。

クリックでイベントが起きるため、スクロール位置などイベントを作っておけば、表示位置に来たら自動的に再生するなんてこともできそう。使い方次第ではグッとサイトが良くなるかもしれないjQueryプラグインだと思います。ソースコードはgithubにて公開されておりましたので、試してみたい方は「Fork it on Github」からどうぞ。

Facebook Like GIF Preview Using jQuery

続きを読む
posted 08:46  |  
Category: javascript , WebDesign   
このエントリーをはてなブックマークに追加
1234...10...

過去の記事からランダムで表示

2008年11月05日

シンプルで軽量なアコーディオンインターフェイス「Simple Javascript Accordions」

ブログやWEBページでメニュー部分がものすごく長くなるのは、使い勝手的にはあまり良い物ではありません。ただ日々運営していれば様々なアイデアが生まれコンテンツは増え続けてくると思います。そんな時に便利なのがコンテンツを格納できるアコーディオン式のメニュー。

様々なタイプのものがリリースされていますが、今回紹介する「Simple Javascript Accordions」は1年前に作られた物ではありますが、シンプルな構造と軽さと動きが気持ちよかったので改めて紹介したいと思います。

(続きを読む…)

続きを読む
posted 11:47  |  
Category: WebDesign   
2014年03月21日

レンズなどの光源を表現できるテクスチャまとめ「17 High Quality Lens Flare Textures」

太陽やライトなどのきらめきなど、Photoshopなどのソフトで思い通りの形に作り出すことはなかなか難しいもの。今回はそんな光源を手軽に表現できるテクスチャまとめ「17 High Quality Lens Flare Textures」を紹介したいと思います。

flash1
Pink Lens Texture by bluezircon-graphics on deviantART

いろいろな形の光源がまとめられており、デザインに光のニュアンスを与えることができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:11  |  
Category: Design   
2018年09月16日

スワイプでBefore/Afterを表現するスライダー「Beer Slider」

WEB上では限定的な使い方にはなってしまいますが、フィルターのON/OFF・背景のモノクロとカラー、化粧の有り無しなど、全く同じもので異なる状況を比べるというときに便利なのが、今回紹介するスワイプでBefore/Afterを表現するスライダー「Beer Slider」です。

beerslider-intro-752x471

上記のように左右で写真が表示されて、スワイプまたはスライドで写真の表示領域を切り替えることが可能です。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:35  |  
Category: javascript , WebDesign   
2014年10月16日

サイトの動きに魅力を与える フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」

webサイトをより魅力的に見せるためには、デザイン性はもちろんですが、意外性のある動きなどを取り入れることで実現することも。今回はそんなサイトの動きに魅力を与える、フリーjQuery&CSS3ホバーエフェクトまとめ「A Wonderful Collection Of Free jQuery & CSS3 Image Hover Effects」を紹介したいと思います。

effect1
Direction-Aware Hover with CSS3 and jQuery

さまざまな種類のエフェクトが豊富に紹介されており、サイト自体にどこか物足りなさを感じていた方におすすめのまとめとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2012年03月24日

WEB制作で使えるpsdファイル集「15 Beautiful and Useful Free PSD Files」

素材ひとつで制作の時間は大きく短縮でき、いつも時間に追われているデザイナーさんにとっては、使いやすい素材というのはいくつでもストックしておきたいもの。今日紹介するのは、WEB制作で使えるpsdファイルを集めたエントリー「15 Beautiful and Useful Free PSD Files」です。


Sticky Butterscotch UI Kit

こちらのエントリーでは、タグなどの細かいパーツデザインから、ユーザーインターフェースセット、ソーシャルボタンまで様々な素材がまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:00  |  
Category: Design , Photoshop , WebDesign   
2013年10月08日

コーナーを装飾するPhotoshopブラシのまとめ「35 Free Photoshop Corner Brushes」

アンティーク風なデザイン素材として利用されることの多いコーナー装飾は凝ったデザインのものが多く、自身で描き出すのはなかなか大変なもの。今回はそんな時に便利なPhotoshopブラシのまとめ「35 Free Photoshop Corner Brushes」を紹介したいと思います。

35fpcb_0
Scroll Banner Corners by =Lileya on deviantART

絵画の額を感じさせるもの、植物の唐草模様など、さまざまなテイストの装飾ブラシがまとめられています。中でも気になったものをピックアップしましたので下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Photoshop   
2014年06月29日

デザイン性の高いUI&ワイヤーフレームテンプレート集「30 New Web and Mobile GUI kits and Wireframe Templates」

webサイトやモバイルサイトのデザイン制作を行う際に必要な設計。実物に近ければ近いほど、実制作が楽になったり、イメージがし易いものです。今回はそんな時に利用したい、UI&ワイヤーフレームテンプレート集「30 New Web and Mobile GUI kits and Wireframe Templates」を紹介します。

ui140630_1
Dribbble – iTunes IOS7 UI kit by samsu

デザイン性の高いキットやワイヤーフレームのベースがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2013年12月27日

さまざまなデザインに活用・アレンジできるPhotoshopパターンコレクション「The Ultimate Collection Of Free Photoshop Patterns」

デザインする上で素材としてあると、とても便利なパターン素材。いくつ持っていても多すぎるということはないのではないでしょうか?今回はそんな素材コレクションに是非加えたい、Photoshopパターンコレクション「The Ultimate Collection Of Free Photoshop Patterns」を紹介します。

p_patterns1
Seamless Wood Patterns | Free Photoshop Pattern at Brusheezy!

さまざまなデザインに活用・アレンジできる、多彩な種類のパターンがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:43  |  
Category: Design , Photoshop   
2010年03月04日

様々な紙のテクスチャセットをひたすら集めた「150+ Free Paper Textures for your Next Design」

テクスチャの中でも汎用性がありもっとも使いやすい素材の一つ、紙のテクスチャ。紙といっても柔らかい印象のものからハードな印象のものまで、様々なものがありますが今日紹介するエントリー「150+ Free Paper Textures for your Next Design」は紙をテーマにあらゆる紙のテクスチャを集めています。

paper_txt_01
Paper Bag Texture Pack

様々なセットが公開されていますが、今日はその中からいくつか気になったテクスチャセットをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:14  |  
Category: Design , Photoshop   
2018年11月11日

デザインにインパクトを持たせるクリエイティブなフリーディスプレイフォント「14 Free Display Fonts with a Creative Flair」

デザインに必要不可欠なフォントは、選ぶ種類によってクオリティを左右する重要な要素。そんな、中今回紹介するのは、デザインをもっとハイクオリティに演出できるフリーフォントまとめ「14 Free Display Fonts with a Creative Flair」です。

1111-1
FREE NEON FONT

14種の、比較的新しいフリーフォントがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: Font   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る