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

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

2011年09月18日

簡単にオンラインポートフォリオが作成できるWEBサービス「Carbonmade」

WEBでは多くの人に自分のデザインや作品を公開する術がありますが、今回は誰でも簡単に自分のポートフォリオが作成できるWEBサービス「Carbonmade」。HTMLなども全くわからなくても利用できるようになっています。

現在約40万ものポートフォリオが公開されており沢山の方が利用しているようです。無料で出来る範囲は5つのプロジェクトで35イメージまで。有料版は50のプロジェクトが作成でき500イメージ+10ビデオが公開できるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 02:12  |  
Category: WebService   
2015年04月01日

定番として使用できるフリーアイコンセットまとめ「Free PSD Icons: 450+ Icons for Designers」

webサイト制作で重要な役割を担うアイコンは、フリーで配布されているものも非常に多く重宝するもの。ベーシックなものから個性的なものまで、さまざまな種類を持っているデザイナーの方は多いと思います。そんな中今回紹介するのは、定番として使用できるフリーアイコンセットまとめ「Free PSD Icons: 450+ Icons for Designers」です。

icon0401_1
Boldo – Free Icon Set – graphberry.com

比較的、webサイト制作で使用頻度の高そうな種類が揃ったアイコンセットが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

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

知っていると便利なCSSで創るハーフトーンエフェクト「Pure CSS Halftone Effect」

モダンな雰囲気からスタイリッシュな雰囲気まで、幅広い演出をしてくれるハーフトーン。今まで画像としてWebサイトに取り込むことが多かったのではないでしょうか。今回ご紹介する「Pure CSS Halftone Effect」ではWebならではの動きを楽しむことができるエフェクトを通したハーフトーンになります。

PureCSSHalftoneEffect

美しい動きで視線を惹き付ける、ぜひ取り入れてみたいエフェクトとなっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:00  |  
Category: WebDesign   
2015年04月14日

細かな描写が特徴 食べ物をテーマにしたアイコンセット「Foody Icons」

フード系のwebサイトなどには、お店のインテリアやメニューに合わせて、食材や料理イメージなどのデザイン要素が必要となってきます。今回はそんな時に活用できる、食べ物をテーマにしたアイコンセット「Foody Icons」を紹介したいと思います。

foodicon

細かな描写が特徴の、いろいろな種類のフードアイコンがダウンロードできるようになっています。

詳しくは以下

(さらに…)

続きを読む
posted 09:28  |  
Category: Design   
2014年07月04日

さまざまなデザインに応用できる 美しいスクリプトフォントまとめ「10 Free Script Fonts to Download」

欧文の筆記体フォントとしてさまざまな種類が展開されているスクリプトフォント。洗練されたテイストだけにとどまらず、いろんなデザインに応用することができます。今回はそんなスクリプトフォントをまとめた「10 Free Script Fonts to Download」を紹介したいと思います。

font140704_1
Braxton free font | Fontfabric™

表情の美しさが感じられるスクリプトフォントが10種類紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
posted 10:00  |  
Category: Font   
2009年06月30日

ワンページにすべてをおさめるWEBデザイン集「41 Sleek Single Page Websites」

国内で一般的なWEBページの構造を思い浮かべるとしたら皆さんはどんなものを思い浮かべるでしょうか?スタンダードな例として、ページが複数ページがあってそれをグローバルナビゲーションでまとめているといった作りがあります。今日紹介する「41 Sleek Single Page Websites」は先ほどあげたスタンダードな例ではなくて、すべてのコンテンツを1枚のページに集約したWEBの構成をとっているWEBページを集めたエントリーです。

onepweb01
Pictureghjk 8

まとめているからと言って、コンテンツが充実していないという訳ではなく、機能的には問題ない形で1ページに落とし込んでいます。今回はいくつか収録されているもののなかから気になったものをいくつかピックアップして紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 06:15  |  
Category: WebDesign   
tag: webdesign
2010年04月23日

WEB上のボタンをひたすら集めたタンブラー「House of Buttons」

WEBデザインには欠かすことが出来ないボタン。ユーザーインターフェイスに直結する部分なだけに、重要な要素の一つです。今回紹介するのはWEB上で実際使われているボタンをひたすらポストしているタンブラー「House of Buttons」です。

houseofbtn01

検索ボタンから、支払いボタン、Twitterへの追加ボタンなどなど、様々なボタンが公開されています。公開されているボタンをいくつかまとめて下記に紹介いたします。

詳しくは以下

(さらに…)

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

手書きフォントを利用したwebデザイン集「Tips in Using Handwriting Fonts for Stunning Web Designs」

手書き感のあるデザインは人間的な温かみが感じられ、ユーザーに安心感を与えたいデザインなどに良く利用されています。そんな中今回紹介するのは、手書きフォントを利用したwebデザインばかりを集めた「Tips in Using Handwriting Fonts for Stunning Web Designs」です。


christiansparrow

可愛らしい・シンプル、さまざまなテイストの手書きフォントが印象的なwebサイトばかりが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(さらに…)

続きを読む
2008年10月16日

ソース付タブメニューインターフェイスのまとめ「30+ Animated Tab-Based Interface and Accordion Scripts」

様々なWEBサイトがあり、さまざまなインターフェイスが設計されていますが、今日紹介するのは数あるインターフェイスの中でもスタンダードなタブメニューとアコーディオンについてのインターフェイスのソース集「30+ Animated Tab-Based Interface and Accordion Scripts」です。


Scrolling Tabs

全部で30個以上のインターフェイスが公開されていて、すべてソースやサンプル付で公開されていますので、自分のWEBサイトに組み込むことも可能です。今日は紹介されている物の中からいくつか気になったインターフェイスを紹介したいと思います。

詳しくは以下

(さらに…)

続きを読む
posted 09:57  |  
Category: WebDesign   
2009年10月03日

ポラロイドカメラフリーベクターデータ「Free Polaroid Vector EPS」

絶妙なアナログ感とちょっとしたおしゃれ感を演出してくれるポラロイドカメラ。グラフィックデザイン、WEBデザイン問わず良く利用されていますが、今回紹介するのはそんなポラロイドカメラの演出を簡単に作る事ができるポラロイドカメラフレームベクターデータ「Free Polaroid Vector EPS」を紹介したいと思います。

filmsozai

一般的なポラロイドカメラから、インクがこぼれだしたもの、つり下げられているものからちょっと汚したものなど、様々なポラロイドのベクターデータがセットで公開されています。

詳しくは以下

(さらに…)

続きを読む
posted 12:57  |  
Category: Design , vector   
tag: 

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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

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