こんな無料素材があったとは！ページの背景いっぱいに表示するアニメーションの動画素材 -Vidlery
Post on:2017年1月31日
sponsors
Webページの背景いっぱいにアニメーションの動画を配置できる、動画素材とコードを紹介します。動画素材は個人でも商用でも無料で利用できます。
動画の上にはオーバーレイで、さまざまなコンテンツを配置することも可能です。
Vidleryのアニメーション素材
Vidleryでは数多くのアニメーション素材が揃っています。
ライセンスはすべてCC0 1.0で、個人・商用ともに無料で利用できます。
Vidleryの使い方
Step 1: アニメーションのダウンロード
各アニメーションをクリックすると、モーダルウインドウが表示されるので、「Download」をクリックしてダウンロードします。
「Download」をクリック
Step 2: ファイルのアップロード
ダウンロードしたファイルを解凍し、ファイルをすべて利用するサーバーにアップロードします。
- .jpg
- .mp4
- .webm
Step 3: ページに実装
下記のコードをファイル・パス名を変更して、記述します。
|
1 2 3 4 5 6 7 8 9 |
<div class="homepage-banner"> <div class="animation-container"> <div class="mask"></div> <video autoplay loop class="fillScreen" poster="URL_PATH_TO_JPEG"> <source src="URL_PATH_TO_MP4" type="video/mp4" /> <source src="URL_PATH_TO_WEBM" type="video/webm" />Please upgrade your browser, it does not support the video tag. </video> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.homepage-banner { border-right: none; border-left: none; position: relative; } .no-video .animation-container video, .touch .animation-container video { display: none; } .no-video .animation-container .animation, .touch .animation-container .animation { display: block !important; } .animation-container { position: relative; bottom: 0%; left: 0%; height: 100%; width: 100%; overflow: hidden; background: #000; } .animation-container .animation img { width: 100%; bottom: 0; position: absolute; } .animation-container .mask { z-index: 100; position: absolute; background: rgba(0, 0, 0, 0.4); width: 100%; } .animation-container video { position: absolute; z-index: 0; bottom: 0; } .animation-container video.fillScreen { width: 100%; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
//このコードを実行するにはjQueryが必要です $( document ).ready(function() { scaleAnimationContainer(); initBannerAnimationSize('.animation-container .animation img'); initBannerAnimationSize('.animation-container .mask'); initBannerAnimationSize('.animation-container video'); $(window).on('resize', function() { scaleAnimationContainer(); scaleBannerAnimationSize('.animation-container .animation img'); scaleBannerAnimationSize('.animation-container .mask'); scaleBannerAnimationSize('.animation-container video'); }); }); function scaleAnimationContainer() { var height = $(window).height() + 5; var unitHeight = parseInt(height) + 'px'; $('.homepage-banner').css('height',unitHeight); } function initBannerAnimationSize(element){ $(element).each(function(){ $(this).data('height', $(this).height()); $(this).data('width', $(this).width()); }); scaleBannerAnimationSize(element); } function scaleBannerAnimationSize(element){ var windowWidth = $(window).width(), windowHeight = $(window).height() + 5, animationWidth, animationHeight; console.log(windowHeight); $(element).each(function(){ var animationAspectRatio = $(this).data('height')/$(this).data('width'); $(this).width(windowWidth); if(windowWidth < 1000){ animationHeight = windowHeight; animationWidth = animationHeight / animationAspectRatio; $(this).css({'margin-top' : 0, 'margin-left' : -(animationWidth - windowWidth) / 2 + 'px'}); $(this).width(animationWidth).height(animationHeight); } $('.homepage-banner .animation-container video').addClass('fadeIn animated'); }); } |
sponsors
