抽獎動畫 - 開寶箱抽獎
1. 需求 開寶箱在一些商家營銷活動中也很常見，這個需求簡單，產品經理說就是做個動畫就好，那我們就可以自由發揮了。高保圖如下圖1. 圖1 開局一張圖，剩下的全靠自己編了，動作怎么動，先看看UI給的素材，看米下鍋。一張關閉的箱子圖片，如下圖2 圖2 一張打開的箱子，如下圖3 圖3 一張獎品 ...
原文：抽獎動畫 - 滾動抽獎
. 需求 上次講到lao虎機抽獎，通過jquery.animate修改background prosition y來修改背景圖片實現上下滾動動畫，本文介紹一種左右滾動的動畫，原理是一樣的，這里通過修改background prosition x來實現動畫，同時也要注意獎品圖片的尺寸問題，這里姑且叫它滾動抽獎。先看高保，如下圖 ： 圖 需求如下： 獎品圖片橫排列。 用戶點擊抽獎，獎品依次向左滾動， ...
2021-08-13 18:28 2 302 推薦指數：
相關推薦
抽獎動畫 - 十二宮格抽獎
本文介紹一種12宮格抽獎，這種抽獎方式是九宮格抽獎的演變，只不過開始播放的時候是隨機方式，不是順時針播放了。 1.需求 先看看高保，如下圖1 圖1 用戶點擊"立即抽獎"后12個獎品隨機高亮 請求接口，待所有產品都高亮后，根據接口結果，固定在抽中獎品上 最后彈出中獎結果彈框 ...
抽獎動畫 - 大轉盤抽獎
1.需求 抽獎是各類營銷活動中最常見的一種形式，本產品需求大致如下：轉盤周圍跑馬燈交替閃爍，點擊抽獎，大轉盤旋轉，調用接口獲取抽獎結果，大轉盤指針指向對應的獎品。高保如下圖1 圖1-高保 2.整體思路 2.1跑馬燈 本需求要求跑馬燈交替閃爍，那四周的跑馬燈就不能是死的圖片了，要用動畫 ...
js 上下滾動抽獎效果
...
抽獎動畫 - 九宮格抽獎
本文介紹九宮格抽獎功能的實現。 1.需求 功能很簡單，來看看高保截圖，如下圖1 圖1 需求的功能點如下： 用戶點擊抽獎，九宮格四周的圖片順時針依次閃爍，空轉幾圈。 請求接口，等接口有返回后最后對應的獎品閃爍，其他獎品不閃爍。 登錄后，正中間的抽獎這個小方格點亮，未登錄是灰色 ...
抽獎動畫 - lao虎機抽獎
本文介紹一個lao虎機抽獎動畫的實現，lao虎機抽獎在各類商家營銷活動中非常常見，這里主要介紹動畫的實現過程，其他細節不做詳細分析。 ps：lao虎機是敏感詞，博客園的富文本和markdown編輯器都限制不允許出現，所以文章中的“老”字用拼音代替。 1. 需求 UI給到的藍湖 ...
簡單的轉盤抽獎——CSS動畫優化
前言 前兩天去一家公司面試，被問到一些小游戲的東西。面試官提到了刷紅包還有抽獎這些怎么實現，當時簡單說了下思路，回來之后想想還是說的太輕描淡寫了，干說不做就是耍流氓，所以就做了一個（Demo & 源碼）。啟動方式：手指在轉盤上滑動，轉盤轉動。這里沒有像一般的抽獎程序一樣在后台指定抽獎 ...
怎么寫一個帶名字滾動的抽獎頁面
最近甲方公司年會，年會上必不可少的一個環節就是抽獎，於是需要一個帶人名滾動的抽獎頁面。 有兩種思路可以參考：1是可以進頁面之后抽獎之前就已經隨機分好中獎人員的名單，人名滾動純屬效果，等到按停止按鈕的時候直接顯示上已分配好的名字；2是滾動之后，直接取按停止按鈕停止的名字。考慮到這只是一個 ...