整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
段時間小編發現，HTML5似乎滿足了廣告主對移動營銷的大部分需求，從形式到功用、到傳播，有人觀望，更有人已搶了鮮，在2014年HTML5營銷案例也層出不窮。大到可口可樂、維多利亞的秘密這種敢于嘗鮮的大牌，小到知乎推出的一本新書，各種品牌和產品都在嘗試利用HTML5進行營銷。那么H5到底可以怎么玩?讓我們一起來看看吧。
主題派
主題傳播永遠是品牌的重要傳播訴求，但無論是新聞稿還是軟文拿到社交媒體上來，與其他形式紛繁的訊息進行PK，總是感覺弱弱的，這個時候HTML5就可以華麗麗出場了。在原有專題的基礎上，加之互動以及其他適配小屏幕的素材，一個聲情并茂的HTML5主題就可以制作完成。可以預期的是，將有越來越多的媒體和企業會采用此種形式推介某個主題或是亮點。可口可樂已先行使用HTML5形式傳播品牌主題：如用一條紅線重現一個品牌經歷的歲月，在簡潔的線條世界里，可口可樂描繪了一段歷史，整個時間軸隨著用戶向上滑動頁面“繪制”而成。“我們在乎”——可口可樂中國可持續發展報告，一份枯燥的報告也可以變身輕盈，適應移動端觀看及分享的需求，以更活潑的形式在朋友圈被熱轉。
案例鏈接：騰訊大會邀請函
2014年11月8日，騰訊就在世人面前高調地玩了一把科技感。在WE大會現場中，不但有唯美的星空畫風和首頁由遠及近的宇宙效果，還增加了指紋識別的科技互動元素。最重要的是游戲規則：將應用邀請發給好友，300秒之內，雙方在各自手機上同時按下指紋，驗明正身后獲得邀請碼。這種手機端接連現場的技術十分搶眼，可以讓與會者享受到被重視的禮遇，還有瞬間通電的感覺。這款邀請函不只是實現了人機互動，更是實現了雙屏互動，運用了一次社群思維。
游戲派
愛玩是人類的天性，好游戲吸引用戶參與沒有問題，但當游戲遇上營銷，就難免生死未卜了，弄不好就破壞了游戲體驗，引火上身。像《圍住神經貓》只是因為接入了廣告文字鏈，就結束了一款游戲絢爛而又短暫的生命，于朋友圈銷聲匿跡。
所以想要利用游戲進行營銷一定要做到謹慎、巧妙。目前HTML5游戲營銷主要是兩種形式，一種是品牌推出游戲，游戲依附于品牌，一般為知名品牌;另一種為游戲先行，產品藏匿于游戲之中，這種則是一些新產品或是新品牌。像杜蕾斯、維多利亞的秘密就屬于前者，推出符合品牌特點的一些小游戲，將品牌與游戲進行深度融合，如將經典游戲中的元素換為品牌標識或是產品，使用戶在玩游戲的過程中加深對品牌的認知。而《財務包子鋪》則是后者的典型代表，成為HTML5小游戲中的一匹黑馬。
案例鏈接：《財務包子鋪》背后的那本書
測試一下自己的創業成功指數?在這個人人吵著要創業的年代，大多數人都會對這個測試躍躍欲試吧，心里想著：我的創業天賦可不能就此埋沒。于是由知乎制作的小游戲《財務包子鋪》在微信朋友圈里迅速流傳，玩家以創業老板的身份，對自己的包子鋪的日常經營做出決策。聽上去沒什么特別，但游戲中專門設置了機制，比如用戶如果決策失誤，就會收到破產警告，需要選擇一本救命書——就是知乎要借此推廣的《金錢有術》。續命之后可以繼續游戲，讓玩家對新書留下初步印象，又不會中斷游戲。游戲上線三天后，《金錢有術》這本書成為亞馬遜圖書銷售總榜冠軍，同時還是預售冠軍、新書冠軍、經濟類冠軍，僅在游戲里點擊“購買秘籍”這一選項的獨立用戶數就有55萬。怎么樣，設計得如此天衣無縫，就算有人知道是“軟游戲”了，但還是愿意為這本書買單。
活動派
有粉絲的地方就有活動，社交媒體風行后，品牌活動大規模轉移到微博、微信上來，真實的社交關系鏈，對于有獎活動來說是最好的人氣資源。相對于微博上的關注和轉發有禮，以及微信朋友圈轉發集贊等，使用HTML5開發出的有獎互動活動形式會更新穎和多變，同時也可以發揮HTML5的多項營銷優勢，如互動性強，在活動中開發出各種與用戶的互動形式;功用性好，獎品對于用戶來說就是最實際的刺激和誘惑;傳播性廣，獨樂樂不如眾樂樂，發現了既好玩又有獎品拿的好事，當然要好朋友一起分享。
案例鏈接：索尼七夕送“小青心”
在2014年七夕期間，索尼就用HTML5開發了活動頁面，強力推出一款新品——清新范兒十足的小青心索尼C3手機。在活動期間，只要關注索尼Xperia官方微信進入游戲，將在頁面“邂逅”專屬幸運四葉草，分享活動到微信朋友圈，邀請4位好友幫助拆開禮盒，點亮小青心幸運四葉草，即可獲得抽獎資格，索尼為此一共準備了77臺小青心索尼C3智能手機。七夕是年輕人的節日，整個活動將小青心標簽與七夕相結合，踩準節日營銷的時間點，同時環節中設置需要4位好友幫助，也使社交傳播鏈得到了幾何式鋪開。
功能派
在前文中已經提到，想用戶之所想才能夠有效“黏住”用戶，使得HTML5營銷得到轉化，不論什么時候，只要實用，總會有人點擊、有人轉發，這也是HTML5營銷最需要的推動力。在功能性HTML5開發方面，百度可謂屢試不爽，如先后推出iBreath智呼吸、手機告全體主人書、北京地鐵計算器等產品，這幾款產品無一不是戳中了用戶的“痛點”：健康、手機使用、地鐵漲價，這都是實實在在的需求點。以手機告全體主人書為例，你是否已經看夠了那些枯燥的文字敘述，也厭煩了毫無新意的小互動，這組頁面幾乎每頁都根據要表現的內容增加了趣味十足的動畫效果，將說明書變成了“動畫片”。
案例鏈接：百度iBreath智呼吸
這款HTML5的slogan為：人呼出的氣體和指紋一樣獨一無二。此語一出，就讓人對自己的呼吸充滿了好奇，具體操作也很簡單：手機水平放好，然后深呼吸，對著手機下方吹氣。幾秒鐘之后，通過大數據分析，你的健康值就會被測算出來，會列出用戶的呼吸氣體成分詳細數據，還會分析出用戶的健康情況，如肺部感染癥狀以及相應的健康改善建議等等。
更多精彩內容，請關注互聯網分析沙龍微信：techxue 每天為您推送最新、最熱干貨！
互聯網分析沙龍——互聯網人的實戰分享平臺，一個為您提供專業的商業模式、產品、數據、用戶、電子商務、社會化媒體、移動互聯網等深度分析的信息網站！請在微信公眾賬號中搜索「techxue」，或用手機掃描左方二維碼，即可獲得互聯網分析沙龍每日精華內容推送和最優搜索體驗，并參與編輯活動。
tml5公司官網發展時間軸動畫特效
html5鼠標移動特效，帶logo的psd修改文件，可做官網、引導頁、時間軸特效
演示地址：http://www.17sucai.com/pins/demoshow/22898
html5 css3在線留言表單美化代碼
html5 css3留言表單代碼。表單美化。
演示地址：http://www.17sucai.com/pins/demoshow/22929
html5 slider響應式圖片輪播插件
html5 slider圖片輪播，響應式圖片切換
演示地址：http://www.17sucai.com/pins/demoshow/20626
lt;!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>H5混合開發(runoob.com)</title>
<style type="text/css">
#div1{width:350px;height:70px;padding:10px;border:1pxsolid#aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>拖動 RUNOOB.COM 圖片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img/logo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>
它看上去也許有些復雜，不過我們可以分別研究拖放事件的不同部分。
設置元素為可拖放
首先，為了使元素可拖動，把 draggable 屬性設置為 true ：
<img draggable="true">
拖動什么 - ondragstart 和 setData()
然后，規定當元素被拖動時，會發生什么。
在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的數據。
dataTransfer.setData() 方法設置被拖數據的數據類型和值：
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
在這個例子中，數據類型是 "Text"，值是可拖動元素的 id ("drag1")。
放到何處 - ondragover
ondragover 事件規定在何處放置被拖動的數據。
默認地，無法將數據/元素放置到其他元素中。如果需要設置允許放置，我們必須阻止對元素的默認處理方式。
這要通過調用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
進行放置 - ondrop
當放置被拖數據時，會發生 drop 事件。
在上面的例子中，ondrop 屬性調用了一個函數，drop(event)：
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
代碼解釋：
調用 preventDefault() 來避免瀏覽器對數據的默認處理（drop 事件的默認行為是以鏈接形式打開）
通過 dataTransfer.getData("Text") 方法獲得被拖的數據。該方法將返回在 setData() 方法中設置為相同類型的任何數據。
被拖數據是被拖元素的 id ("drag1")
把被拖元素追加到放置元素（目標元素）中
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
