WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

ユーザビリティーを考えたjQuery

Webサイトを作る際には、ユーザーが迷うこと無く目的地に辿り着けるようなレイアウトや導線をしっかり考えます。
ユーザーがストレスを感じないように、ナビゲーションボタンの位置などにも気を配り、必要ならjQueryなどの動きをつけましょう。

今回の場合は

  • スライドをbxsliderで動かす。
  • ページ内リンクをスムーススクロールで動かす。
  • ナビゲーションがある程度スクロールすると固定になる。

の機能をつけます。

デモページ

スムーススクロール



index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロール</title>
<link rel="stylesheet" href="css/jquery.bxslider.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
 $('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});
});
</script>
<script>
//スムーススクロール
$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});
</script>
<script>
//ナビゲーションがスクロールすると固定になる
$(function() {
 var nav = $('#nav'),
 offset = nav.offset();
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top - 0) {
    nav.addClass('fixed');
  } else {
    nav.removeClass('fixed');
  }
    });
});
</script>
<style>
/* CSSリセット */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre,
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
  "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
  vertical-align: bottom;  /* 画像の下の隙間を無くす */
}


/*ページのスタイル*/
body {
  /* 画像ファイルの指定 */
  background-image: url(img/bg.png);
   
  /* 画像を常に天地左右の中央に配置 */
  background-position: center center;
   
  /* 画像をタイル状に繰り返し表示しない */
  background-repeat: no-repeat;
   
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
   
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
  background-size: cover;
   
  /* 背景画像が読み込まれる前に表示される背景のカラー */
  background-color: #464646;
}
#container {
  width: 800px;
  margin: 0 auto;
}
#box1 {
  width: 800px;
  height: 500px;
  background: rgba(240, 96, 96, 0.7);
}
#box2 {
  width: 800px;
  height: 500px;
  background: rgba(243, 181, 98, 0.7);
  padding-top: 70px;
}
#box3 {
  width: 800px;
  height: 500px;
  background: rgba(242, 235, 191, 0.7);
   padding-top: 70px;
}
#box4 {
  width: 800px;
  height: 500px;
  background: rgba(140, 190, 178, 0.7);
  padding-top: 70px;
  margin-bottom: 100px;
}
p {
  position: fixed;
  bottom: 50px;
  right: 100px;
}
ul#nav {
  width: 800px;
  overflow: hidden;
  height: 50px;
  list-style: none;
  border-top: 5px solid #FFF;
   border-bottom: 5px solid #FFF;
}
#nav li {
  width: 200px;
  float: left;
}
#nav li a {
  display: block;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-right: 5px solid #FFF;
  font-size: 24px;
  color: #FFF;
}
#nav li.top a {
  border-left:  5px solid #FFF;
}
.fixed {
  position: fixed;
  top: 0;
}
</style>
</head>
<body id="top">
<div id="container">
<div id="header">
<ul class="bxslider">
  <li><img src="img/01.png"></li>
  <li><img src="img/02.png" /></li>
  <li><img src="img/03.png" /></li>
</ul>
</div>
<ul id="nav">
<li class="top"><a href="#box1">box1</a></li>
<li><a href="#box2">box2</a></li>
<li><a href="#box3">box3</a></li>
<li><a href="#box4">box4</a></li>
</ul>
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
<div id="box4">box4</div>
</div>
<p><a href="#top">TOPに戻る</a></p>
</body>
</html>