HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem

2024/07/31 7 users スピナー アニメーション HTML カスタマイズ スピード

HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ... 続きを読む

GIFアニメーションの再生速度変更・モザイク処理・透過処理など多数の編集が可能な「Online GIF Tools」

2022/01/03 90 users GIFアニメーション 透過処理 モザイク処理 再生速度変更

連続した画像ファイルで一連の動きが付けられたアニメーションGIFを切り取ったり、明るさを変えたりといった編集が可能なオンラインツールが「Online GIF Tools」です。ブラウザで動作するこのGIF編集ツールを実際に使ってみました。 Online GIF Tools - Simple, free and easy to use GIF utilities https://onlinegift... 続きを読む

動画や映像、アニメーションGIFの背景を自動分析し、背景だけを削除できる無料オンラインツール -Unscreen | コリス

2020/03/13 5 users WebM コリス グリーンスクリーン 背景 映像

.mp4、.webmの動画や映像、アニメーションGIFの背景を自動分析し、背景だけを映像から削除できる無料オンラインツールを紹介します。 通常はグリーンスクリーンで撮影しないと背景を削除できませんが、簡単に背景のない映像を作成できます。 Unscreen Unscreenは、動画や映像から背景を削除できるオンラインツールです。... 続きを読む

node-canvasでアニメーションGifをつくって遊ぶぞ！

2020/02/11 7 users フロントエンドエンジニア LINE KYOTO 普段 東京

node-canvasでアニメーションGifをつくって遊ぶぞ！ 1. node-canvasで アニメーションGifをつくって遊ぶぞ！ 関西Node学園 LINE Kyoto 2018.08.03 2. @kawasako3 LINE株式会社 UIT室 Front-end Standardization Team いわゆるフロントエンドエンジニアなので Node.js詳しいかと言われると微妙 普段は東京にいます 3. 今... 続きを読む

200以上のアニメーションアイコンが無料ダウンロードできる「Animated - エンジニア・プログラマのソーシャルITメディア

2019/10/07 8 users ライブラリ アニメーション プログラマ ソーシャルアイコン

◆ Animated Icons https://icons8.com/animated-icons 紹介 「Animated Icons」は、アニメーションGifを無料ダウンロードできるライブラリです。 アイコンは全てミニマルで統一されており、Webサイトのデザインを問わず使えるものばかり。 ソーシャルアイコンも複数用意され、気に入ったアニメーションに合わせて使い分... 続きを読む

この発想はすごい！アニメーションgifの再生・停止をコントロールできるJavaScriptライブラリ -Freezeframe.js | コリス

2019/06/26 191 users トリガー スクリプト タップ コリス 操作

アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freeze... 続きを読む

Photoshopで動画ファイルからGIFアニメを作る完全ガイド | ギズモード・ジャパン

2019/03/30 26 users Photoshop ギズモード mayumine ジャパン

Photoshopで動画ファイルからGIFアニメを作る完全ガイド2019.03.30 20:00 Andrew Liszewski ［原文］ （ mayumine ） 動画からGIFアニメーションをガチで作りたい方へ。 30年以上昔の太古から存在する画像フォーマットにもかかわらず、いまだに全世界のインターネットでアニメーションGIFは愛され続けています。イラスト... 続きを読む

賞金の出る4択クイズゲームを隠しカメラとOCRで解くプロジェクト | 秋元@サイボウズラボ・プログラマー・ブログ

2018/09/21 14 users OCR GitHub 秋元@サイボウズラボ プログラマー 賞金

イギリスのパブなどに置いてあるゲーム機に、クイズを解き続けることで勝ち進み、最後は賞金が出るものがあるそうです。 GitHub に公開されたこちらのリポジトリでは、そのトリビアクイズ機を解いてしまう支援ツールが公開されています。 こちらのアニメーションgif でプレイしている様子が見られますが、質問文と、4択... 続きを読む

GIFPop - アニメーションGIFを最適化 MOONGIFT

2018/06/05 18 users MOONGIFT FPS 難点 メイン画面 WEB上

最近アニメーションGIFが使われる場面が増えていますが、難点としてサイズが大きくなりがちという問題があります。特に動画からアニメーションGIFに変換した場合、FPSが高すぎたりしてWeb上に貼るのに向きません。 そこで使ってみたいのがGIFPopです。アニメーションGIFを手軽にリサイズできます。 GIFPopの使い方 メイン画面です。 アニメーションGIFを指定して、サイズや最適化プログラムを指... 続きを読む

ImageMagickでliquid rescaleする - hitode909の日記

