ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

【css】アニメーションとして使える transition について

2016年1月23日

スティッキーヘッダー(スクロールしてもヘッダーがついてくる技法)の効果にアニメーションを使いたくて、今回cssプロパティのtransitionを使用しました。

以下がサンプルコードとなります。

【HTML】

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="header_wrap01" class="header_wrap">
<header id="header01">
<h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo_pc.png" alt=""/></a></h1>
<ul>
  <li class="nav_home"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/home.png" alt=""/></a></li>
  <li class="nav_blog"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/blog.png" alt=""/></a></li>
  <li class="nav_contact"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/conatact.png" alt=""/></a></li>
</ul>
</header>
</div><!--header_wrap-->
 
<div id="header_wrap02" class="header_wrap">
<header id="header02" class="none">
<h1><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/logo_pc02.png" alt=""/></a></h1>
<ul>
  <li class="nav_home"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/home02.png" alt=""/></a></li>
  <li class="nav_blog"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/blog02.png" alt=""/></a></li>
  <li class="nav_contact"><a href=""><img src="<?php bloginfo('template_url'); ?>/images/contact02.png" alt=""/></a></li>
</ul>
</header>
</div><!--header_wrap-->

※ヘッダーを2つ用意(#header01、#header02)して01→02切り替える
初期設定ではヘッダー02はcssでtop-48pxの位置に配置している。

【css】

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#header_wrap02{
width:100%;
min-width:980px;
background-color:rgba(0,0,0,0.7);
position:fixed;
z-index:3;
top:-48px;
-webkit-transition:top 0.4s;
        transition:top 0.4s;
}
 
.visible{
top:0 !important;
}

.visiblueでtopのマイナス位置を0にして表示させる(js側でclassの追加・削除)
※ここでtransitionがポイント!
transition:top 0.4s;を指定しているが、これは、スティッキーヘッダーの表示・非表示をアニメーションさせるための記述です。
transitionプロパティは「あるスタイルから別のスタイルへの変化をアニメーションさせるプロパティ」です。ここではtopプロパティの値の変化を0.4秒のアニメーションを適用しています。

【jquery】

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   $(window).scroll(function(){
   var $header = $('.header_wrap'),
   $height = $header.outerHeight(),
$window = $(window).scrollTop();
if($window > $height){
$('#header_wrap01').css('display' , 'none');
$('#header_wrap02').addClass('visible')
$('#mt').css({'padding-top': '67px'});
}else{
$('#header_wrap01').css('display' , 'block');
$('#header_wrap02').removeClass('visible')
$('#mt').css({'padding-top': 0});
}
});

ウィンドウのスクロール値がヘッダー01の高さを越えたら、
ヘッダー01を非表示にし、ヘッダー02に.visibleを追加しtopに表示する

参考サイト:
http://www.css-lecture.com/log/css3/css3-transition.html

関連記事

  • IE、chromeで起きた!!画面の読み込み時にtransitionが動作するバグの解決方法!!2017年3月8日 IE、chromeで起きた!!画面の読み込み時にtransitionが動作するバグの解決方法!!
  • 便利 ! 使われていないCSSの記述を見つけ出す方法(Google chrome使用)2016年12月12日 便利 ! 使われていないCSSの記述を見つけ出す方法(Google chrome使用)
  • 超簡単!cssを使って背景画像のみ透過にする方法2016年11月5日 超簡単!cssを使って背景画像のみ透過にする方法
  • 【css】ウィンドウ幅いっぱいの画像背景を指定する方法2016年1月20日 【css】ウィンドウ幅いっぱいの画像背景を指定する方法
  • 【css】文章中に改行がある時に、行頭を揃える小ワザ2016年8月17日 【css】文章中に改行がある時に、行頭を揃える小ワザ

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.