百度春節(jié)舞龍logo,鼠標跟隨特效詳解,附html+js壓縮包
在2012年的新年除夕夜來臨之際, 百度上線了2012年的春節(jié)Logo,這次的Logo不同以往,既不是靜態(tài)的Logo,也不是以前的GIF動態(tài)圖片。今年的春節(jié)Logo,百度用藍色的龍作為了主視覺,感覺十分的霸氣,當用戶在百度首頁用鼠標懸停在百度2012年的春節(jié)Logo上時,藍色的巨龍將會從Logo上飛出,隨著鼠標的移動而舞動。
據(jù)了解,這次的Logo是百度在Logo上的又一次嘗試,為了兼容在中國實用較多的一些老舊版本的瀏覽器,讓大家都能看到這炫彩的Logo。這次的Logo沒有完全采用HTML5的技術(shù),對于老舊瀏覽器傳統(tǒng)的JS的技術(shù)也使得這個Logo可以較為完美的被呈現(xiàn)。
在這里我們對百度今年的Logo做一下技術(shù)分解:
一、百度對于靜止狀態(tài)和懸停狀態(tài)分別有兩種Logo,用以展示出龍騰空前和騰空后出Logo后的不同狀態(tài)。
(騰龍前的靜態(tài)Logo)
(騰龍后的靜態(tài)Logo)
二、在騰空飛出后的龍是由多個部分組成,因此,這個看起來是整體的龍實際上也依賴于多個部分,而且每個部分都非常的精巧。
(龍頭)
(龍身)
(龍足)
(龍尾)
(龍尾羽)
三、JS代碼控制了整個龍的動作,包括它的如下動作:跟隨鼠標、鼠標靜止時抖動全身、由右側(cè)直接飛回Logo(或自左側(cè)折疊后自右側(cè)飛回、或自上而下呈萬字飛回)。在這個控制的JS中,主要是對龍的各個部分進行了定位、用函數(shù)特別定義了幾種龍的動作。更多細節(jié),大家可以在下面的代碼中自己研究一下。
下載信息 [文件大?。?2.56 KB 下載次數(shù): 次] |
點擊下載文件:baidu_logo_tuquu |
本文地址:http://m.likemindfilms.com/tutorial/de1250.html