里面很多做法可能不是最方便的，但也是一種方法，可看。這個(gè)早教頁(yè)面案例也是看到感覺(jué)還不錯(cuò)的，就模仿的練習(xí)下。

PC端頁(yè)面-fullPage

首先是整體框架fullPage

header部分還有section0、section1、section2部分的代碼和樣式就不一一看了，可以自己用審查元素看下，模仿的寫(xiě)下。這里來(lái)看下第二屏的動(dòng)畫(huà)樣式，是用js寫(xiě)的，但和css寫(xiě)的也大相徑庭。

animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫(huà)。
該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。CSS屬性值是逐漸改變的，這樣就可以創(chuàng)建動(dòng)畫(huà)效果。
只有數(shù)字值可創(chuàng)建動(dòng)畫(huà)（比如 "margin:30px"）。字符串值無(wú)法創(chuàng)建動(dòng)畫(huà)（比如 "background-color:red"）。

語(yǔ)法1：$(selector).animate(styles,speed,easing,callback)
styles：必需。規(guī)定產(chǎn)生動(dòng)畫(huà)效果的 CSS 樣式和值
speed：可選。規(guī)定動(dòng)畫(huà)的速度。默認(rèn)是 "normal"。
easing: 可選。規(guī)定在不同的動(dòng)畫(huà)點(diǎn)中設(shè)置動(dòng)畫(huà)速度的 easing 函數(shù)。 內(nèi)置的 easing 函數(shù)：swing ，linear
callback:可選。animate 函數(shù)執(zhí)行完之后，要執(zhí)行的函數(shù)。

語(yǔ)法二：$(selector).animate(styles,options)
options：可選。規(guī)定動(dòng)畫(huà)的額外選項(xiàng)?？赡艿闹担?br>speed - 設(shè)置動(dòng)畫(huà)的速度
easing - 規(guī)定要使用的 easing 函數(shù)
callback - 規(guī)定動(dòng)畫(huà)完成之后要執(zhí)行的函數(shù)
step - 規(guī)定動(dòng)畫(huà)的每一步完成之后要執(zhí)行的函數(shù)
queue - 布爾值。指示是否在效果隊(duì)列中放置動(dòng)畫(huà)。如果為 false，則動(dòng)畫(huà)將立即開(kāi)始
specialEasing - 來(lái)自 styles 參數(shù)的一個(gè)或多個(gè) CSS 屬性的映射，以及它們的對(duì)應(yīng) easing 函數(shù)

現(xiàn)在根據(jù)這個(gè)來(lái)看下上面的就一目了然了，切換到第二屏的時(shí)候此元素向上淡入20px，持續(xù)時(shí)間200，切換到別的屏的時(shí)候淡出。

第三屏的這個(gè)鼠標(biāo)hover也是做了動(dòng)畫(huà)效果，可以看下這下面的js代碼就能看出來(lái)怎么弄的。

手機(jī)端頁(yè)面-slip

這里采用slip框架，庫(kù)大小5.75K，非常輕量，可以放心用在你的項(xiàng)目~下面是代碼

然后這里可以把第一屏頁(yè)面的樣子制作進(jìn)去，也可以加些css3動(dòng)畫(huà)，然后第二屏第三屏第四屏也是如此

頁(yè)面演示demo

大家可以用手機(jī)掃下這個(gè)網(wǎng)頁(yè)的二維碼，就會(huì)發(fā)現(xiàn)自動(dòng)跳轉(zhuǎn)到這個(gè)制作的手機(jī)端的頁(yè)面上，這是在PC端頁(yè)面上加了一個(gè)判斷，js自動(dòng)判斷是手機(jī)就直接跳轉(zhuǎn)

總結(jié)：（作為國(guó)慶福利，想要源代碼的可以在下面留下郵箱）

這篇和上一篇響應(yīng)式的就不一樣了，這個(gè)是做兩個(gè)頁(yè)面經(jīng)過(guò)判定跳轉(zhuǎn)。各有各的好處，就看怎么需求了。
也是之前有位加了Q問(wèn)了我下滑動(dòng)框架的一些東西，所以才決定找下這個(gè)案例給大家看下。即使總結(jié)之前的，也是給大家看不同的網(wǎng)站案例。之后也會(huì)給大家找不同的案例，進(jìn)行制作和研究。

這次拖了這么久，本來(lái)是想在節(jié)前就做出來(lái)的，也是因?yàn)轫?xiàng)目比較多，又卡在計(jì)劃了很久的旅行上了，一回來(lái)就給大家更新完，好了 下面放一張旅行的照片。