TOP  >  Javascript

Tag : Javascript

2018年03月12日

プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」

Webサイト閲覧中によく見かけるプログレスバーですが、最近は動きや形も様々で遊び心のあるものも増えてきています。そんな中今回は、プログラマーにとって便利なプログレスバーのJavaScript Plugins「 9 Free Progress Bar JavaScript Plugins For Web Designers」の紹介したいと思います。

ProgressBar01
Animated Goal Progress Bar jQuery plugin

ベーシックなものから、ちょっと変わったものまで9種類のプログレスバーがピックアップされています。

詳しくは以下

(さらに…)

続きを読む
このエントリーをはてなブックマークに追加
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年12月17日

Javascriptで描く表現のパーティクルアニメーション「D Particle Explorations」

流行のwebサイトなどでよく見かけるパーティクルアニメーション。ゆらゆら、ぐるぐると動き回る不思議なグラフィックは見る人を引き込み、虜にします。今回はそんなパーティクルアニメーション3DをJavascriptで描いた「D Particle Explorations」を紹介したいと思います。

animation3

8パターンの種類の違うパーティクルアニメーションをデモサンプルで確認することができます。

詳しくは以下

(さらに…)

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

JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」

Webサイトを閲覧していると様々なモーダルウィンドウを見かけると思います。使用用途はもちろん、デザインも様々。そんな中今回は、デベロッパーにとって便利な、JavaScriptモーダルウインドウプラグイン「Best Free JavaScript Modal Window Plugins」を紹介します。

modal-script01
SweetAlert2 – a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes

モーダル制作に便利なオープンソースが集約されたまとめとなっています。いくつか気になるものをピックアップしてみました。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: plugin   
このエントリーをはてなブックマークに追加
2017年11月01日

javascriptで様々なバブル表現が可能なオープンソース「Bubbly Backgrounds: Moving Backgrounds for Your Website」

普段何気なく閲覧しているサイトですが、UIデザインや背景の処理など様々な部分に工夫が凝らされています。そんな中今回は、javascriptで様々なバブル表現が可能なオープンソース「Bubbly Backgrounds: Moving Backgrounds for Your Website」を紹介したいと思います。

bubble01

様々なバブル背景が簡単な手順で制作することができるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 01:45  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2017年10月07日

デベロッパー必見 最新のリソース10種「10+ Wonderful Resources (Fully Packed With Hidden Gems ) For Developers」

多くのWebサイトを構築するデベロッパーにとって、作業時間の短縮や効率アップにつながるアイテムは日々の仕事においてとても重要です。更には新しい技術を求められるため、最新の素材をいくつか手元に置いておきたいもの。そんな時に役立つ最新のリソース10種類「10+ Wonderful Resources (Fully Packed With Hidden Gems ) For Developers」を今回は紹介します。

webresources_01

便利に活用できるリソース素材が豊富に紹介されています。いくつか、気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: Tool , WebDesign   
このエントリーをはてなブックマークに追加

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

2012年02月14日

レトロテイストなデザイン制作に使いやすいフォントまとめ「Collection Of Free Retro Fonts For Your Vintage Designs」

デザインに流行があるように、デザイン制作に必要なイラストやフォント・アイコンにも、その時々で流行があり、それぞれの時代を思い出させてくれる重要なアイテム。そこで今回紹介するのが、レトロテイストなデザインに使いやすいフォントばかりを集めた「Collection Of Free Retro Fonts For Your Vintage Designs」です。


Matchbook Typefaces | One by Four

タイプライターをモチーフにしたフォントや、以前に流行した映画のロゴを思い出させるようなフォントまで、さまざまな時代を感じられるフォントばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:10  |  
Category: Font   
2009年03月29日

クオリティーの高いFLASHギャラリー30選「30 Stunning Flash Image Galleries」

WEBサイトを運営していて、その中でも画像や動画をコンテンツにしている方は多いかと思います。今日紹介するのはクオリティーの高いFLASHギャラリーをまとめた「30 Stunning Flash Image Galleries」です。

designflashgallery01
Full Screen XML Gallery v1

今回まとめられたFLASHギャラリーは有料ですが、その分クオリティも十分に高いものになっています。FLASHギャラリーは開発に時間もかかりますので、もし目的と合致したものがあれば買って組み込むと言うのも一つの手なのかもしれません。今日は紹介されているFLASHギャラリーを価格とともにピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 12:21  |  
Category: WebDesign   
tag: webdesign
2016年09月18日

CSSで実現するフィルタジェネレーター「CSSFILTERS.co」

写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。

cssfilter_01

このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。

詳しくは以下

(さらに…)

続きを読む
posted 11:58  |  
Category: WebDesign , WebService   
2013年07月13日

イメージを拡大表示してくれるプラグイン集「25+ jQuery Image Zoom Effect Plugins」

