Hướng dẫn tạo hiệu ứng pháo hoa tết cho website

CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%

Bài viết hướng dẫn có chứa CODE - Copy và sử dụng chúng sẽ tiện hơn cho bạn.

Mỗi dịp xuân về tết đến, hay giáng sinh, noel. Bạn cũng muốn website của mình có thêm chút không khí liên quan đến các sự kiện sắp diễn ra. Bài viết này tôi xin giới thiệu đến các bạn một đoạn code javascript mà khi nhúng vào web sẽ xuất hiện các pháo hoa với đầy đủ màu sắc, giúp web chúng ta thêm lung linh nhé.

Xem ví dụ thực tế

Để web bạn thêm lung linh hơn khi tết sắp đến bạn chỉ cần tích hợp script Firework sau đây vào website của mình.

<body>
<!-- Chèn giữa body mở và body đóng -->
<style>
body{
  overflow: hidden;
  position: relative;
}
canvas {
    cursor: crosshair;
    display: block;
    position:absolute;
    z-index:5;
    top:0;
    width:100% !important;
}
</style>
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script type="text/javascript" src="https://wpshare247.com/ajquery.lib/fireworks/script.js"> </script>

</body>

Nếu bạn dùng wordpress, bạn thêm đoạn code trên vào file header.php trong theme bạn đang dùng như sau:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

<style>
body{
  overflow: hidden;
  position: relative;
}
canvas {
    cursor: crosshair;
    display: block;
    position:absolute;
    z-index:5;
    top:0;
    width:100% !important;
}
</style>
<body <?php body_class(); ?>>
 	<canvas id="canvas">Canvas is not supported in your browser.</canvas>
    <script type="text/javascript" src="https://wpshare247.com/ajquery.lib/fireworks/script.js"> </script>

Như vậy là mọi thứ đã xong rồi nhé. Hãy kiểm tra website bạn đi nào. Nếu chưa làm được, các bạn có thể liên hệ để chúng tôi hỗ trợ bạn sớm nhất. Happy new year !!!

CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%