animation Header教學(Jquery+CSS3)

AJframe-教你使用Jquery+CSS3快速製作animation Header

現階段市面上的網站,都開始重視UI/UX的優化.

很常看到header隨著scroll出現變化.

這邊阿傑就要教你,如何快速的製作一個動態的header

為何要CSS3+Jquery?

其實製作方法很多,沒有正確的標準,

純Jquery和純CSS3都能達到一樣的目的.

效能方面這邊就不贅述.我們只談論實現功能

使用CSS3屬性transition

這是一個CSS3的屬性,是一個製作簡單動畫不可或缺的屬性.實際說明可以參考W3Cschool

html code-->>
<header>AJframe</header>
css code-->>
header { background:#333; color:#fff; height:77px; transition: all 1s ease; }

這邊我們說明標籤header要吃我的樣式,樣式分別有以下規則

1:背景色為色票#333

2:文字顏色為#fff

3:高度為77px

4:所有過度效果以1秒的時間,和緩的執行.

是不是很好理解呢~

使用Jquery來觸發事件

上面我們給了標籤一些屬性規則,再來就把要觸發規則的判斷交給Jquery吧!

引用我們Jquery on scroll 事件文中的元件:

onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     if (scrollTop > 50) {
         $('header').css('height','60px')
     } else {
         $('header').css('height','77px')
    }

當我們捲軸滾動了50px的高度時,header的高度變成60px,

否則就變成77px.

是不是簡單了解?

其實現在執行就已經有效果了,但因為瀏覽器的捲軸以及沒有內容稱高所以很難看出已經實現的效果

我們試著把code改成這樣來看效果吧！

html code-->>
<header>AJframe</header>
<div class="content"> </div>

css code-->>
header { background:#333; color:#fff; height:77px; position:fixed; left:p; top:0; transition: all 1s ease; width:100%; }
content {height:2000px;}

這邊我們給了header一個新屬性,就是position:fixed

意思就是把它定位固定住,依據瀏覽器的寬高,定在高和左為0的定點,也就是齊左上的意思.

content給他2000的高度,方便我們看到header的變化

現在在執行看看~是不是就看到效果啦~

當然還有很多技巧可以做喔

我們也可以把css 變化全都寫在css裡面.簡單舉例:

header { background:#333; color:#fff; position:fixed; left:p; top:0;  transition: all 1s ease; width:100%; }
.on {height:60px;}
.off {height:77px;}

這次我們把scroll後要產生的變化,寫在.on 和.off裡面.

執行事件判斷一樣寫在Jquery裡面

onscroll = function() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     if (scrollTop > 50) {
         $('header.off').addClass('on').removeClass('off')
     } else {
         $('header.on').removeClass('on').addClass('off')
    }

也可以達到同樣的效果..

其他要在滾動後發生的效果,就當作你們的練習功課吧~

別忘記各瀏覽器的前綴！

剛剛我們在header裡面寫了transition: all 1s ease; 為了響應各瀏覽器的正確顯示,要加入每個瀏覽器的對應前綴,才有辦法在各瀏覽器看到同樣的執行效果喔!

-web-transition: all 1s ease;-moz-transition: all 1s ease;-ms-transition: all 1s ease;-o-transition: all 1s ease;transition: all 1s ease;