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   
このエントリーをはてなブックマークに追加

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

2012年07月21日

天気予報のためのシンプルなアイコンセット「Free Weather Icons」

誰しもが気になる情報コンテンツの一つが天気予報。多くの方が毎日チェックするものですが、コンテンツを作る立場にとっては、それぞれの天気をいかに直感的に分かりやすく、見せてあげるのかが、頭を悩ませるところだと思いますが、今日紹介するのは天気予報のためのシンプルなアイコンセット「Free Weather Icons」です。

晴れ、くもり、雨というシンプルなものから、竜巻や風速計などすこし変わったものまで様々なものが収録されています。

詳しくは以下

(さらに…)

続きを読む
posted 09:16  |  
Category: Design , vector   
2012年11月27日

レトロな質感を表現できるペーパーテクスチャまとめ「23 Free High Quality Old Paper Photoshop Textures」

古い紙の質感をデザインソフトで再現するのは難しく、試行錯誤しているという方もいらっしゃるのではないでしょうか?そこで今回紹介するのが、レトロな質感を表現できるペーパーテクスチャまとめ「23 Free High Quality Old Paper Photoshop Textures」です。


Old Paper Photoshop Brush Set by ~gojol23 on deviantART

古い洋書の一ページから、グランジ感のあるペーパーまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:56  |  
Category: Design   
2016年05月19日

フリーで使える 56アルファベットが揃ったモノグラムモチーフ「56 Awesome Vector Monograms」

フリーで配布されている素材には、いろいろな種類が存在しており、中でもデザイン性のあるパターンやモチーフはそのままデザインに使うことができて便利です。そんな中今回紹介するのは、56アルファベットが揃ったモノグラムモチーフ「56 Awesome Vector Monograms」です。

monog1

A-Zのアルファベットがモノグラムモチーフで展開された、アイデア次第でいろいろな使い方ができそうなフリー素材となっています。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Design   
2015年10月15日

デザイン性の高い100種のフリーフォントまとめ「The 100 best free fonts」

デザインのクオリティや良し悪しを決めるのに非常に重要な存在であるフォント。フリーで使用できるものも豊富に配布されていますが、数が多いだけにその中から最適なものを探そうと思うととても大変なもの。そんな時に参考にしたい、デザイン性の高い100種のフリーフォントまとめ「The 100 best free fonts」を紹介したいと思います。

font1015_0
Arkhip font

100種という豊富な種類のフォントがまとめられており、どれもデザイン性の高いものばかり。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 02:45  |  
Category: Font   
2011年09月04日

wordpressで利用できるフリーフォームプラグイン集「20 Free Contact Form Plugins for WordPress」

プログラマーにはシンプルなフォームプログラム。ただ、デザイナーにとっては自ら組み上げるというのは少しハードルがあると思います。今日紹介するのはwordpressでフォームを簡単に実装できるフリーフォームプラグインを集めたエントリー「20 Free Contact Form Plugins for WordPress」です。


Contact Coldform

シンプルなプラグインから、非常に高機能なプラグインまで様々なプラグインが紹介されています。今日はその中から幾つか気になったプラグインをピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 02:28  |  
Category: plugin , WebDesign , WordPress   
2011年01月28日

ハイクオリティで美しいpsd素材まとめ「80+ Ultimate Collection of High Quality Free PSD Files」

デザイン製作で大活躍のpsdアイコン、最近ではハイクオリティなタイプのものが人気のようで、数多くリリースされていますが、今回紹介する「80+ Ultimate Collection of High Quality Free PSD Files」にも、美しいデザインのpsd素材が多数収録されています。


PixelResort » Home of Designer & Iconist Michael Flarup

アイコンや、デザインのアレンジ・ポイントとして活用できそうなデザイン性の高いpsd素材を豊富にまとめたサイトとなっています。いくつか気になったものを以下より紹介いたします。

(さらに…)

続きを読む
posted 10:24  |  
Category: Design   
2011年04月24日

クリエイティブでフレッシュなフリーフォントまとめ「20 Professional Headline Fresh and Free Fonts」

デザインの善し悪しを決めるフォント選びは、デザインを長年経験している方でも意外に難しいもの。ぴったりのフォントを見つけるのに苦労する場合も多いかと思います。今回はそんなシーンに是非活用したい、クリエイティブでフレッシュなフリーフォントまとめ「20 Professional Headline Fresh and Free Fonts」を紹介したいと思います。


Movavi Grotesque Black on the Behance Network

シンプルで定番として使えそうなタイプから、フォント自体がデザインされたクリエイティブなものまで、20のフリーフォントが紹介されています。中でも特に気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 11:40  |  
Category: Design , Font   
2015年08月02日

魅力的な動きを手に入れる フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」

webサイトをより魅力的に見せるには、デザイン性ももちろんですが、ユーザーを惹きつける動きにもこだわることが重要。しかしただ考えているだけでは、なかなかアイデアとしてひらめくことは難しいのではないでしょうか?今回はそんなときに参考にしたい、フリーアニメーションチュートリアル「26 Free Animation Tutorials for Web Developers」を紹介したいと思います。

animation2
A Collection of Page Transitions

26種類の、いろいろな動きを表現できるアニメーション作成のためのチュートリアルがまとめられています。

詳しくは以下

(さらに…)

続きを読む
posted 11:42  |  
Category: Design   
2015年01月30日

バレンタインデザインに利用したいフリーベクター素材まとめ「15 Free Valentine Vectors You’re Gonna Love」

もうすぐバレンタインデー。デザインでバレンタインテイストの制作を手がけているという方もいらっしゃるのではないでしょうか?今回はそんな方におすすめ、バレンタインデザインに利用したいフリーベクター素材まとめ「15 Free Valentine Vectors You’re Gonna Love」を紹介したいと思います。

valen1
Free Vectors: Happy Valentine's Day vector illustration

ハートや花柄といった可愛らしいモチーフのベクター素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:19  |  
Category: Design   
2014年03月19日

写真に手軽にニュアンスを加えられるPhotoshopアクション「14 Time Saving And Free Photoshop Actions For Designers」

Photoshopでは写真にいろいろな加工を施すことができますが、なかなか思い通りのイメージに仕上がらない時もあるのではないでしょうか?そんな中今回紹介するのは、写真に手軽にニュアンスを加えられるPhotoshopアクション「14 Time Saving And Free Photoshop Actions For Designers」です。

action0319_1
+PSD – #006 by MixColors on deviantART

ヴィンテージ調から、写真をよりキレイに美しく見せてくれるものまで、いろんなパターンのアクションが紹介されています。

詳しくは以下

(さらに…)

続きを読む
posted 10:04  |  
Category: WebService   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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