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:
Chúc các bạn thành công.