TOP  >  gifアニメ

Tag : gifアニメ

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

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

2016年06月05日

モックアップを画像をアップロードするだけで制作してくれる「Smartmockups」

WEBデザインを生業として行う上で、単純にデザインしたものを見せるだけでは無く、時には実際にスマートフォンやPCに表示されている画像を見せてイメージを膨らませていただく作業をしたということもあると思います。今日紹介するのはそんなモックアップを画像をアップロードするだけで制作してくれる「Smartmockups」です。

smartmock0

デスクトップからスマートフォン、タブレットなど様々なモック写真が公開されており、それらを簡単に利用することが可能です。
試しにDesigndevelopのスクリーンショットで試してみましたので以下からご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:30  |  
Category: Design   
2013年01月15日

クリエイティブで使えるフリーphotoshopパターン集「40 Unique & Free Photoshop Patterns」

デザインに質感を与えたり、クオリティを簡単に向上してくれるパターン素材。使い方によっては、単なる図形が全体を引き立てる要素に変わったりしますが、今日紹介するのは、便利に利用できる、クリエイティブで使えるフリーphotoshopパターンを集めたエントリー「40 Unique & Free Photoshop Patterns」です。


Manga Patterns

様々な種類のphotoshopで利用できるパターンが全部で40種類まとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:30  |  
Category: Design , Photoshop   
2011年12月31日

HTML5を使うためのチートシート「HTML5 Cheat Sheets」

今年一年で多くの話題を振りまいたHTML5。今年から覚えてみよう、活用してみようという方も多いと思います。今日紹介するのは、HTML5を使うためのチートシート「HTML5 Cheat Sheets」です。


HTML5 Tags Cheat Sheet

HTML5のタグ、イベントの定義にあわせて、それを処理するイベントハンドラ属性の一覧、HTML5がサポートされているブラウザが一目で分かるシートと3枚セットになったチートシートです。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:12  |  
Category: WebDesign   
2014年12月29日

グラフィカルなテキストデザインを手がける際に試したい Photoshopテキストエフェクトチュートリアルまとめ「25 Amazing Photoshop Text Effects Tutorials for Designers」

メインのグラフィック作成に、テキストを使用することも多いと思いますが、ただ打ちっぱなしの文字だとどうしてもインパクトに欠けるもの。今回はそんな時に参考にしたい、Photoshopテキストエフェクトチュートリアルまとめ「25 Amazing Photoshop Text Effects Tutorials for Designers」を紹介したいと思います。

texteffect1229_1
How to Create a Colorful Text Effect in Photoshop

多彩なデザイン表現を可能にするテキストを使ったデザインのチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Photoshop   
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   
2016年01月20日

フリーダウンロード可能なデザイン性の高いフォントまとめ「16 New Free Fonts for Designers」

デザイン制作をする上で非常に重要な要素となってくるフォントは、選定からがとても大切だと思います。今回はそんな選定時にリストとして加えたい、デザイン性の高いフォントまとめ「16 New Free Fonts for Designers」を紹介したいと思います。

font1020_2
RACER: Free Font on Behance

どれもクリエイティブなテイストが嬉しい、フリーダウンロード可能なフォントが揃っています。気になったものをピックアップしましたので、下記よりご覧下さい。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2008年04月04日

美しいWordPressのデザインを集めた「WP Love WP」

前回「美しいmovabletypeのデザインを集めた「Movable Love」」という記事でMovabletypeの美しいデザインを集めたデザインショーケースを紹介しましたが、今回紹介するのはそのWordPress版とも呼べる「We Love WP」です。「Movable Love」と同じくWordPressのデザインに特化してデザインが収録されています。

wplovewe01.jpg

こちらは「Movable Love」と違いかなりの数のデザインが収録されていて見応え抜群です。新規でWordPressのテーマを制作するときや、カスタマイズの参考に使えそうです。

詳しくは以下

(続きを読む…)

続きを読む
posted 07:41  |  
Category: WordPress   
2008年07月14日

面接で差をつけるフリーデザイン履歴書集「38 More Beautiful Resume Ideas That Work」

管理人はデザイン・広告業界に身を置いていますが、面接の時に重要なのは仕事の経歴はもちろんですが、お会いした時のセンスだったり遊びだったりします。そこで今回紹介するのは自作のデザイン履歴書集「38 More Beautiful Resume Ideas That Wor」です。

定型のものでも特に問題はありませんが、こういう細かいところが「おっ」と思わせる事に繋がるかと思います。堅い企業では逆効果に働く場合もありますが、はまった時の効力は大きい気がします。全部で38個以上の履歴書が公開されていますが、今回は気になったものをいくつか紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 03:08  |  
Category: Design   
tag: Design
2014年08月23日

ECサイトなどで活用できる フリークレジットカードアイコンセットのまとめ「27 Free Credit Card Icon Sets for Online Web Shops」

インターネット上でショッピングをする際の決算方法として、クレジットカードを使用する方は非常に多いと思います。決済は非常に重要な工程であるため、デザイン的にも分かりやすく案内してあげることが重要。今回はそんな時に必要な素材の一つ・クレジットカードビジュアルをアイコン化した「27 Free Credit Card Icon Sets for Online Web Shops」を紹介したいと思います。

credit-cards1
Dribbble – 1 Color Credit Icons by Chad Pugh

さまざまな表現のクレジットカードのアイコンセットが、27種まとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

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

ブックレビュー「WEB制作の現場で使うjQueryデザイン入門」

アスキーメディアワークスさんに「WEB制作の現場で使うjQueryデザイン入門」を献本して頂きましたので紹介したいと思います。

jquerybook

まず本の内容に触れる前にドキッとさせられたのが帯のコピー。「もうプログラマーには頼らない
」、「javascriptはコピペ。クライアントの要求には応えられない」、「ゼロから始めてjQueryの制作力が身につく本」などと書かれていて、ライブラリを中心にパッケージを少し改変して利用していた自分にとってはかなり効いたコピーでした。そのコピーの通り内容は非常に分かりやすく、ゼロからの方でも順を追っていけば理解できるようになっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:43  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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