TOP  >  js

Tag : js

2016年12月06日

クリエイティブなホバーアクションを簡単に実装する「Tilt Hover Effects」

PCで見るWEBサイトの印象を大きく左右するアクションの一つホバーアクション。主にWEB上のユーザー導線上に配されるものだけに、小さいながらも、このアクションが心地よいかでサイトのクオリティを左右するものですが、今日紹介するのはクリエイティブなホバーアクションを実装できる「Tilt Hover Effects」です。

TiltHoverEffects_800x600

一般的に色が変わる、透明度が上がる、画像が切り替わるなどといったものでは無く、複数の画像がズレたり、アニメーションが加わったりマウス座標の位置で見た目が変わったりと、多彩なホバーアクションが簡単に実装できるようになっています。

詳しくは以下

(続きを読む…)

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

クリスマスに最適な3Dキューブアドベントカレンダー「Cubes Advent Calendar」

街はハロウィンからクリスマスへ変わり、クリスマスの話題も少しづつ出始めていますが、今回紹介するのはクリスマスに最適な3Dキューブアドベントカレンダー「Cubes Advent Calendar」です。

CubesAdventCalendar_800x600

アドベントカレンダー(Advent calendar)は、クリスマスまでの期間に日数を数えるために使用されるカレンダーで、毎日一つづつ空けていくカレンダーとなります。今回の1つ1つがキューブとなっておりクリックすることで開封することが可能です。

詳しくは以下

(続きを読む…)

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

フリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」

数多くの情報を整理し分かりやすく表現するために様々なユーザーインターフェイスが開発されてきましたが、今回紹介するのはフリックやグリッド生成など様々なUIが簡単に実現できるjsライブラリ「egjs」です。

egjs01

実現できるユーザーインターフェイスは全部で4つ。タッチアクションから座標位置を取得するeg.MovableCoord、シンプルなフリックeg.Flicking、要素がビューポート内に存在するかを確認できるeg.Visible、グリッドスタイルをループで生成するeg.infiniteGridとなっています。

詳しくは以下

(続きを読む…)

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

WEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」

WEB上のユーザーインターフェイスの中で行われるちょっとしたアニメーションに驚きと感動をするということがたまにありますが、インターフェイスに即したアニメーションはWEBをより良いものにしてくれます。今日紹介するのはWEBの表現をもっと豊かにしてくれるアニメーションまとめ「36 Brilliant User Interface Animations」です。

dancing_icon
Menu open / tick / close

全部で36ものアニメーションが原文ではまとめられていましたが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

グラデーションを操るjavascript「Granim.js」

様々なデザインで活用されるグラデーション。その表現方法によっては色に深みが出たり、奥行きがでたりと単色では表現できない感覚を与えてくれますが、今日紹介するのはグラデーションを操るjavascript「Granim.js」です。

granim1

この「Granim.js」はjavascriptを利用して特定の色から特定の色までをシームレスに変化させる事が可能です。

詳しくは以下

(続きを読む…)

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

Three.jsでここまでできる!実験的なサンプル20選「20 Exceptional Three.js Experiments」

WEBGLをjavasuriptで制御するためのライブラリThree.js。ブラウザで3D表現などを行う際には国内でも有名なライブラリですが、今日紹介するのはThree.jsを利用した実験的なサンプルを集めたエントリー「20 Exceptional Three.js Experiments」です。

Many-Icons
Many Icons in 3D Using Three.js

全部で20個の実験的なサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

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

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

2008年08月31日

ログイン不要で1ファイル10Gまでのオンラインストレージ「Filesavr」

今までいくつかオンラインストレージは紹介してきましたが、今日紹介するオンラインストレージサービス「Filesavr」は、なんと1ファイル毎に10Gまでのファイルをアップロードしておけます。しかもログイン不要で利用できるので、気軽に利用する事ができます。

オンラインストレージ

現実的に10Gともなるとアップロードするのも大変ですし、単体のファイルでそこまでのファイルを受け渡しする機会は滅多に無いと思いますが、制限の上限が高いのは嬉しい所です。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:31  |  
Category: WebService   
2007年11月14日

透明プレートメニューがせり出てくるドック型メニュー「Webber 2.0 Dock Menu」

CSSとJavaScriptで作られた、動きのあるシンプルなドック型メニュー「Webber 2.0 Dock Menu」を紹介したいと思います。

webber20dockmenu.jpg

こちらのメニューは透明のプレートが上から出てくるタイプのメニューで、使われている画像が透明なのでサイトに重なりができ、サイトに奥行きをあたえることができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 05:46  |  
Category: WebDesign   
tag: webdesign
2013年06月02日

jQueryで実現する動画、音楽プレイヤー「10 Useful jQuery Video & Audio Players」

