Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]固定背景/スムーススクロール/追従ボタン/Twitter組み込み

jQuery

jQueryを利用した縦長シングルページの作成

  • 固定背景→bodyに背景画像を設定、ページサイズが変動してもつねに中央に前面表示される
  • スムーススクロール→スピードを設定できるスクロール jQuely
  • 追従ボタン→position:fixedで作成
  • 追従ボタンを一定の高さでフェードイン/フェードアウト→jQueryでスクロール値を取得→.scrollTop（トップからのピクセルの値を調べる）
  • Twitter組み込み→Twitter管理画面からウィジェットを利用

f:id:akatonbo_web:20150611193753j:plain

HTMLソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>固定背景</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
/* スムーススクロール */
$(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;
   });
});
/* スクロールがトップから100pxに達したらボタンを表示する */
$(function(){
  var topBtn = $("#toTop");
   topBtn.hide();
   $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
           topBtn.fadeIn();
       }else{
           topBtn.fadeOut();
       }
   });
});
</script>
<body>
<div id="container">
<div id="header">
<h1><a href="#bottom">下部へ移動</a></h1>
</div>
<div id="middle">
<div id="left">
  <div class="box"></div>
  <div class="box"></div>
</div>
<div id="right">
  <div class="box">            <a class="twitter-timeline"  href="https://twitter.com/seiburailway" data-widget-id="608923373863751680">@seiburailwayさんのツイート</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
          </script>
  </div>
</div>
</div>
<div id="footer">
  <div class="box"></div>
</div>
</div>
<div id="bottom">
  <div class="box"><p>フッター情報です</p></div>
</div>
<p id="toTop"><a href="#header"><img src="img/top.png" alt=""></a></p>
</body>
</html>

CSSソース

@charset "UTF-8";

/* reset */
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:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/* body */
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: 960px;
  margin: 0 auto;
}

/* header */
#header {
  width: 960px;
  height: 300px;
  background-color: rgba(255,255,255,0.3);
  border:10px solid #FFF;
  border-radius:10px;
  box-sizing: border-box; /*ボーダーを内側に入れる*/
  margin-bottom:20px;
}
#header h1 {
  color:white;
  text-align:center; 
  margin-top:30px;
}

/* middle */
#middle{
  overflow: hidden;
}
#left{
  width: 440px;
  float:left;
}
#right{
  width: 500px;
  float:right;
}
.box{
  height: 200px;
  background-color: rgba(255,255,255,0.3);
  margin-bottom:20px;
}

/* twitter */
#right .box{
  height: 420px;
}
#footer .box{
  height: 1000px;
}
#bottom .box{
  clear:both;
  height:60px;
  background-color:#111;
  margin-bottom:0;
}
#bottom .box p{
  color:white;
  text-align:center;
  line-height: 60px;
}

#toTop{
  position: fixed;
  bottom: 40px;
  right: 40px;
  background: url(img/top.png) no-repeat;
}

yachin29.hatenablog.com