Home / Seo - Thủ Thuật / Mã Nguồn Web / Hiệu ứng Ringing Balls cho web nhân dịp Noel

Hiệu ứng Ringing Balls cho web nhân dịp Noel

Lang thang mấy diễn đàn, thấy bên root.vn có cái header khá hay, hình như độc quyền cho Xenforo, mình mò mẫm đem về cái site nho nhỏ của mình, và mạn phép chia sẻ lại để các bạn thử tìm hiểu, làm thử cho vui.

Nguồn : http://xenforo.com/community/resources/holiday-garland-with-ringing-balls.1281/
Đây là một bộ mở rộng viết cho Xenforo, các mem có lic mới tải về từ link này được ! 

Thực ra nó cũng chỉ là HTML, CSS và JS đơn giản nên đưa về các web khác chủng loại cũng hoạt động tốt.
Cần có vài thứ sau :

01/ Bộ hình ảnh, âm thanh … mọi thứ để hiển thị, tải link sau :

https://www.mediafire.com/?c8ceqaoiycymcw1

02/ Vài lưu ý :

+ Như đã nói, ứng dụng này chạy trên nền JS, do đó bắt buộc có jQuery. Mình có nén chung thư viện này vào file ở link MF trên. Nếu site đã có sẵn thì không cần nhúng vào nữa, kẻo nó đánh nhau thì phiền.
+ Cũng đã nói ở trên, cái này viết cho Xenforo, do đó nó yêu cầu 01 file tên xenforo.js mới có được hiệu ứng âm thanh ( và 01 file SWF nữa ), tất cả đều được chèn trong file nén ở trên.

+++ Cách làm :

01/ Giải nén file holiday_bells.rar, upload hết thư mục đó lên web của bạn. Thường thì ngang hàng với index.
02/ Chèn các đoạn nhúng sau vào thẻcủa khu vực bạn muốn hiển thị. Thường nếu cho toàn web thì nằm ở index, nếu dùng mã nguồn khác thì có thể là header, vân vân ….

script src="holiday_bells/js/jquery-1.10.1.min.js"/script  ( Không chèn nếu web bạn có sẵn jQuery )

script src="holiday_bells/js/xenforo.js"/script 

script src="holiday_bells/js/swfobject.min.js"/script 

script src="holiday_bells/js/holiday_bells.js"/script 

link rel="stylesheet" type="text/css" href="holiday_bells/css/noel.css" / 

Các đoạn mã trên sẽ nhúng các file JS và CSS cần thiết vào web. Tất cả có trong file

03/ Chèn đoạn HTML này vào đằng trước 02 thẻ /body và /html ( thường ở footer).

div class="b-page_newyear"
div class="b-page_content"
i class="b-head-decor"
i class="b-head-decor_inner b-head-decor_inner_n1"
div class="b-ball b-ball_n1 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n2 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n3 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n4 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n5 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n6 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n7 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n8 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n9 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i1"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i2"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i3"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i4"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i5"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i6"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
/i
i class="b-head-decor_inner b-head-decor_inner_n2"
div class="b-ball b-ball_n1 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n2 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n3 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n4 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n5 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n6 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n7 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n8 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n9 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i1"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i2"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i3"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i4"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i5"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i6"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
/i
i class="b-head-decor_inner b-head-decor_inner_n3"
div class="b-ball b-ball_n1 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n2 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n3 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n4 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n5 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n6 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n7 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n8 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n9 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i1"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i2"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i3"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i4"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i5"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i6"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
/i
i class="b-head-decor_inner b-head-decor_inner_n4"
div class="b-ball b-ball_n1 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n2 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n3 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n4 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n5 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n6 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n7 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n8 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n9 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i1"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i2"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i3"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i4"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i5"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i6"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
/i
i class="b-head-decor_inner b-head-decor_inner_n5"
div class="b-ball b-ball_n1 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n2 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n3 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n4 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n5 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n6 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n7 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n8 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n9 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i1"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i2"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i3"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i4"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i5"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i6"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
/i
i class="b-head-decor_inner b-head-decor_inner_n6"
div class="b-ball b-ball_n1 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n2 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n3 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n4 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n5 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n6 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n7 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n8 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n9 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i1"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i2"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i3"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i4"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i5"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i6"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
/i
i class="b-head-decor_inner b-head-decor_inner_n7"
div class="b-ball b-ball_n1 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n2 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n3 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n4 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n5 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n6 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n7 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n8 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_n9 b-ball_bounce"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i1"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i2"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i3"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i4"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i5"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
div class="b-ball b-ball_i6"div class="b-ball_right"/divdiv class="b-ball_i"/div/div
/i
/i
/div
/div 

 

 

———————————————————
Chú ý :
01/ CSS và các file balls cho ra hình ảnh. jQuery, swfobject và holiday_bells.js sẽ khiến các trái banh lắc lư.
02/ File xenfore.js và holiday_bells.swf quyết định việc có hiệu ứng âm thanh leng keng khi rê chuột.
Nếu bạn đã làm đúng và đủ các bước trên mà chỉ có hình ảnh và hiệu ứng, không có âm thanh thì mở file : holiday_bells.js

Tìm đoạn sau ( nó nằm ngay đầu tiên ấy mà ) : 

    function f() {        var i = "holiday_bells/flash/holiday_bells.swf";        i = i + "?nc=" + (new Date().getTime());        swfobject.embedSWF(i, "z-audio_player", "1", "1", "9.0.0", null, {}, {            allowScriptAccess: "always",            hasPriority: "true"        })    }

sửa cái dòng URL lại sao cho nó đúng, nhận được flash là nó leng keng ! 😀

Chúc các bạn thành công ! 

Rate this post

About icom

Check Also

free-domain-mail-zoho-0_cb6e4

Tạo email với tên miền riêng miễn phí cùng Zoho Mail

Cùng với sự thương mại hoá hoàn toàn của Google Mail Apps thì mới đây, …

Leave a Reply

Your email address will not be published. Required fields are marked *