最近では動画や音楽もFLASHに頼ること無く、HTMLとjsのみで扱えるようになってきて、jQueryを利用すれば、かなり高度なプレイヤーを実現することも可能です。今日紹介するのはシンプルなものから一風変わったものまで、jQueryで実現する動画、音楽プレイヤーを集めたエントリー「10 Useful jQuery Video & Audio Players」です。

22
Responsive & Touch-friendly Audio Player

全部で10個の動画、音楽プレイヤーが紹介されていますが、今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:52  |  
Category: WebDesign   
2018年11月29日

ボヘミアンスタイルの素材まとめ「Incorporate Bohemian Style Into Your Designs FEATURED」

デザインテーマにはさまざまな種類があり、テーマに合った素材を上手に選定することはとても重要な要素の一つ。そんな中今回紹介するのは、ボヘミアンスタイルのデザイン素材をまとめた「Incorporate Bohemian Style Into Your Designs FEATURED」です。

gazou1
Yulia.Podlinnova/1341159-Boho-Bordo-Watercolor-Flowers

ボヘミアンスタイルを象徴する様々なモチーフが、水彩画や手書風のタッチでデザインされています。気になるものをいくつかピックアップしましたので、下記からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
2017年09月19日

iPhone Xのモックアップテンプレート「Free iPhone X Mockup Templates (28 Mock-ups)」

先日、iPhone8と同時に発表されたiPhoneX。全面ディスプレイになった新しいフォルムと新機能が搭載され、手に取るのが待ち遠しい方は人はとても多いのではないでしょうか。新機種が発表されると、デザイナーはそれに合わせてデザインを提案しなくてはなりませんが、今回はそんな時に役立つ、iPhone Xのモックアップテンプレート「Free iPhone X Mockup Templates (28 Mock-ups)」を紹介します。

iphone-x-mockup01
iPhone X Mockup PSD – Free Download on Behance

早くも28種類の様々なテイストのモックアップが集約されており、デザイナーにとって必見の内容のとなっています。

詳しくは以下

(続きを読む…)

続きを読む
2017年07月03日

クリエイティブからミニマルまでWordPressのフリーテンプレート10「June 2017: 10 Pretty, New and Free WordPress Themes」

WordPressのテンプレートは、デザイン制作の効率化やデザイン精度を高めてくれる非常に便利な存在。そんな中今回紹介するのはmWordPressのフリーテンプレートまとめ「Pretty, New and Free WordPress Themes」です。

Brilliant-top
Brilliant – Kostenlose WordPress-Themes

トレンドを取り入れつつ、機能面も充足したテンプレートがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:00  |  
Category: WordPress   
2009年03月26日

スタイルシートをオンラインで整形してくれる「Stylenea」

CSSの書き方は人によって様々だと思いますが、普段自分が使っている書き方でない書き方だと解読に手間取ってしまうときもあるかと思います。今日紹介するオンラインサービス「Stylenea」は自分の指定した形式にCSSファイルを整形してくれるものです。

cssdesignloads01

CSSをコピーするかもしくはファイルをアップロード、もしくはアップされているURLを指定することでCSSを読み込ませる事ができます。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:38  |  
Category: WebDesign   
tag: CSS webdesign
2014年12月01日

3種の形式を揃えたラインアイコンセット「300+ line icons」

アイコンの中でも、線で輪郭が描き出されたラインアイコンは、シンプルなテイストのものが多いだけに重宝するもの。そんな中今回紹介するのは、3種の形式を揃えたラインアイコンセット「300+ line icons」です。

line300_1

300種もの、さまざまな種類のアイコンがセットでダウンロードできるようになっています。

詳しくは以下

(続きを読む…)

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

HTML5で作られたビデオプレイヤー集「10 Best HTML5 Video Player」

次世代の言語として期待されているHTML5、すでにスマートフォン関係の標準ブラウザで対応し始めていることもあり、利用したことが有るという方もWEB制作者であれば多いのではないでしょうか?今日紹介するのはそんなHTML5で作られたビデオプレイヤーをまとめたエントリー「10 Best HTML5 Video Player」です。


FryPlayer – HTML5 Video Player

全部で10種類のHTML5で作られたビデオプレイヤーがまとめられていましたが、今日はその中から幾つか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

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

さまざまなシーンで利用できる 黄色のパターン素材まとめ「A Collection of Useful Free Yellow Patterns」

デザインに手軽に世界観を演出できるパターンは、デザインクオリティをあげるための必須アイテム。そこで今回紹介するのが、さまざまなデザインの黄色のパターン素材ばかりを集めた「A Collection of Useful Free Yellow Patterns」です。


DinPattern – Free seamless patterns » Disco Gold

シンプルなパターン素材はもちろん、黄色を基調にしたカラフルなデザインまで、豊富に紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:40  |  
Category: WebService   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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