WEBに掲載している写真をより大きく見せたいということは、商品などを扱うWEBでは特に多いことだと思います。今日紹介するのはイメージを拡大表示してくれるプラグインを集めたエントリー「25+ jQuery Image Zoom Effect Plugins」です。

featured-image-zoomer_thumb
Featured Image Zoomer

全部で25ものjQueryで簡単に実装できるズーム系のプラグインが掲載されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 03:10  |  
Category: WebDesign   
2008年04月11日

CSSのカーソル指定が一目でわかる「CSS Cursors」

普段は矢印のカーソル。CSSである程度コントロールできるのは皆さんご存じかと思いますが、普段そこまで使わないので、突然聞かれてもパッと出でこない人も多いんじゃないでしょうか?「CSS Cursors 」では下記のようなCSSで指定できるカーソルの一覧表が公開されています。


画像は一覧表の一部です。

全てのカーソルがInternet Explorer 4、Netscape 6以上のいずれかでサポートされています。またTESTのリンクにマウスカーソルをあわせるとブラウザでどう見えるのかを実際に表示してくれます。対応ブラウザまで表示してくれているのが嬉しいですね。

詳しくは以下

(さらに…)

続きを読む
posted 05:14  |  
Category: WebDesign   
tag: CSS webdesign
2011年02月01日

紙素材を使ってデザインされたwebサイト集「Web Designs With Paper Effects For Inspiration」

テクスチャ素材の中でも、アレンジしやすい・使いやすいということで高い人気を誇っている紙素材を上手に使いデザインされたwebサイト集「Web Designs With Paper Effects For Inspiration」を紹介したいと思います。


Sibling Rivalry | A Speck Brothers Wine.

素材感を活かしていたり、紙の特性をデザイン上に表現していたりと、さまざまな利用方法を参考にすることができます。中でも特に気になったサイトをいくつかピックアップしてみました。以下とりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:09  |  
Category: Design , WebDesign   
2009年09月30日

シームレスに敷きつめられるWEB用背景素材配布サイトまとめ

WEBを制作する上で、印象を決定付ける大きな要素が背景。表示面積が大きいだけに背景が与えるものは大きい。今日紹介するのはそんなWEB制作の際に使えるシームレスに敷きつめられるWEB用背景素材配布サイトを集めたエントリー「27 Best WebSites to Download Free Seamless Patterns」を紹介したいと思います。

haikei
Pattern 8

ジェネレーター的な使い方ができるサイトから種類豊富に幅広い背景素材を配布されているサイトまで様々なサイトが収録されています。今日はその中からきになったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 08:16  |  
Category: WebDesign   
2015年01月08日

フリーでダウンロード可能なデザインリソースまとめ「14 Best Design Resources Released this Week」

フリーで使用できる素材が豊富に展開され、つねにチェック・ストックをされているデザイナーの方も多いのではないでしょうか?そんな中今回紹介するのは、フリーでダウンロード可能なデザインリソースまとめ「14 Best Design Resources Released this Week」です。

resources0108_1
RetroSauce – Letterpress Actions ~ Actions on Creative Market

さまざまな種類のフリー素材がまとめられており、どれもデザイン性のあるものばかりが揃っています。気になったものをピックアップしましたので下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2009年02月11日

グラフィカルなポートフォーリオサイト集「30 More Portfolio Sites for Your Design Inspiration」

以前「デザイナーのためのWEBポートフォリオ集「50 Beautiful and Creative Portfolios」」という記事でクールなデザイナーのポートフォリオサイトをまとめたエントリーを紹介しましたが、今日紹介する「30 More Portfolio Sites for Your Design Inspiration」もそんなデザイナーのポートフォリオのデザインリソースとなりうるまとめエントリーです。


Nick Jones

前回と比べて、選んできているサイトが違う的に、全体的にグラフィカルなものが多いような感じがします。全部で30のサイトが紹介されていますが、今日はその中からいくつ描きになったポートフォリオサイトを紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:40  |  
Category: WebDesign   
tag: webdesign
2008年09月18日

WEB制作で使えるベクターデータ集「Vector Graphics for Web Design」

WEBデザインをしていて普通の素材では、デザインに凝ってくるとなかなか、コレだと言うものに出会えなかったり、近いものを使っても浮いてしまったり、どうしても難しい部分があります。そこで今回紹介する「Vector Graphics for Web Design – Hidden Pixels」はWEBデザインで使えるベクターデータを集めたエントリー。

ベクターデータなので、色や形、大きさなど、制作しているページに併せて制作することができます。定番のものや既にdesigndevelopで紹介したものも中にはありますが、アイコンやバッジ、バナー台の他、グラフィックまでとWEBで使えるベクターデータが集められています。今日は多々紹介されているものの中から気になったものをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 10:51  |  
Category: Design , vector   
tag: Design vector

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る