1. 首頁 > 生活百科 > >

翻頁類H5-線下門店案例 怎么做h5？( 三 )

小知識怎么做h5


①首屏文字動效使用了左右翻轉（2 秒）；
②第2屏文字使用了“向上飛入”， 為了讓3組元素運動時有差異， 所以設置了不同的延遲時間， 分別是Logo延遲1.2秒、正文延遲1.4秒、圖標延遲1.8秒；
③第3到第6屏采用了相同的動效， 即“向上飛入”， 思路與第2屏類似， 讓3組元素的運動有差異 。 設置分別是：標題的速度1秒， 延遲0.5秒；正文的速度1秒， 延遲0.6秒；圖標的速度1秒， 延遲2秒 。 在這里， 圖片的運動是最大亮點， 這個輪播圖運動在H5內是可以輕松實現的，
H5的動態選擇與輪播圖設置
④第7屏的動效設計思路也與第2屏類似， 元素同樣采用了動效“向上飛入”， 讓元素有差異地以先后順序逐漸運動出現在畫面中 。
⑤第8屏的文字動效和按鈕動效同樣是“向上飛入” 。
大致步驟如同文字描述那樣， 但文字很難描述清楚動效 。 如果想真正學會這套動效制作方法， 還請觀看本節配套的教學視頻， 里面有清晰的操作步驟 。
（7）添加音效
最后一步就是為H5尋找背景音效了 。 雖然這支H5的整體氛圍是偏古樸的， 但內容又非常具有現代感 。 所以純古典的音效和純現代的音效都不適合這支H5， 這些音樂搭配畫面的話都會非常奇怪 。
結合古撲和現代這兩個特征， 經過一番思考， 我們鎖定的熱搜關鍵詞是“現代古箏”和“流行民樂”， 這樣找音效的范圍就小多了 。 通過音樂素材網站的歌單搜索， 項目選用了音樂-常靜-《空》的前奏部分作為背景音效， 音效整體氛圍清雅、現代， 并且具備古典特征 。
因為是非商業的模擬案例， 所以直接使用了作者的音樂， 如果是大型的商業項目， 就需要一定的版權支持 。
在制作過程中， 我們可以通過預覽功能在手機上觀看頁面效果 。 這時不要忘記采用不同的手機進行測試， 同時不要忘記上傳封面圖和添加H5的正副標題 。 到這一步H5就算是制作完成了 。 如圖所示為H5的8屏平面效果， 整體風格基本上保持了一致 。 通過掃描本節案例的二維碼， 你可以看到H5的最終效果 。
H5全圖平面效果
【翻頁類H5-線下門店案例 怎么做h5？】為了讓讀者更深入理解H5的制作過程， 已把案例的具體制作步驟編輯成了視頻， 通過掃描下方二維碼， 你可以看到詳細的制作過程 。

推薦閱讀