最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
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ファイルでア
YouTube Data API v3を使用して、YouTubeページと同じリストモジュールを作ってみた【LIGアドベントカレンダー20日目】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 こちらはLIGアドベントカレンダーの20日目の記事です。 LIGアドベントカレンダー2019は こちら！ 今回は、YouTube Data API v3を使って、YouTubeページと同じリストモジュールを再現してみたいと思います。 YouTube Data APIとは YouTubeが提供しているAPIで、動画やチャンネル、再生リストに関わる情報を取得して、自分のWebサイトやアプリケーションで使用することができます。 公式のドキュメントが用意されているので、詳しくはこちらをご覧ください。 https://developers.google.com/youtube/v3/getting-started?hl=ja 今回やること 動画URLの取得 サムネイルの取得 タイトルの取得 チャンネル名の取得 チャンネルURLの取得 再生回数の
無料で高度なムービー編集やBGM・SE載せがスマホだけでできる編集アプリ「GoPro Splice」で動画を編集してみました
カメラだけでなくモバイル機器での編集アプリに力を入れているGoProは2016年5月4日、スマホだけで写真と映像を組み合わせたオリジナルムービーが作れるアプリ「GoPro Quik」と同時に、まるでPCのような高度な編集をスマートフォン上で行うことが可能というアプリ「Splice」をリリースしました。GIGAZINEでは「GoPro Quik」をすでにレビュー済みなので、今回はより本格的な編集ができるという「Splice」を使ってみることにしました。 Splice Video Editor by GoPro https://spliceapp.com/ ◆Spliceでできること Spliceはスマートフォンやタブレット上だけで映像を編集して完成させることが可能なアプリです。GoProで撮影した動画や写真はもちろん、スマートフォンに入っている動画/写真、さらにFacebookなどのSNSや
[JS]面白いコンテンツが作れそう！動画とCSS3アニメーションを同調させるスクリプト -charlie.js
ダウンロードできるデモファイル ローカル環境でデモファイルを見る時は、Chromeでは「file://」で読み込むとフレームレートの変更する時のバグがあるため動作しません。オンラインかFirefoxでご覧ください。 実装は、詳しいドキュメントが公開されていませんが、コードを見ると簡単にできそうです。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="charlie.js"></script> Step 2: HTML まずは、動画をvideo要素で配置。 <video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" muted> <source id="mp4" src="http://media.w3
SlideShare等にあるスライドを動画とシンクロさせるJavaScriptライブラリ・Presentz
自分では多分使わないと思います けど、技術が凄いなーと感じたの でご紹介。よくあるスライドを、 YoutubeやVimeoなどの動画にシン クロさせる、というライブラリ だそうです。 自分で動作テストしたわけじゃないので紹介だけ。スライドと、そのスライドを紹介する動画をシンクロさせ、動画を再生すると同時にスライドを自動で進行させる、というライブラリ。うまく説明できませんのでデモを見たほうが早いです。 Webサービスになっていますが、ソースも公開されています。node.jsを使ってるみたいですね。 動画を再生すると、その動画中で紹介してる箇所をスライドも表示、動画が進むとスライドも次ページに移動してくれる、というもの。 将来、学校の授業もこんな感じになるんだろうか・・以下で動作デモを確認出来ます。ライブラリのライセンスはGPLとの事。使い方は確認してないので割愛します。 Presentz
HTML5動画に字幕が付けられるjQueryプラグイン「Cuepoint.js」:phpspot開発日誌
Cuepoint.js. A plugin for HTML5 video cuepoints and subtitles HTML5動画に字幕が付けられるjQueryプラグイン「Cuepoint.js」 ムービーの上に字幕を簡単なコードで付けることができちゃいます。 JavaScriptの連想配列で次のように定義して初期化するというシンプルな使い方が可能です。これはカンタンですね。 cuepoint.setTime(60); とかでムービーをスキップ出来たりもするみたい。 関連エントリ CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「MediaElement.js」 MooTools用のHTML5動画プレイヤー「Moovie」 スキンが利用可能なHTML5動画プレイヤー実装jQueryプラグイン「FryPlayer」 HTML5な動画プレイヤー色々2011
HTML5で実装する動画コンテンツに字幕を付けるライブラリ・Cuepoint JS
なかなかユニークだったのでメモがてら。 HTML5で実装する動画コンテンツに字幕 を加える、というjsライブラリです。思いつき ませんでしたけど、こう言うことも出来てし まうんですね・・・HTML5ってやっぱり凄い かも・・（今さらですけどｗ なかなか面白い発想ではないですかね。動画そのものにいれるのが一般的ですけど、簡単なものでいいならこの方法も有りかなと。 上部にHTMLでキャプションが入っています。再生すると、動画が進み、場面に応じてテキストが分かります。 時間がたつと別のメッセージが表示されます。 キャプションの埋め方$(document).ready(function(){ //Slides object with a time (integer) and a html string var slides = { 0: "This is the first subtitle. Y
PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル:phpspot開発日誌
Photobooth with PHP, jQuery and CSS3 | Tutorialzine PHP＆jQuery＆CSS3でMacのPhotoboothを作るチュートリアル。デモのダウンロードも可能。 デモページはこちらで、なかなかカッコいい。 ページの下部にカメラがあり、クリックするとWEBCAMのFlashインタフェースが開き、写真をとってそのままUPみたいな流れのものが作れます。 カメラ付きのMacbookやAirでも当然使えます。 下部のレンズのクリックでカメラが出ます（当PCにはカメラがついていないので何も表示されておりません） 画像をクリックするとLightBox風にポップアップします。 チュートリアルのわりにチュートリアルらしからぬクオリティ。 これを応用してプロフィール写真の撮影等、サービスに応用してみてもよさそうですね。 関連エントリ CSS3で実装されたボタ
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」:phpspot開発日誌
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 2011年03月10日- Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは？というもので一見の価値はあります。 独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。 TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。 映像の位置を地図で別ブロックに表示する例 ビデオ
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」:phpspot開発日誌
jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」 2010年07月06日- Plugins | jQuery Plugins jQuery＆HTML5＆CSSでリッチな動画プレイヤー実装jQueryプラグイン「osm player」。 次のようなリッチな動画プレイヤーがノンFlashで実装できるプレイヤーです。HTML5非対応ブラウザ用にFlashでフォールバックも可能。 Youtube、vimeoの埋め込みもOKです。 jQuery UI Theme-Roller を使ってテーマの変更も容易だそうです。 HTML5の動画プレイヤーは色々出てますが選択肢のひとつとして覚えておいてもよさそうですね。 関連エントリ CSSでスキン作成が可能なHTML5動画プレイヤー実装JSライブラリ「Video JS」 HTML5で動画や音声再生を可能
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Youtube動画にマウスホバーでSNSへのシェアボタンを表示させる