深圳網(wǎng)站建設在此通過(guò)3種簡(jiǎn)單的動(dòng)態(tài)特效（而且每個(gè)人都可以輕易學(xué)會(huì )），來(lái)探索用HTML5網(wǎng)頁(yè)設計多媒體交互，能為展示帶來(lái)什么樣的神奇效果。很多人都說(shuō)我們云梯的網(wǎng)站設計效果做的很不錯，其實(shí)說(shuō)多了更多的是我們設計師們的努力及經(jīng)常會(huì )舉辦一些小型的分享會(huì )，把好的信息分享給身邊的每一個(gè)小朋友，讓大家一起進(jìn)步，而這邊文章就是我們深圳網(wǎng)站建設-云梯設計部的小伙伴們分享的小內容今天分享給大家！

1、延時(shí)，60秒做出生長(cháng)的效果

如果你準備發(fā)布Apple Watch，如何在5秒內立刻抓住人們的眼球？一個(gè)簡(jiǎn)單卻實(shí)用的方法是讓產(chǎn)品細節分步呈現出來(lái)，形成組裝產(chǎn)品的生長(cháng)效果。

大部分產(chǎn)品有PSD格式的原型圖，設計精美但細節繁多，導入PPT等軟件進(jìn)行動(dòng)效處理十分麻煩。如上圖，利用iH5.cn發(fā)布的新功能，能在保留所有分層結構的前提下一次性導入PSD，快速制造延時(shí)的動(dòng)效。

把PSD文件拖拽到編輯器進(jìn)行上傳，再為產(chǎn)品的部件分別添加飛入、彈跳等動(dòng)效、設置動(dòng)效在不同時(shí)間出現，就能模擬出產(chǎn)品的“生長(cháng)情況”。

KEY#1：動(dòng)效的延遲一開(kāi)始可以控制在1-3秒，后面的間隔越來(lái)越短（并低于動(dòng)效時(shí)長(cháng)），還能形成重疊的動(dòng)感，有利于制造現場(chǎng)的張緊感。

2、聚焦，Duang一樣的特技

“怎么讓觀(guān)眾把注意力集中到我想要讓他們看的地方？”聚焦有兩個(gè)技巧，一是把你想要突出的內容放大，二是隱藏不重要的內容。

著(zhù)名的展示工具Prezi用的就是個(gè)法子，實(shí)時(shí)放大展示重點(diǎn)。但它應用還不廣，每到一個(gè)地方得重裝一次，功能也比較有限。如上圖，使用畫(huà)布工具來(lái)設計好玩的“聚焦”特技的遮罩功能，能在普通瀏覽器中進(jìn)行在線(xiàn)展示。

在畫(huà)布下放兩張圖片，一張展示圖，一張PNG格式的白色蘋(píng)果LOGO，把展示圖的遮罩設為蘋(píng)果LOGO，就有上圖的效果。容易吧？如果再為圖片放一個(gè)向左滑動(dòng)的效果，還能制造漂移的動(dòng)感。

KEY#2：畫(huà)布的遮罩效果和設為遮罩的圖片息息相關(guān)，作為遮罩的圖片色彩越明亮，被遮的圖片越不透明。

因為作為遮罩的蘋(píng)果LOGO是全白的，它顯示區域內的圖片才是完全不透明的。比如上面從白色到黑色的四個(gè)圓是遮罩，它的顏色越深，城堡圖片對應位置的透明度越低。遮罩全黑時(shí)，城堡就不見(jiàn)了。

（注：國內很多移動(dòng)端瀏覽器尚未支持HTML5的Canvas遮罩效果，所以它目前更適用于PC端展示。）

3、演示，是調節氣氛的步伐

如果想要設計一場(chǎng)毫無(wú)缺漏的發(fā)布會(huì )，直接搞一場(chǎng)錄播就行，但也失去了現場(chǎng)的魅力。因為可能會(huì )出現各種突發(fā)情況，現場(chǎng)才更刺激、更有吸引力。怎樣能在展示中加入可控的“變量”來(lái)調節氣氛？

答案之一是演示，而且知名是用一些讓觀(guān)眾自己上臺，同樣能輕易完成的行為。電腦上的比如簡(jiǎn)單的拖動(dòng)，如上圖，利用有趣的遮罩結合拖動(dòng)來(lái)展示不同型號的蘋(píng)果手機。

這里應用到了遮罩強悍的“濾鏡”功能，設置很簡(jiǎn)單，只是把剛才的白色蘋(píng)果LOGO做成了彩色漸變，再用一張蘋(píng)果手機的圖片作為彩色LOGO的遮罩。這樣一來(lái)，相當于保留了LOGO的顏色特征，又能利用蘋(píng)果手機圖片的色彩明暗變化讓LOGO現出蘋(píng)果手機的“原形”。

這時(shí)候，把蘋(píng)果LOGO圖片的“拖動(dòng)類(lèi)型”設為任何方向，就能在展示中途隨意用鼠標拖移蘋(píng)果LOGO，演示為蘋(píng)果手機加彩色濾鏡的特技了。

KEY#3：想要實(shí)現Prezi的聚焦放大效果？使用事件工具，在一張允許拖動(dòng)的圖片上放個(gè)透明按鈕，設置點(diǎn)擊按鈕時(shí)圖片尺寸放大就行

“除非你有值得一說(shuō)的東西，不然你就做不了一個(gè)好的演講。”

全球赫赫有名的TED大會(huì )，靠演講為世界傳播了各種各樣的創(chuàng )意。而作為T(mén)ED多年的策展人Chris Anderson，有著(zhù)上面這句名言。

有了值得一說(shuō)的東西，是否有足夠好的演講手段，是史蒂夫·喬布斯和蒂姆·庫克在蘋(píng)果發(fā)布會(huì )上反響的區別。你更欣賞喬布斯還是庫克？現在，你還要錯過(guò)用動(dòng)態(tài)展示抓住觀(guān)眾注意力的機會(huì )嗎？

http://ezekroy.com/jianzhanzhishi/7522.html 深圳網(wǎng)站建設分享一個(gè)h5幾個(gè)網(wǎng)頁(yè)設計特效