[REQ_ERR: 405] [KTrafficClient] Something is wrong. Enable debug mode to see the reason. スクロールするとアニメーションして狭くなり固定するヘッダー | マイニチ!

キシコウイチロウのポートフォリオ&制作覚書

キシコウイチロウのポートフォリオ&制作覚書

  1. TOP ＞
  2. 制作覚書 ＞
  3. デザインコーディング ＞
  4. スクロールするとアニメーションして狭くなり固定するヘッダー

スクロールするとアニメーションして狭くなり固定するヘッダー

このサイトでも使っているヘッダーアクション。
スクロールすると色や大きさや配置などをアニメーションで変化させる方法です。
JAVAscriptでヘッダーの属性をスクロール前後で変化させて、CSSでそれぞれの仕様とアニメーション速度などを制御します。

DEMO

① header要素をHTMLで入力する。

HTML

<header>
  <ul class="wrap01 flatbox01">
    <li class="catch01">ポートフォリオ&制作覚書</li>
    <li class="btn01">お問合せ</li>
  </ul>
  <div class="wrap02 flatbox01">
    <div class="logo">LOGO</div>
    <ul class="flatbox01_right">
      <li class="menu">僕について<span>ABOUT</span></li>
      <li class="menu">作品集<span>WORKS</span></li>
      <li class="menu">製品覚書<span>MEMO</span></li>
      <li class="btn02">お問合せ</li>
    </ul>
  </div>
</header>

② Jqueryを読み込む。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

③ スクロールするとheader要素を任意クラスに置き換えるJAVAscriptコードを入力する。

ex) 100pxスクロールすると 「.header」 を 「.is-animation」 に置き換える

javascript

$(function() {
  var $win = $(window),
      $header = $('header'),
      animationClass = 'is-animation';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > 100 ) {
      $header.addClass(animationClass);
    } else {
      $header.removeClass(animationClass);
    }
  });
});

④ CSSでスクロール前とスクロール後の表示仕様を入力する。

スクロール前を 「.header」 スクロール前を「.is-animation」 に入力する。
transition 指定でアニメーションの仕様を入力する。

CSS

.flatbox01{
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:single;
  -moz-box-lines:single;
  -webkit-flex-wrap:nowrap;
  -moz-flex-wrap:nowrap;
  -ms-flex-wrap:none;
  flex-wrap:nowrap;
  justify-content:space-between;
  align-items: flex-start;
}
.flatbox01_right{
  display:-webkit-box;
  display:-moz-box;
  display:-ms-flexbox;
  display:-webkit-flex;
  display:-moz-flex;
  display:flex;
  -webkit-box-lines:single;
  -moz-box-lines:single;
  -webkit-flex-wrap:nowrap;
  -moz-flex-wrap:nowrap;
  -ms-flex-wrap:none;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items: flex-start;
}
header{
  position: fixed;
  top: 0;
    left: 0;
    width: 100%;
}
.wrap01{
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
  height: 100px;
  border-bottom: 1px solid #333;
}
.wrap02{
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
    height: 100px;
    padding-top: 65px;
}
.catch01{
  font-size: 10px;
  width: 150px;
  line-height: 100px;
  text-align: left;
}
.btn01{
  width: 100px;
  height: 100px;
  background-color: #fabe00;
  color: #fff;
  font-size: 14px;
  line-height: 100px;
  font-weight: 700;
  text-align: center;
}
header .btn02{
    display: none;
}
.logo{
  font-size: 28px;
  font-weight: 700;
}
.menu{
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  padding-left: 30px;
}
.menu span{
  font-size: 10px;
  display: block;
}
header,.wrap01,.wrap02,.catch01,.btn01,.btn02,.logo,.menu
 {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}
.is-animation{
  position: fixed;
  top: 0;
    left: 0;
    width: 100%;
  border-bottom: 1px solid #333;
}
.is-animation .wrap01{
    display: none;
}
.is-animation .wrap02{
  width: 960px;
  margin: 0 auto;
  overflow: hidden;
    height: 100px;
    padding-top: 0px;
}
.is-animation .catch01{
  font-size: 10px;
  width: 150px;
  line-height: 100px;
  text-align: left;
}
.is-animation .btn01{
  width: 100px;
  height: 100px;
  background-color: #fabe00;
  color: #fff;
  font-size: 14px;
  line-height: 100px;
  font-weight: 700;
  text-align: center;
}
.is-animation .btn02{
  width: 100px;
  height: 100px;
  background-color: #fabe00;
  color: #fff;
  font-size: 14px;
  line-height: 100px;
  font-weight: 700;
  text-align: center;
  display: block;
    margin-left: 30px;
}
.is-animation .logo{
  font-size: 24px;
  font-weight: 700;
  padding-top: 30px;
}
.is-animation .menu{
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  padding-left: 30px;
  padding-top: 30px;
}
.is-animation .menu span{
  font-size: 10px;
  display: block;
}

PRICE 主な受注案件

グラフィックデザイン 会社案内、カラログ、広告、チラシ、CDジャケット ¥50,000~
WEB/UIデザイン コーポレート、ポータル、ランディングページ、バナー各種 ¥50,000~
コーディング/システム構築 動的なサイトやレスポンシブサイト、WordPressへの移行 ¥50,000~
起業のお手伝い一式 ロゴ、名刺、会社案内、その他販促物、ホームページ ¥98,000~