webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

動画を背景にしたサイト演習

動画を背景にスプリットレイアウトを作成しましょう。


index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>動画を背景にする</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flexslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/script.js"></script>
<script>
//flexsliderの記述
$(function(){
	// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
})

</script>
</head>

<body id="top">
<div id="container">
<header>
<h1>ロゴ</h1>
<nav>
<ul class="menu">
<li><a href="#content1">コンテント1</a></li>
<li><a href="#content2">コンテント2</a></li>
<li><a href="#content3">コンテント3</a></li>
<li><a href="#content4">コンテント4</a></li>
</ul>
</nav>
</header>

<div id="video-wrapper">
<video id="vdo" autoplay loop muted>
<source src="img/1221.mp4" type="video/mp4">
</video>
</div>

<div id="content">
<div class="flexslider" id="content1">
<h2>コンテント1</h2>
<ul class="slides">
<li><img src="img/01.jpg" /></li>
<li><img src="img/02.jpg" /></li>
<li><img src="img/03.jpg" /></li>
</ul>
</div>

<div class="txt-box" id="content2">
<h2>コンテント2</h2>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃した</p>
</div>

<div class="gallery" id="content3">
<h2>コンテント3</h2>
<ul>
<li><a href="#"><img src="img/list01.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list02.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list03.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list02.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list03.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list01.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list03.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list01.jpg" alt=""></a></li>
<li><a href="#"><img src="img/list02.jpg" alt=""></a></li>
</ul>
</div>

</div><!--/#content-->
</div><!--/#container-->


<footer id="content4">
<div class="info-box">
<dl class="info">
<dt>会社名</dt><dd>株式会社矢島企画</dd>
<dt>住所</dt>
<dd>〒171-0022
東京都豊島区南池袋2-12-9
KKビル4F</dd>

<dt>資本金</dt><dd>100,000,000円</dd>
<dt>グループ会社</dt>
<dd class="group">グループ会社A</dd>
<dd class="group">グループ会社B</dd>
<dd>グループ会社C</dd>

<dt>従業員数</dt><dd>2332名(連結含む)</dd>
</dl>
</div>




<div id="map_wrapper"></div>
<p class="footer-copy">
<small>&copy; FELICA ○○○○</small>
</p>
<p class="to-top"><a href="#top">トップに戻る</a></p>
</footer>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWT-CikRH07_vpRAvlpBwGyLSwx7KtccQ"></script>
<script src="js/map.js"></script>
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

html,body,video,h1,h2,p,ul,li,dl,dt,dd {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
img {
  vertical-align:bottom;
}
#container {
  overflow:hidden;
}
h1 {
  width:100%;
  height:200px;
  background:#F96;
}
.menu li {
  width:100%;
  height:calc((100vh - 200px) / 4);
}
.menu li a {
  display:block;
  width:100%;
  text-align:center;
  line-height:calc((100vh - 200px) / 4);
  color:#222;
  font-size:14px;
  position:relative;
 
}
.menu li:nth-child(-n + 3) a {
  border-bottom:1px solid #222;
}
.menu li a::before {
  display:block;
  content:"";
  width:100%;
  height:calc((100vh - 200px) / 4);
  background:#CCCCCC;
  position: absolute;
  top:0;
  left:-150%;
  transform:skewX(40deg);/*四角を斜めにする*/
  z-index:-1;
  transition:0.15s linear;
}
.menu li a:hover::before {
  display:block;
  content:"";
  width:100%;
  height:calc((100vh - 200px) / 4);
  background:#CCCCCC;
   transform:skewX(0);/*斜めにした四角を0°に戻す*/
  position: absolute;
  top:0;
  left:0;
  z-index:-1;
}
#video-wrapper {
  width:100%;
  height:100vh;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
}
#vdo {
  min-width:100%;
  min-height:100%;
}
header {
  width:100px;
  height:100vh;
  background:#FF3399;
  float:left;
  position:fixed;
  top:0;
  left:0;
}
#content {
  width:50%;
  margin:20px 20px 100px 0;
  background:rgba(255,255,255,0.50);
  float:right;
}
h2 {
  font-size:20px;
  padding:20px;
}
#content p {
  line-height:1.8;
  padding:10px 60px;
  margin-bottom:60px;
}

/*ギャラリー部分*/
.gallery ul {
  overflow:hidden;
}
.gallery li {
  width:33.33%;
  float:left;
  overflow:hidden;
}
.gallery li img {
  max-width:100%;
  transition:0.1s linear;
}
.gallery li:hover img  {
  transform:scale(1.1);
}





footer {
  width:100%;
  background:#eee;
  padding-top: 20px;
  box-sizing:border-box;
  overflow:hidden;
}

/*会社概要*/
.info-box {
  width:calc(50% - 160px);
  height:400px;
  float:left;
  margin-left:120px;
  margin-bottom:20px;
  padding-left:20px;
}
dl.info {
  padding-right:40px;
}
.info dt {
  float:left;
  font-weight:bold;
  margin-bottom:20px;
}
.info dd {
  padding-left:30%;
  margin-bottom:20px;
  border-bottom:1px solid #222;
  padding-bottom:5px;
}
.info dd.group {
  margin-bottom:10px;
  border-bottom:none;
}






#map_wrapper {
  width:50%;
  margin-right:20px;
  margin-bottom:20px;
  height:400px;
  background:#0099FF;
  float:right;
}
.footer-copy {
  width:100%;
  height:80px;
  text-align:center;
  line-height:80px;
  clear:both;
}
/*トップに戻るボタン*/
.to-top {
  width:100px;
  height:60px;
  background:#FFFFFF;
  border:3px solid #000;
  position:fixed;
  right:5%;
  bottom:30px;
  z-index:9999;
}
.to-top a {
  display:block;
  width:100%;
  text-align:center;
  line-height:60px;
  font-size:14px;
  color:#222;
}

Javascript

// JavaScript Document

//スムーススクロールの記述
$(function(){
	$('p.to-top').hide();
	  $(window).scroll(function (){
  if ($(this).scrollTop() > 200) {
		$('p.to-top').fadeIn();
	}else{
		$('p.to-top').fadeOut();
	};
  });

	   // #で始まるアンカーをクリックした場合に処理
   $('a[href^="#"]').on('click',function() {
      // スクロールの速度
      var speed = 300; // ミリ秒
         // 移動先を取得
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - 20;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
   });
})