搜索
Hype九九自拍 首頁 學習 教程 查看內容

Mike手把手系列之 (三) 教你如何在hype中通過鼠標滾輪切換場景 ...

2015-8-4 21:23| 發布者: MIke| 查看: 15129| 評論: 3|原作者: Mike

本期教大家的是如何在hype中通過鼠標滾輪來切換場景,實現網頁端單頁面地切換。

這一期要教大家是通過鼠標滾輪來切換場景,之前就有很多群里的小伙伴問起過這個問題,那個時候忙著弄hype社區也沒有太多的時間。關于hype,現在越來越多的設計師將他做為制作網頁的工具。確實,用過之后你也會發現它的方便和好用之處,這里也就不一 一說明了。想要了解hype的小伙伴可以先看看中文介紹視頻

隨著大眾審美觀地不斷提高,大家對網頁的美觀度的要求也在不斷增加。隨著HTML5單頁面的不斷流行,網頁也呈現出了一些趨勢。人們把他視作是一種簡約大氣的體現:(一)用戶可以清晰的看到每一個單頁面所要呈現的內容 (二)配上一些簡單的動畫效果,用戶在閱讀內容的同時,還增加了一些互動性。下面我找了2個類似的案例大家可以一睹為快。

http://www.uemo.net/        http://artool.me/#1


我們發現2個實例都是通過鼠標滾輪來控制頁面的切換,如果在hype中也可以實現的話,那么制作類似的網頁不就更得心應手了嗎?不過在hype中并沒有這種自帶的功能,那么我們怎么來實現呢?hype被定義為是一個零代碼的HTML5動效交互軟件,但是他也提供了代碼的支持,所以這就讓事情變得簡單多了。


。持久符號的話,只有符號內部的設置的動作才會在每個頁面中同步,修改會導致所有場景中的符號都發生改變,而對符號的設置只會作用于當前場景,所有我們需要對每個場景中的持久符號都設置可調布局。在瀏覽器中預覽一下,發現ok,可以適配屏幕。


中就有講解到,也就是調用jQuery這一塊,大家可以去回顧一下。因為我們今天講的功能就是調用的jQuery代碼。我們先將jQuery庫拖入到資源庫中,選到場景1,添加場景加載時的動作,在操作一欄中我們選擇運行javascript,在函數中選擇新函數。之后會在導航欄中彈出第二個選項框。把我們將要執行的jQuery腳本代碼復制到選項框的函數里面,這里我吧函數命名為scroll(命名這個隨意啊)。因為我們是通過鼠標滾輪切換的場景,所以需要讓每個場景加載的時候都執行jQuery腳本代碼,那樣當場景加載的時候,我們都可以通過鼠標滾輪來切換到不同的場景。因為之前已經將這個代碼命名為scroll,所以我們在后面每個場景加載時都進行同樣的操作就行了:運行javascript-選擇剛才命名的函數就可以了。



這里有幾個地方大家可以自行設置,一個是PushBottomToTop/PushTopToBottom:代表了切換的方式,第一個代表從下至上,第二個代表從上至下。另一個是后面緊跟的數字(0.5),代表了頁面切換的速度值。大家可以根據自己的需求進行設置哦。



4.我們預覽一下效果吧,gif可能不是那么明顯,瀏覽器中預覽效果還是很明顯的。最后我會吧這次做的案例也上傳上去供大家下載學習。過程中如果遇到問題的話可以在hype社區中(design968.com)發帖留言,或者在hype3學習交流群(455806127)中留言。

3

鮮花

握手

雷人

路過

雞蛋

剛表態過的朋友 (3 人)

發表評論

最新評論

引用 ask112233 2015-8-6 23:48
這樣子制作,貌似只需要在第一個載入的頁面中添加 代碼,其他無需添加,即自動上下滑動了,
是否可以指定的幾個呢?不然整個Hype的頁面都是這樣的效果了呢!

提示:本頁有 2 個評論因未通過審核而被隱藏

查看全部評論(3)

為廣大Hype愛好者提供一個學習交流的平臺

正在努力制作Hype教程,盡可能為大家帶來最新的體驗!

Copyright © 2015 Comsenz Inc. Powered by Discuz! X3.1

返回頂部