2018/05/09 226 users Liquid ImageMagick Usage 挙動 帽子

2018 - 05 - 09 ImageMagickでliquid rescaleする ImageMagickのリサイズまわりの挙動を調べてたら異常なアニメーションGIFが掲載されいているのを発見して，その瞬間に調べ物はどうでもよくなった． 領域が狭くなると，文字が帽子の上に周りこんでいる． http://www.imagemagick.org/Usage/resize/#liquid-resca... 続きを読む

イーノックやルシフェルのアニメーションgifをシェアできる。「エルシャダイ」のチャンネルがGIFMAGAZINEに登場 - 4Gamer.net

2018/04/03 8 users GIFMAGAZINE エルシャダイ ルシフェル イーノック

イーノックやルシフェルのアニメーションgifをシェアできる。「エルシャダイ」のチャンネルがGIFMAGAZINEに登場 編集部：早苗月 ハンバーグ食べ男 GIFMAGAZINEは本日（2018年4月3日），アニメーションgifの投稿・共有サイト 「GIFMAGAZINE」 において， 「El Shaddai -エルシャダイ-」 （ PS3 / Xbox 360 ）とコラボレーションした公式チャンネ... 続きを読む

Windows 10が「HEIF」フォーマットの画像表示に対応 - PC Watch

2018/03/19 54 users HEIF HDR 格納 フォーマット アルファ

米Microsoft は16日、Windows 10 Insider向けに配信開始したPreview Build 17623にて、「High Efficiency Image File (HEIF)」形式の画像フォーマット対応を発表した。 　HEIFは、アニメーションGIFのような画像シーケンス、複数写真の格納、アルファ/デプスマップのような補助画像、ライブイメージや動画、音声、HDRなどに対応し... 続きを読む

ドラッグ&ドロップするだけ！かなり高品質なアニメーションgifが誰にでも簡単に作成できる無料アプリ -Gifski | コリス

2018/03/07 51 users macOS用 フレームごと コリス 動画ファイル 数千

これは簡単操作なのにすごい高品質です！ フレームごとに数千の色を使用するアニメーションgifを動画ファイルをドラッグ&ドロップするだけで、簡単に作成できるmacOS用の無料アプリを紹介します。 Gifski Gi ...記事の続きを読む 続きを読む

スマホが変化させたあなたの利用シーン | デジマース ブログ

2018/01/22 10 users デジマース プロトタイピング メリハリ 色彩 スマホ

検索: カテゴリーから探す UI (30) UX (15) サービス (6) デザイン (26) プロトタイピング (4) 用語 (5) 画像 (16) 色彩 (2) 最近の投稿 スマホが変化させたあなたの利用シーン 新米デザイナーが作る！バナーの作り方 パッとしないレイアウトにはメリハリを 簡単！アニメーションgifの作り方 簡単！SNSで使えるスタンプ画像の作り方！★無料プレゼント付お正月ve... 続きを読む

新米デザイナーが作る！バナーの作り方 | デジマース ブログ

2018/01/15 23 users デジマース 新米デザイナー プロトタイピング バナー メリハリ

検索: カテゴリーから探す UI (30) UX (14) サービス (6) デザイン (26) プロトタイピング (4) 用語 (5) 画像 (16) 色彩 (2) 最近の投稿 新米デザイナーが作る！バナーの作り方 パッとしないレイアウトにはメリハリを 簡単！アニメーションgifの作り方 簡単！SNSで使えるスタンプ画像の作り方！★無料プレゼント付お正月ver★ デザイントレンドとテクノロジー ... 続きを読む

簡単！アニメーションgifの作り方 | デジマース ブログ

2018/01/04 16 users デジマース アーカ プロトタイピング 作り方 ブログ

検索: カテゴリーから探す UI (30) UX (14) サービス (6) デザイン (24) プロトタイピング (4) 用語 (5) 画像 (15) 色彩 (2) 最近の投稿 簡単！アニメーションgifの作り方 簡単！SNSで使えるスタンプ画像の作り方！★無料プレゼント付お正月ver★ デザイントレンドとテクノロジー 色味で変わる！人に与える印象 2016-2017 ブログまとめテスト アーカ... 続きを読む

[CSS]ネコ好きにはたまらない！紐につかまった猫がぶらぶらするプリローダー -Cat Swinging on String | コリス

2017/09/19 29 users プリローダー コリス CSS CSSアニメーション ネコ好き

画像は一切無し、CSS+HTMLで実装された、紐につかまった猫がぶらぶらするCSSアニメーションを紹介します。 ページが読み込まれる時のプリローダーで、こんなのがあったらずっと見ちゃいますねｗ 上記のアニメーションgif ...記事の続きを読む 続きを読む

