ウェブサイトに透過動画を埋め込む方法 - ICS MEDIA
今ではサイト内に動画やアニメーションを利用することはそこまで特別なことではなくなりました。実はブラウザーや技術の進歩により最近は透明部分のある動画（アルファ付き動画）をサイト内に埋め込むことも可能になってきました。本記事では動画内容に応じた透過動画を、メリット・デメリットなどを交えながら、動画ファイルだけでなくさまざまな実装方法を紹介します。 記事前半では主に動画形式での実装方法を、後半ではアニメーション画像形式での実装方法を解説します。 サンプルを別ウインドウで開く コードを確認する ※デモの再生には通信量が多いため、モバイルデータ通信などを利用の方は注意ください。 コーデックとコンテナー まず、動画ファイルの仕組みである「コンテナー」と「コーデック」について簡単に説明します。 よく動画ファイルの拡張子に「.mp4」や「.mov」などを見たことがあると思います。これらはマルチメディアコン
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
【作例付き】WebデザインにおけるAdobe After Effects活用法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
今回は後編ということで、モーションデザインの作り方を実例を元に紹介していきたいと思います。実際のサイトに使うには色々足らないですが、After Effectsで制作する際のテクニックを交えて解説していきます。 この記事はこんな方におすすめです モーションデザインに興味がある Webサイトのアニメーションを自分で作ってみたいデザイナー After Effectsを触ってみたい また、制作にあたってこちらのサイトを参考にさせていただいております。様々なモーションの作例を周期表に見立てて紹介していて、ダウンロードもできるためどのように制作すれば良いかも見れるようになっています。 画像引用元：モーション周期表 Webデザインでモーションデザインを利用する機会 デザイナーがモーションデザインをWebデザインに取り入れる機会としては以下があるかなと思います。 デザインの提案 エンジニアとの共有 動画ま
Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
無料で動画ファイルをブラウザ上で簡単にアニメーションWebPに変換できる「Video2WebP」
ウェブサイトのトラフィック量を軽減するためにGoogleが開発している画像フォーマット「WebP」は、非可逆圧縮のJPEGや可逆圧縮のGIF、PNGへの置き換えが意図されており、APNGと同様にアニメーションに対応しています。WebP形式のアニメーションを使うべく、動画ファイルからアニメーションWebPへの変換をブラウザ上で行えるウェブアプリが「Video2WebP」を、実際に使ってみました。 Video2WebP https://video2webp.mattj.io/ 今回は焼き肉を焼く様子を撮影したMP4形式のムービーをアニメーションWebPに変換してみます。ムービーのファイルサイズは4.59MB、フレームサイズは560×420ピクセル、ビットレートは約1.5Mbps、フレームレートは29.97fpsです。 Video2WebPの「Select and convert」で「ファイルを
Spotlight.js - モダンなイメージギャラリー MOONGIFT
Webページで画像を並べて表示したいケースは良くあります。その際、クリックして単に画像を拡大表示するのでは面白くありません。浮かび上がるような演出だったり、アニメーションがUXを向上させます。 今回紹介するSpotlight.jsはモダンなイメージギャラリーになります。 Spotlight.jsの使い方 一覧表示の状態です。 クリックで拡大されます。 動画も利用できます。 情報を追加表示できます。 アニメーションなどは細かくカスタマイズできます。 Spotlight.jsは軽量さが売りとなっています。外部ライブラリへの依存もなく、Spotlight.js単独で手軽に利用できます。ズームインやアウト、自動再生、読み込み中のスピナーなど細かな部分に気が配られているのが好感です。 Spotlight.jsはJavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
動画や映像、アニメーションGIFの背景を自動分析し、背景だけを削除できる無料オンラインツール -Unscreen
.mp4、.webmの動画や映像、アニメーションGIFの背景を自動分析し、背景だけを映像から削除できる無料オンラインツールを紹介します。 通常はグリーンスクリーンで撮影しないと背景を削除できませんが、簡単に背景のない映像を作成できます。 Unscreen Unscreenは、動画や映像から背景を削除できるオンラインツールです。操作も非常に簡単で、動画や映像をUnscreenが100％自動的に分析するので、ピクセルを選択したり、カラーを選択したり、マスクをペイントしたりする必要はありません。 サポートする動画のフォーマットは、下記の通り。 .mp4 .mov .webm .ogg .gif（アニメーションGIF） ファイルサイズや解像度に上限はありませんが、大きなファイルや高解像度は処理に時間がかかります。出力形式は、アニメーションGIFとアニメーションPNGとシングルフレームで、将来的には
After Effects＋Photoshopでスプライトシートを作ってみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
※この記事はLIGアドベントカレンダー2018の23日目です。 こんにちは、フロントエンドエンジニアのはっちゃんです。 アニメーションを作る手法のひとつにスプライトアニメーションがあります。今回は、Adobe After Effects CC（以下：After Effects）で読み込んだ動画を静止画として書き出し、Photoshopでスプライトシートを作成してアニメーションさせるまでの手順をご紹介します。 After Effectsの操作 スプライトシートは、Animate CCでも書き出すことができますが、それと比べてもAfter Effectsは表現力やフィルターの数が優れているので、より高度なアニメーションを書き出すことができます。 今回使用する動画は以下です。自宅のガスコンロを6秒程度録画したものになります。 1.ファイルを読み込む プロジェクトパネルにファイルをドラッグ＆ドロッ
ドラッグ&ドロップするだけ！かなり高品質なアニメーションgifが誰にでも簡単に作成できる無料アプリ -Gifski
これは簡単操作なのにすごい高品質です！ フレームごとに数千の色を使用するアニメーションgifを動画ファイルをドラッグ&ドロップするだけで、簡単に作成できるmacOS用の無料アプリを紹介します。
こんな無料素材があったとは！ページの背景いっぱいに表示するアニメーションの動画素材 -Vidlery
Vidleryのアニメーション素材 Vidleryの使い方 Step 1: アニメーションのダウンロード 各アニメーションをクリックすると、モーダルウインドウが表示されるので、「Download」をクリックしてダウンロードします。 「Download」をクリック Step 2: ファイルのアップロード ダウンロードしたファイルを解凍し、ファイルをすべて利用するサーバーにアップロードします。 .jpg .mp4 .webm Step 3: ページに実装 下記のコードをファイル・パス名を変更して、記述します。 <div class="homepage-banner"> <div class="animation-container"> <div class="mask"></div> <video autoplay loop class="fillScreen" poster="URL_PAT
画面の動きをGIFアニメーションに変換する時に使える便利ツールいろいろ
2016年7月13日 JavaScript, 便利ツール 制作関連のブログのように作業の手順を紹介する時、Webサイトやアプリの動きを見せたい時、Webサービスの不具合を報告したい時…。画面に表示されているものや動きを言葉で説明するよりも、動画で説明した方が早い場合も多々ありますよね。短時間の動画ならGIFアニメーションにしてみてはいかがでしょうか？今回は画面キャプチャを録画し、自動でGIFアニメーションに変換してくれる便利なツールを紹介します。 ↑私が10年以上利用している会計ソフト！ 画面キャプチャからGIFに変換するツール GIPHY GIPHYは画面の動きを録画し、GIFに変換するためのMac用アプリ。無料で使えます。GIPHYのいいところは、なんと言っても動きが滑らか！そして繰り返し表示の設定や、動画の開始・終了ポイントの編集、キャプション（英数字のみ）まで加えられます。ただ、滑
face to gif - Webカメラを使って簡単にアニメーションGIF作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アニメーションGIFを作る方法は幾つかありますが、多くの場合は動画を用意して、それを変換して作成します。すでに動画があればいいですが、イチから作成する際にスマートフォンを使ったりするのは面倒です。何よりスマートフォンは高画質なので動画のサイズが大きくなってしまいます。 そこで使ってみたいのがface to gifです。Webカメラを使うことでごく簡単にアニメーションGIFが作成できます。 face to gifの使い方 face to gifを表示したところです。Chromeなど、getUserMediaに対応したブラウザである必要があります。 レコードボタンを押して、停止すればアニメーションGIFが生成されます。 face to gifは外部の画像共有サービスにも投稿できます。W
FacebookライクなGIFアニメーションプレビュー「Facebook Like GIF Preview Using jQuery」
TOP > javascript , WebDesign > FacebookライクなGIFアニメーションプレビュー「Facebook Like GIF Preview Using jQuery」 動画はトラフィックを取られすぎてなかなか展開はできないけどなんとかしたいという思いから、動画部分をGIFアニメーションで代替して利用するというサイトを最近では見かけます。今日紹介するのはFacebookライクなインターフェイスでGIFアニメーションプレビューを実装できる「Facebook Like GIF Preview Using jQuery」です。 こちらはjQueryベースで制作されており、jQueryとライブラリ、CSSを読みこせて、HTMLとjsを追記するという形で、比較的簡単に実装が可能です。 詳しくは以下 GIFのマークをクリックするとGIFアニメーションがスタートし、再
動画から簡単に好きなサイズや長さのGIFアニメを作れる「Movie To GIF」
世の中にはサッカーのスーパープレー集やオモシロ動画など、さまざまな種類のムービーが存在します。そんなムービーの中から特に自分が気に入ったシーンだけをGIFアニメーションとして簡単に切り出すことができるのが「Movie To GIF」です。好きなシーンをGIFアニメに変換できるというだけでなく、GIFの解像度や色数も細かく指定できるので、高画質なものから軽くて取り扱いやすいものまで簡単に作成できます。 Movie To GIF - Free Movie To GIF Download http://en.zxt2007.com/video-tools/movietogif.html 「Movie To GIF」を使用するには上記のURLにアクセスして「Download Now」をクリック。 するとインストーラーのダウンロードが始まるので「ファイルを保存」をクリック。 保存された「moviet
Gridifier - アニメーションが格好良いグリッドライブラリ MOONGIFT
コンピュータ上の表現としてグリッドは非常によく使われます。Excelのような表計算ソフトウェアはよく使われますし、テーブルや表もよく使われる表現です。しかしWeb上ではテーブルではなく、スタイルシートを駆使したグリッドが人気になっています。 今回はグリッドのフィルタリング、並び替えが得意なGridifierを紹介します。一覧で表示する際などに活躍しそうです。 Gridifierの使い方 こちらはデモの画面です。色と名前が様々なグリッドが並んでいます。 カラーで絞り込みました。 名前でソート。 実際に操作しているところ。アニメーションが格好良いです。 Gridifierを使えば写真や動画、HTMLをグリッドで整然と並べつつ、ユーザの指定でフィルタリングしたり並び替えるようなUIが簡単に作れます。スマートフォンにも対応していますので多くの環境で動かせるでしょう。 GridifierはHTML5
無料でYouTubeのリンクやファイルからカンタンにGIFアニメを作成できる「GIF Maker」
YouTubeのURLをコピー＆ペーストしたり、手持ちのMP4ファイルなどをドラッグ＆ドロップすると、開始と終了の秒数を指定して瞬く間にGIFアニメーションを作ることができるウェブサイト「GIF Maker」を使ってみました。 GIF Maker - Video to GIF Creator Tools | Giphy http://giphy.com/create/gifmaker まずはGIFアニメーションにしたいYouTubeのページURLをコピーしておきます。 そのままGIF Makerを開いて、入力欄に貼り付ければOK。 すると、自動的にGIFアニメーションが生成・再生されます。 GIFアニメーションの下には「START TIME」と「DURATION」のバーがあるので、上のGIFアニメーションを見ながら、スタート位置にバーを合わせていきます。 スタート位置が決まったら、終了地点
重いGIFアニメを軽いムービーに変換してファイルを10分の1以下に圧縮して埋め込みもできる「Gfycat」
ファイルが巨大化してしまったGIFアニメファイルや、URLを指定したYouTubeの動画を軽量なwebm形式のムービーに変換してくれるサービスが「Gfycat」です。このサービスを使うと簡単にファイル形式の変換ができるほか、サイトやブログに埋め込むためのURLを取得することもできるようになります。 Gfycat - jiffier gifs http://www.gfycat.com/ ファイル変換を行うためには、まずページ右上にある「Upload」をクリック。 すると、ファイル選択用のダイアログが表示されます。「From Computer」タブにファイルを直接ドラッグ&ドロップするか、「browse」をクリックしてファイルを選択すればOKです。 または、「From URL」タブを選択し、YouTubeなどのURLをペーストして「Fetch」をクリックすることでも変換を開始することが可能で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Animockup - iOS/macOSデバイスに動画を当てはめてモックアップ作成 MOONGIFT
Appealing | Mobile UI Animations
