求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

CSS3のアニメーションを使ったスクロールナビゲーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Scroll Fixed Navigation</title>
<meta name="viewport" content="width=device-width">
<style>
html,body,h1,p,ul,li {
  margin: 0;
  padding: 0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color: #0b8793;
}


body {
  background: #CCC;
}
#content {
  height: 1000px;
  margin: 100px auto;
  text-align: center;
  line-height: 1.9;
}
#content p {
  margin-bottom: 1em;
}
#main-visual {
  background: #1d76a6;
  background: linear-gradient(90deg, #360033 10%, #0b8793 90%);
  height: 700px;
}
footer {
  padding: 30px;
  text-align: center;
  background:#BBB;
}
footer a {
color: #666;
}

.inner {
  width: 980px;
  margin: 0 auto;
}
.inner:after {
  display: block;
  content: "";
  clear: both;
}

		/* header */
#top-head {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0 0;
  z-index: 999;
}
#top-head:after {
  display: block;
  content: "";
  height: 1px;
  background: #fff;
  width: 980px;
  margin: 30px auto 0;
}
#top-head a, #top-head {
  color: #fff;
}
#top-head .inner {
  position: relative;
 }
#top-head .logo {
  float: left;
  font-size: 32px;
  margin-left: 25px;
}
#global-nav ul {
  list-style: none;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
}
#global-nav ul li {
  float: left;
  position: relative;
}
#global-nav ul li a {
  padding: 0 30px;
}

		/* Btn Hover */
#global-nav ul li:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 3px;
  bottom: -20px;
  transition: all 0.3s ease;
}
#global-nav ul li:hover:after {
  background: #fff;
  bottom: -30px;
}

		/* Fixed */
#top-head.fixed {
  padding-top: 15px;
  background: #fff;
  background: rgba(255,255,255,.7);
}
#top-head.fixed .logo {
  font-size: 24px;
  color: #333;
  margin-left: 10px;
}

#top-head.fixed:after {
  width: 100%;
  margin-top: 20px;
}
#top-head.fixed #global-nav ul li a {
  color: #333;
  padding: 0 20px;
}

		/* Fixed Btn Hover */
#top-head.fixed #global-nav ul li:after {
  bottom: -10px;
}
#top-head.fixed #global-nav ul li:hover:after {
  background: #0b8793;
  bottom: -20px;
}

		/* transition */
#top-head,#top-head:after,#top-head .logo,#global-nav ul li,#global-nav ul li a {
  transition: all 0.3s ease;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
	<script>
			$(function() {
				var $header = $('#top-head');
				$(window).scroll(function() {
					if ($(window).scrollTop() > 50) {
						$header.addClass('fixed');
					} else {
						$header.removeClass('fixed');
					}
				});
			});
	</script>
</head>
<body>
<header id="top-head">
<div class="inner">
<h1 class="logo">メインタイトル</h1>
<nav id="global-nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>
</header>
<div id="main-visual"></div>
<div id="content">
<p>コンテンツ部分です。</p>
</div>
<footer>
<p>フッターです!</p>
</footer>
</body>
</html>