「Legend - Animate Text in Video gif」文字が動くアニメーションGIFを作成できるアプリが面白い！ - Apple Life

2017/09/08 17 users Legend appletksb JOY gif まいど〜

2017 - 09 - 08 「Legend - Animate Text in Video & gif」文字が動くアニメーションGIFを作成できるアプリが面白い！ GIF iPhone アプリ こちらからシェアをお願いします！ はてブする シェアする ツイートする シェアする あとで読む まいど〜！ JOY (@appletksb) です！ 文字を入力するだけで簡単に 文字が動くアニメーションG... 続きを読む

asciicast2gif - asciicastをアニメーションGIFに MOONGIFT

2017/07/17 9 users MOONGIFT README GitHub ASCI ケース

ターミナルの入力をそのまま記録、再現してくれるasciicastは便利なサービスですが、ブログなどに埋め込みたいと思ってもJavaScriptが許可されていないケースも多いでしょう。GitHubのREADMEもそうです。そうした時にリンクだけ貼るのでは面白くありません。 そこで使ってみたいのがasciicast2gifです。asciicastをそのままアニメーションGIFにしてくれます。 asci... 続きを読む

「GifCam」を使ってWindows画面上の動きをとても簡単にアニメーションGIFにする方法(動画も簡単にGIF化！) - カキタクナッタラ

2017/06/04 28 users カキタクナッタラ ニッチ d3_dayo GIF化 ネタ

2017 - 06 - 04 「GifCam」を使ってWindows画面上の動きをとても簡単にアニメーションGIFにする方法(動画も簡単にGIF化！) Windows PCハウツー アプリ この記事でも静かにニッチにパソコン系のお役立ち情報を書こうと思う でででーさん( @d3_dayo ) です！ 2つのブログで記事を定期的に書いていると、どうしても困ってくることが 記事のネタ ですΣ(´∀｀；... 続きを読む

[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt | コリス

2017/01/30 52 users jQuery GitHub tilt シャドウ グラデーション

カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。 CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。 Tilt.js -GitHub このアニメーションGIFは軽量化のためコマを落... 続きを読む

デザイナーなら誰もが知ってるグラフィックデザインの基本「スイススタイル」をCSSアニメーションで！ -Swiss in CSS | コリス

2016/01/20 102 users CSS アニメーション デモ ポスター コリス

デモを見ているだけで、クリエイティブな刺激がもらえる！そんな「Swiss in CSS」を紹介します。 ↓はアニメーションgifですが、実際のページはCSSのアニメーションで動いています。 Swiss in CSS ※アニメーションgifは、 Konstruktive Grafik Swiss in CSSはスイススタイルでデザインされたポスターをCSSアニメーションで再現されたもので、美しいタイ... 続きを読む

ThetaViewer.js - RICHO THETAの画像をアニメーションGIF化 MOONGIFT

2015/12/19 9 users RICHO MOONGIFT THETA デバイス 全天球写真

全天球写真、動画は大きな可能性を秘めていると思っています。その可能性を感じさせてくれるデバイスの一つがRICHO THETAです。最新機種では1080pに対応し、高画質な動画を作成できるようになっています。 そんなRICHO THETAで撮影した写真をアニメーションGIFで楽しめるのがThetaViewer.jsです。つまり全天球アニメーションGIFです。 ThetaViewer.jsの使い方 T... 続きを読む

CSSのすぐに使える小技から驚きのスゴ技まで！CSSアニメーションの素晴らしいアイデアのまとめ | コリス

2015/11/17 369 users デモ テクニック コリス ゲームボーイ 進化

ここ2, 3年、CSSアニメーションの進化がすごいですね！ 次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか！という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。 Animated Gameboy in CSSのデモのアニメーションGIF まずは、CSSで作られたゲームボーイ。 上はデモをアニメーションGIFにしたものですが、下は生HTMLと... 続きを読む

GIFの作り方♪　PS - エディットマンの編集旅路

2015/10/19 17 users gif 編集旅路 作り方 バナー マイブーム

2015-10-20 GIFの作り方♪　PS フォトショップ（Ps） 今日は、GIFデータがマイブームだったので 記事にしてみました。 こんな感じのアニメーションGIFの作り方を 私なりの方法の説明をします。 私は、フォトショップCC2015を使用してますので 他のバージョンで、同じ方法で出来るかは 分かりません。 なので参考ぐらいで、気楽に読んで下さい。 まずは、バナーにしたい動画を準備して下さ... 続きを読む