Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo
/* Scrolleo - make your video scroll with inertia * MIT License - by Mark Teater */ (function(window, document, undefined) { "use strict"; var _Scrolleo = function(opts) { // Defaults this.acceleration = 0.08; //1 is fastest, 0 is slowest, 0.08 is default this.secondsPerScreen = null; //Set this to the length of the video. "1" is 1 second. this.additionalOffset = 0; //Add or subtract pixels to whe
画面を斜めに分割して2つの動画を表示する
Result 画面を斜めに分割して動画を2つ同時に再生するサンプルです cssbody { background-color: black; overflow:hidden; } .parent { position: relative; height: 100vh; width: 100vw; } .video { position: absolute; top: -8px; left: -8px; width: 100%; height: 100vh; background-position: center; background-size: cover; overflow: hidden; } .clip-video { clip-path: polygon(99.9% 0, 0 99.9%, 0 0); } .clip-video-reverse { clip-path: poly
CSSだけで全画面の背景動画を実装する方法 | TechMemo
CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。 なお、動画は別途ご用意いただく必要があります。 HTMLでは、videoタグで動画を設置します。記述する場所は、</body>の直前など、どこでも構いません。 <video autoplay loop poster="images/bg.png" id="video-background" muted> <source src="movie/bg.mp4" type="video/mp4"> </video> video要素に#video-backgroundを指定しておきます。 CSSでは、以下のように記述します。 #video-background { position: fixed; left: 0; top: 0; mi
[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js
動画を背景としてブラウザいっぱいに、もしくは指定したコンテナいっぱいに配置するレスポンシブ対応の単体で動作する軽量スクリプトを紹介します。 Bideoはおそらく、Background Videoの略でしょうかね。
![[JS]簡単で高性能！動画を背景としてブラウザやコンテナいっぱいに配置するレスポンシブ対応の軽量スクリプト -Bideo.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/442270a5803a50e9c86fc69781ff5060493cfb53/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016052501.png)
【動画ビギナー必見!】知っておきたい基本のサイズと構図 ：人物編
映像・動画を撮影する際に一番大切なのは、それを通して「何を伝えたいか、どのようなメッセージを伝えたいか」を考えることです。それによって被写体をどの大きさ、どの位置から撮るかの構成＝構図が変わってきます。 この記事では、特に人物を被写体にする際の、映像・動画制作の基本となる「サイズ・構図」と「構図を決める際に気をつけたい点」をご紹介します。 1.被写体の大きさ：画面サイズの種類 人物を被写体にして映像撮影をする際、意識したいのは画面サイズです。 映像における画面サイズとは、メインとなる被写体が画面内でどれくらいに収まっているか、つまり被写体の大きさのことを表し、引き（ヒキ）から寄り（ヨリ）までロングショット、ミディアムショット、アップショットの大きく３つに分けられます。 その３つを細かく分類したパターンを被写体から遠い順に6つご紹介します。 ロングショット ロングショットとは被写体の全身が写
[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js
デモ：Googleマップ Googleマップもサポート。 Embed.jsの使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.css"/> <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.embed.js"></script> </head> Twitterを埋め込む時には「widgets.js」、コードのシンタックスハイライトには「highlight.min.js」を使用します。 <head> ... <link rel="stylesheet" href="path/to/jquery.embed.
![[JS]これは便利！YouTubeの動画をはじめ、VineやTEDやCodePenやツイートやPDFやGoogleマップまで簡単にページに埋め込めるスクリプト -Embed.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/c7f1b78c4054290453044ec517a54e1f30348b63/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015041500.png)
チャート逆走...韓国での究極の成功事例から考える「観客のライブ撮影行為」 | しらべぇ
K－POP界隈で「チャート逆走」という現象が注目を浴びている。 新曲が出ると通常、発売直後にチャート上位圏にランクインし、時間が経過すると後退していくもの。しかし、2014年8月に発売されたある曲が、2014年の暮れからチャートを逆走しはじめ、2015年1月にはついにトップを飾ったのである。その主役は、「EXID」というガールズグループ。逆走のきっかけは、ファンがイベントで撮影した動画だった。 ■ファンの撮影動画が約800万回再生 韓国の音楽チャートは、日本人がイメージする「CDの売り上げ枚数」のランキングとは少し異なる。人々が注目するのは複数の人気音楽番組が発表するランキングであり、それらはデジタル音源サイトでのダウンロード（購入）やストリーミングの回数、CDの売り上げ、テレビでの放映回数、視聴者投票などといった要素を総合して算出されている。 EXIDが2014年8月に発売した楽
[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid
.mp4, .webm などの動画をブラウザいっぱいやセクションの背景として配置できるjQueryの超軽量（800bytes）プラグインを紹介します。 デモページ 単に要素内の背景として表示しているため、デモのようにスクロールエフェクトと組み合わせることも簡単です。 CoverVidの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="covervid.min.js"></script> </body> Step 2: HTML 動画を背景として表示する親要素、もしくはラッパーを配置します。 <div class="
![[JS]動画をブラウザいっぱいや指定サイズに背景として配置できる超軽量スクリプト -CoverVid](https://cdn-ak-scissors.b.st-hatena.com/image/square/9110ae5aaacb7e18964553e948fdad1f627eb39c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014111003.png)
Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」:phpspot開発日誌
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
スクリプト無し、動画をページの背景いっぱいに表示する方法
jQueryなどスクリプトは一切使わずに、HTML5+CSSで動画をウェブページの背景いっぱいに表示する方法を紹介します。 フルサイズのデモ IE8などHTML5のvideo要素に対応していないブラウザでは、代替の背景画像が表示されます。 実装は、非常にシンプルです。 HTML 動画はbody内の一番下にvideo要素で配置し、その上には通常通りコンテンツを配置できます。 <body> ... コンテンツ ... <!-- 背景に設置する動画 --> <video autoplay loop poster="http://mattgrossdesign.com/raw-media/first-frame-screencap" id="video-background" muted> <source src="http://mattgrossdesign.com/raw-media/wood
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
[SoundScape2013]Vol.02 DSLR撮影のための機材とは？ - PRONEWS : 動画制作のあらゆる情報が集まるトータルガイド
すでに使い慣れている方々はご存知のように、デジタル一眼レフカメラ＝DSLRは音声が弱点だ。これだけDSLR動画が普及しても、やはり基本は静止画撮影の為のカメラであり、動画機能は二の次、その為の音声機能は三の次！なのは仕方のないところだろう。そこをすっかり諦めてしまい、実際DSLRが流行ってからというもの、音の悪い作品が目立つのは嘆かわしい。せっかくの美しい映像が台無しだ。ここはなんとか他のサウンド収録機材を補って、音も美しく収録をしようという指向がここに来て少しずつ広がっている。 そこでまず知っておかなくてはいけないのがDSLRの弱点は何か？ということ。ただ単に「音が悪い」というだけでは何をどう補っていいのかも分からない。DSLR機の弱点とは、一言でいうとアナログ部分が貧弱なのである。一流の音響製品を作っているメーカーであってもやはり製品の価格には限度がある。その範囲内で本分である静止画撮
すらるど 「日本人は器用すぎる」日本発、小物デコレーションの手順を見た海外の反応
スライス・オブ・ワールド、略してすらるど。旧タイトル『海外の反応とか』。海外の反応をヘッポコな翻訳力で紹介しています。 wikipediaの『デコレーション携帯電話』を紐解くと、ネイリストがネイルアートの要領で携帯にペイントを施したものが始まりだとか。 今では”deco”は携帯だけでなく色んなものを飾りたてることを意味し、世界中にファンのいる、世界で通用する言葉となっています。 とある日本人がyoutubeにノートや小箱にデコを施す様子をアップロードし、人気となっていました。 Decoden Notebook, Box (Part1) (Inedible / can't eat) Decoden Notebook, Box (Part2) (Inedible / can't eat) ↓これらの動画につけられたコメント ●アメリカ 自分が子供の頃にこれを見たら食べようと頑張っただろうな…
200種類以上のメディア形式へ動画を変換できるフリーソフト「Video to video converter」
友人から渡された動画をPCで再生した際に映像が乱れて見られない場合でも、他の動画再生ソフトで問題なく動画を再生できるように、ドラッグ＆ドロップで簡単にメディアのフォーマット変換ができるフリーソフトが「Video to video converter」です。変換できるメディア形式はAVI、DivX、Xvid、MPEG-4、AVC/H264、MOV、WMV、3GP、3GP2、MKV、SWF、FLV、GIFなど。また、Apple製品やAndroid搭載スマートフォンなどに合わせての変換も簡単にできます。Windows 2000、XP、Vista、7上で起動可能。 ダウンロード、インストール、操作方法については以下から。 Download Video to Video Converter for Free http://www.videotovideo.org/download/ まず、200種類
向井秀徳さんらが制作 佐賀の魅力をPRする映像「THREE MINUTE TRIP TO SAGA」 - はてなニュース
佐賀県は2月14日、県の観光地や特産品などを紹介するプロモーションDVD「THREE MINUTE TRIP TO SAGA」の映像を、公式サイトやYouTubeで公開しました。コンセプトは「 『Avant-garde Country Side』～アバンギャルドな田舎、挑戦する田舎～」。制作スタッフのほとんどが佐賀出身のクリエイターで、映像では佐賀への“思い”や“愛情”を表現しているとのことです。 ▽ http://www.pref.saga.lg.jp/web/movie/3MINURE_TRIP.html ▽ THREE MINUTE TRIP TO SAGA （日本語版）- YouTube 「THREE MINUTE TRIP TO SAGA」は、佐賀の観光地や特産品などを国内外にアピールするために制作されました。前例や固定観念にとらわれない“アバンギャルド”な精神性を引き継ぎ、これ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
3年間に渡ってアフリカ全土をドローン撮影した映像が素晴らしい : 小太郎ぶろぐ
html5-memo.com