中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

本文用案例說明怎樣利用鼠標(biāo)滾輪控制全屏切換、遮罩動(dòng)畫。來借鑒一下吧~

效果如下：

分析實(shí)現(xiàn)目標(biāo)：

• 自適應(yīng)全屏
• 鼠標(biāo)滾輪控制切換
• 圖片及文字的動(dòng)畫

分析元素：

• 圖片、文字、背景
• 在切換下一個(gè)頁面的時(shí)候，當(dāng)前頁面的圖片、文字元素都有動(dòng)畫，動(dòng)畫結(jié)束后才切換到下一頁
• 圖片有遮罩動(dòng)畫
• 文字有位移變化

步驟一：設(shè)置結(jié)構(gòu)

根據(jù)以上分析，banner的結(jié)構(gòu)如下：每個(gè)狀態(tài)里存放每張banner的圖片、文字元素，這里設(shè)置了4張banner

因?yàn)橐鶕?jù)瀏覽器大小自適應(yīng)，所以將每個(gè)banner里面的圖片和文字組合如“4（Group）”，一起定位，當(dāng)然你也可以分別定位。

步驟二：放置元素

banner1只有文字內(nèi)容，就直接放置進(jìn)去

banner2、banner3、banner4結(jié)構(gòu)一樣的：圖片、文字、背景，文字是比較簡單的位移變化，但是圖片有動(dòng)畫。其中圖片效果拆分底圖、遮罩、結(jié)果三個(gè)圖片如下：

這里遮罩“B”處是透明的，周圍顏色必須跟banner背景色相同。

步驟三：實(shí)現(xiàn)全屏自適應(yīng)

網(wǎng)頁加載時(shí)（OnPageLoad）或者banner加載時(shí)添加事件：

• 設(shè)置banner動(dòng)態(tài)面板的寬=瀏覽器窗口的寬度、高=瀏覽器窗口的高度
• 因?yàn)榈谝粋€(gè)頁面一開始就要打開，所以這里就要設(shè)置好元素的位置，第一個(gè)頁面只有文字且居中，所以設(shè)置其位移x=窗口寬度/2-文字寬度/2、y=窗口高度/2-文字高度/2

步驟四：實(shí)現(xiàn)滾輪切換

1. 撐頁面高度并能滾動(dòng)

頁面內(nèi)容的高度大于窗口高度Window.height，所以需要增加頁面內(nèi)容，這里使用了一個(gè)熱區(qū)，因?yàn)樗峭该鞯?，不礙眼。設(shè)置它的位移讓它來撐起頁面的高度。

這個(gè)高度不一定非要Window.height*頁面數(shù)，如果是簡單的滾動(dòng)切換，這樣設(shè)置是有用的，但是這里切換時(shí)有很多動(dòng)畫效果，所以跟頁面數(shù)沒有直接關(guān)系，只要高度讓滾動(dòng)起來比較方便即可。

2. 設(shè)置banner面板始終固定在頂部

因?yàn)樯厦嬉呀?jīng)撐高了頁面，頁面會(huì)滾動(dòng)，所以需要設(shè)置banner面板始終顯示

3. 滾動(dòng)切換頁面

因?yàn)樵谇袚Q下一個(gè)頁面的時(shí)候，當(dāng)前頁面的圖片、文字元素都有動(dòng)畫，動(dòng)畫結(jié)束后才切換到下一頁，所以這里只能分別判斷當(dāng)前時(shí)哪個(gè)頁面，才能鎖定需要變化的元素，除非OnPanelStateChange事件分成進(jìn)入、退出兩個(gè)事件還可能通過變量來實(shí)現(xiàn)。

舉例說明：從banner2到banner3

／切換之前的banner2的動(dòng)畫／

頁面向下滾動(dòng)時(shí)加事件OnWindowScrollDown：

1. 先做圖片的動(dòng)畫：逆時(shí)針旋轉(zhuǎn)遮罩360度->隱藏遮罩和原圖。因?yàn)檫M(jìn)入banner2時(shí)是順時(shí)針，所以退出時(shí)就是逆時(shí)針。
2. 再做文字動(dòng)畫：退出時(shí)文字右移并消失，設(shè)置相對(duì)x值即可。
3. 然后隱藏banner3里面的圖片和文字，因?yàn)榇藙?dòng)畫中有個(gè)背景先切換的效果，所以先隱藏起來，等狀態(tài)切換之后再顯示出來。
4. 切換banner的狀態(tài)到banner3向上滑動(dòng)。
5. 并將banner2里設(shè)置過x值的文字位置還原。

／切換之后banner3的動(dòng)畫／

在banner面板上加事件：也可以在OnWindowScrollDown 2->3那里一起寫了

1. 將banner3中的圖片和文字顯示并設(shè)置自適應(yīng)的位置
2. 做圖片的動(dòng)畫，顯示遮罩和原圖并順時(shí)針旋轉(zhuǎn)遮罩360—>隱藏遮罩和原圖

這里有一些時(shí)間的控制，根據(jù)每一個(gè)操作使用時(shí)間和效果進(jìn)行調(diào)整

其他同理。

本文由 @灰_白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議