Trang trí hiệu ứng pháo hoa Tết cho website trên Header cực đẹp

trang tri hieu ung phao hoa tet cho website tren header cuc dep 1

176.vn xin chia sẻ các bạn cách trang trí hiệu ứng pháo hoa trên header của website của bạn cực đẹp cho những ngày Tết đến

Demo hiệu ứng pháo hoa Tết cho website

Truy cập website: https://thegioique.com/ hoặc demo video dưới đây:

Hướng dẫn trang trí hiệu ứng pháo hoa Tết cho website

Thêm vào trong thẻ class menu header:

<div class=”firework”>
<canvas id=”canvas” width=”1920″ height=”90“>Canvas is not supported in your browser.</canvas>
</div>

Chèn js vào footer

https://176.vn/wp-content/themes/176-child/web176-new-year.min.js

Thêm css vào theme:

.firework{z-index: 100;width:100%;height:90px;overflow:hidden;position:absolute;top:0;left:0;pointer-events:none}
.firework canvas{display:inline-block;cursor:crosshair}

Sửa 90 thành chiều cao header menu của bạn.

Câu đối 2 bên, hiệu ứng hoa rơi tết

Còn bạn nào muốn thêm câu đối 2 bên và hiệu ứng hoa rơi thì cài thêm plugin này nha:

DevVN – Trang trí Tết Việt Nam

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

4/5 - (37 bình chọn)