Trang trí Tết ấn tượng cho Website/Blogspot với câu đối, hoa mai đào, pháo hoa khá độc đáo

Tết Nguyên Đán 2022 đang đến gần, chỉ chưa tới 1 tháng nữa là tất cả mọi người sẽ bước sang năm mới. Trong không khí xuân đến, tết về thì việc trang trí thêm một chút cho website của bạn sẽ giúp mọi người cảm thấy ấm áp, vui vẻ và thu hút khách hàng, bạn đọc hơn. Nếu bạn đang sở hữu một blog hay website thì ngay bây giờ hãy bắt tay vào trang trí cho ngôi nhà thân yêu của mình thôi nào!

Trang trí Tết ấn tượng cho Website/Blogspot với câu đối, hoa mai đào, pháo hoa khá độc đáo

Thông thường, khi trang trí tết cho các website chúng ta thường sử dụng cành đào, cành mai, câu đối hay đèn lồng đỏ... chỉ cần trang trí đơn giản như vậy thôi cũng đủ làm nên không khí ngày tết cho trang web của bạn rồi. Cùng TruongBlogger điểm qua một số hiệu ứng trang trí Tết cực đẹp và bắt mắt cho web/blog nhé. 

Đồng hồ đếm ngược thời gian

Trước mỗi mùa lễ hội, trên các shop trực tuyến thường đặt modue đồng hồ đến ngược trên website của mình. Đó là cách làm cực kì hiệu quả để thu hút sự chú ý của khách hàng và tạo cảm giác hồi hộp như thời điểm chuyển giao giữa năm cũ và năm mới.

ĐẾM NGƯỢC ĐẾN TẾT NGUYÊN ĐÁN 2022
  • ...Ngày
  • ...Giờ
  • ...Phút
  • ...Giây

Vào dịp tết, khuyến mại là hình thức được áp dụng rất nhiều để thu hút khách hàng và thúc đẩy bán hàng. Một chiếc đồng hồ đếm ngược cũng là công cụ để thúc đẩy người tiêu dùng nhanh chóng mua hàng trước khi đợt khuyến mại, giảm giá hết hạn.

Sau đây mình chia sẻ tới các bạn bộ code đơn giản về đồng hồ đếm ngược, thông tin và chỉnh sửa mình đã ghi chú hết ở từng đoạn, bạn có thể tham khảo và chỉnh sửa theo ý thích của bản thân.

Code:

<div id="countdown">

    <h6 id="title">ĐẾM NGƯỢC ĐẾN TẾT NGUYÊN ĐÁN 2022</h6>

    <ul>

        <li><span id="days">...</span>Ngày</li>

        <li><span id="hours">...</span>Giờ</li>

        <li><span id="minutes">...</span>Phút</li>

        <li><span id="seconds">...</span>Giây</li>

    </ul>

</div>

<style>

#countdown h6{text-align:center}

#countdown ul{text-align:center;padding:0;margin:0}

#countdown ul li:before{display:none}

#countdown li{display:inline-block;font-size:18px;text-align:center;list-style-type:none;padding:1em;text-transform:capitalize;margin-left:0!important}

#countdown li span{display:block;font-size:30px;font-weight:700;width:80px;height:80px;line-height:75px;border:3px solid #ffee0a;background-color:#ffee0a;color:#620606;border-radius:50%;margin-bottom:15px}

</style>

<script>

    // Đặt ngày đếm ngược, ở đây mình đặt ngày đếm ngược là 01/02/2022

    //February: Tháng hai, 01: Ngày, 2022: Năm, 00:00:00 or 24:00:00 thời gian của ngày đếm ngược

    var countDownDate = new Date("February 01, 2022 00:00:00").getTime();


    // setInterval: Cập nhật đếm ngược sau mỗi 1 giây.

    // 1000: 1 giây

    var x = setInterval(function () {


        // Ngày và giờ hôm nay

        var now = new Date().getTime();


        // Làm phép tính để đếm khoảng cách ngày hôm nay và ngày đếm ngược

        var distance = countDownDate - now;


        // Tính toán thời gian cho ngày, giờ, phút và giây

        var days = Math.floor(distance / (1000 * 60 * 60 * 24));

        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

        var seconds = Math.floor((distance % (1000 * 60)) / 1000);


        document.getElementById("days").innerText = days,

        document.getElementById("hours").innerText = hours,

        document.getElementById("minutes").innerText = minutes,

        document.getElementById("seconds").innerText = seconds


        // Nếu kết thúc quá trình đếm ngược thì in ra thông báo gì đó

        if (distance < 0) {

            clearInterval(x);

            document.getElementById("title").innerHTML = "CHÚC MỪNG NĂM MỚI 2022 - TRUONGBLOGGER XIN KÍNH CHÚC BẠN ĐỌC VÀ GIA ĐÌNH MỘT NĂM MỚI AN KHANG - THỊNH VƯỢNG!";

            document.getElementById("days").innerText = 0,

            document.getElementById("hours").innerText = 0,

            document.getElementById("minutes").innerText = 0,

            document.getElementById("seconds").innerText = 0

        }

    }, 1000);

</script>{codeBox}

Tổng hợp các hiệu ứng và trang trí đơn giản

Để trang trí cho trang mình sẽ cung cấp một số hiệu ứng và banner câu đối,... Bạn chỉ cần chèn đoạn code bên dưới vào trước kết thúc phần thân trang web.

Hiệu ứng hoa mai vàng rơi

{getButton} $text={Live Preview} $icon={preview} $color={#27ae60}

Code:

<style>

.g-snows{position:relative;z-index:9999}.g-snows>li{opacity:0;position:fixed;top:0;border-radius:100%;background-color:#fff;background-repeat:no-repeat;background-size:100% auto;animation-name:snow-drop;animation-iteration-count:infinite;animation-timing-function:linear;animation-fill-mode:forwards;background:url(https://1.bp.blogspot.com/-QsabW6gzIzs/X-6sdiYCZ1I/AAAAAAAADfw/kROKXwxwnpoQwwKlXgZ4JhC-dphtp__5wCLcBGAsYHQ/s75/leaf.png)}.g-snows>li:nth-child(1){left:17%;width:7px;height:7px;animation-duration:7606ms;animation-delay:799ms}.g-snows>li:nth-child(2){left:11%;width:8px;height:8px;animation-duration:8647ms;animation-delay:2075ms}.g-snows>li:nth-child(3){left:26%;width:3px;height:3px;animation-duration:10316ms;animation-delay:3343ms}.g-snows>li:nth-child(4){left:15%;width:1px;height:1px;animation-duration:8168ms;animation-delay:2786ms}.g-snows>li:nth-child(5){left:11%;width:9px;height:9px;animation-duration:10347ms;animation-delay:4057ms}.g-snows>li:nth-child(6){left:6%;width:3px;height:3px;animation-duration:7051ms;animation-delay:4937ms}.g-snows>li:nth-child(7){left:54%;width:2px;height:2px;animation-duration:8869ms;animation-delay:3447ms}.g-snows>li:nth-child(8){left:67%;width:2px;height:2px;animation-duration:5289ms;animation-delay:1182ms}.g-snows>li:nth-child(9){left:77%;width:3px;height:3px;animation-duration:12310ms;animation-delay:3776ms}.g-snows>li:nth-child(10){left:2%;width:1px;height:1px;animation-duration:7970ms;animation-delay:2728ms}.g-snows>li:nth-child(11){left:84%;width:5px;height:5px;animation-duration:13254ms;animation-delay:4258ms}.g-snows>li:nth-child(12){left:57%;width:19px;height:19px;animation-duration:7924ms;animation-delay:4205ms}.g-snows>li:nth-child(13){left:60%;width:12px;height:12px;animation-duration:10346ms;animation-delay:3012ms}.g-snows>li:nth-child(14){left:81%;width:5px;height:5px;animation-duration:5360ms;animation-delay:2400ms}.g-snows>li:nth-child(15){left:91%;width:7px;height:7px;animation-duration:7269ms;animation-delay:634ms}.g-snows>li:nth-child(16){left:19%;width:6px;height:6px;animation-duration:5056ms;animation-delay:4718ms}.g-snows>li:nth-child(17){left:53%;width:11px;height:11px;animation-duration:7889ms;animation-delay:3311ms}.g-snows>li:nth-child(18){left:18%;width:7px;height:7px;animation-duration:6965ms;animation-delay:551ms}.g-snows>li:nth-child(19){left:24%;width:6px;height:6px;animation-duration:11998ms;animation-delay:4786ms}.g-snows>li:nth-child(20){left:83%;width:11px;height:11px;animation-duration:5149ms;animation-delay:960ms}.g-snows>li:nth-child(21){left:16%;width:8px;height:8px;animation-duration:6557ms;animation-delay:2575ms}.g-snows>li:nth-child(22){left:1%;width:4px;height:4px;animation-duration:7648ms;animation-delay:1833ms}.g-snows>li:nth-child(23){left:40%;width:4px;height:4px;animation-duration:12003ms;animation-delay:842ms}.g-snows>li:nth-child(24){left:58%;width:4px;height:4px;animation-duration:11412ms;animation-delay:2657ms}.g-snows>li:nth-child(25){left:76%;width:6px;height:6px;animation-duration:9239ms;animation-delay:4499ms}.g-snows>li:nth-child(26){left:22%;width:3px;height:3px;animation-duration:8995ms;animation-delay:1831ms}.g-snows>li:nth-child(27){left:115%;width:3px;height:3px;animation-duration:7498ms;animation-delay:2107ms}.g-snows>li:nth-child(28){left:104%;width:8px;height:8px;animation-duration:6177ms;animation-delay:2927ms}.g-snows>li:nth-child(29){left:61%;width:9px;height:9px;animation-duration:8308ms;animation-delay:643ms}.g-snows>li:nth-child(30){left:72%;width:14px;height:14px;animation-duration:6638ms;animation-delay:1359ms}.g-snows>li:nth-child(31){left:102%;width:16px;height:16px;animation-duration:11059ms;animation-delay:1638ms}.g-snows>li:nth-child(32){left:19%;width:0;height:0;animation-duration:11785ms;animation-delay:2803ms}.g-snows>li:nth-child(33){left:12%;width:6px;height:6px;animation-duration:5041ms;animation-delay:939ms}.g-snows>li:nth-child(34){left:46%;width:3px;height:3px;animation-duration:6932ms;animation-delay:1243ms}.g-snows>li:nth-child(35){left:131%;width:5px;height:5px;animation-duration:7856ms;animation-delay:241ms}.g-snows>li:nth-child(36){left:23%;width:7px;height:7px;animation-duration:7784ms;animation-delay:1985ms}.g-snows>li:nth-child(37){left:47%;width:4px;height:4px;animation-duration:11446ms;animation-delay:3203ms}.g-snows>li:nth-child(38){left:6%;width:7px;height:7px;animation-duration:9481ms;animation-delay:3415ms}.g-snows>li:nth-child(39){left:30%;width:8px;height:8px;animation-duration:8956ms;animation-delay:1652ms}.g-snows>li:nth-child(40){left:93%;width:12px;height:12px;animation-duration:5497ms;animation-delay:692ms}.g-snows>li:nth-child(41){left:114%;width:13px;height:13px;animation-duration:13602ms;animation-delay:1281ms}.g-snows>li:nth-child(42){left:15%;width:17px;height:17px;animation-duration:11915ms;animation-delay:351ms}.g-snows>li:nth-child(43){left:41%;width:4px;height:4px;animation-duration:6938ms;animation-delay:1389ms}.g-snows>li:nth-child(44){left:18%;width:11px;height:11px;animation-duration:6975ms;animation-delay:1366ms}.g-snows>li:nth-child(45){left:106%;width:7px;height:7px;animation-duration:9270ms;animation-delay:1044ms}.g-snows>li:nth-child(46){left:100%;width:4px;height:4px;animation-duration:10962ms;animation-delay:4530ms}.g-snows>li:nth-child(47){left:83%;width:11px;height:11px;animation-duration:7505ms;animation-delay:2442ms}.g-snows>li:nth-child(48){left:138%;width:11px;height:11px;animation-duration:9408ms;animation-delay:3461ms}.g-snows>li:nth-child(49){left:3%;width:7px;height:7px;animation-duration:5841ms;animation-delay:235ms}.g-snows>li:nth-child(50){left:10%;width:11px;height:11px;animation-duration:8824ms;animation-delay:4533ms}.g-snows>li:nth-child(51){left:41%;width:18px;height:18px;animation-duration:7294ms;animation-delay:2462ms}.g-snows>li:nth-child(52){left:21%;width:7px;height:7px;animation-duration:5249ms;animation-delay:4972ms}.g-snows>li:nth-child(53){left:81%;width:5px;height:5px;animation-duration:5942ms;animation-delay:3218ms}.g-snows>li:nth-child(54){left:53%;width:15px;height:15px;animation-duration:7330ms;animation-delay:1843ms}.g-snows>li:nth-child(55){left:110%;width:1px;height:1px;animation-duration:12253ms;animation-delay:2349ms}.g-snows>li:nth-child(56){left:48%;width:5px;height:5px;animation-duration:8370ms;animation-delay:4697ms}.g-snows>li:nth-child(57){left:103%;width:12px;height:12px;animation-duration:10097ms;animation-delay:1066ms}.g-snows>li:nth-child(58){left:9%;width:5px;height:5px;animation-duration:5444ms;animation-delay:4619ms}.g-snows>li:nth-child(59){left:46%;width:18px;height:18px;animation-duration:11026ms;animation-delay:2997ms}.g-snows>li:nth-child(60){left:68%;width:7px;height:7px;animation-duration:12024ms;animation-delay:2287ms}.g-snows>li:nth-child(61){left:60%;width:9px;height:9px;animation-duration:6829ms;animation-delay:3002ms}.g-snows>li:nth-child(62){left:99%;width:8px;height:8px;animation-duration:7248ms;animation-delay:2183ms}.g-snows>li:nth-child(63){left:40%;width:7px;height:7px;animation-duration:6134ms;animation-delay:826ms}.g-snows>li:nth-child(64){left:70%;width:3px;height:3px;animation-duration:6371ms;animation-delay:4551ms}.g-snows>li:nth-child(65){left:61%;width:7px;height:7px;animation-duration:8345ms;animation-delay:351ms}.g-snows>li:nth-child(66){left:68%;width:10px;height:10px;animation-duration:10482ms;animation-delay:577ms}.g-snows>li:nth-child(67){left:14%;width:6px;height:6px;animation-duration:9633ms;animation-delay:3301ms}.g-snows>li:nth-child(68){left:45%;width:3px;height:3px;animation-duration:5898ms;animation-delay:3080ms}.g-snows>li:nth-child(69){left:4%;width:11px;height:11px;animation-duration:8115ms;animation-delay:3123ms}.g-snows>li:nth-child(70){left:17%;width:1px;height:1px;animation-duration:9889ms;animation-delay:4484ms}.g-snows>li:nth-child(71){left:1%;width:7px;height:7px;animation-duration:11042ms;animation-delay:4430ms}.g-snows>li:nth-child(72){left:28%;width:2px;height:2px;animation-duration:9945ms;animation-delay:343ms}.g-snows>li:nth-child(73){left:9%;width:0;height:0;animation-duration:7378ms;animation-delay:493ms}.g-snows>li:nth-child(74){left:64%;width:14px;height:14px;animation-duration:6749ms;animation-delay:1522ms}.g-snows>li:nth-child(75){left:140%;width:5px;height:5px;animation-duration:8969ms;animation-delay:645ms}.g-snows>li:nth-child(76){left:90%;width:0;height:0;animation-duration:5259ms;animation-delay:4151ms}.g-snows>li:nth-child(77){left:5%;width:4px;height:4px;animation-duration:7632ms;animation-delay:1524ms}.g-snows>li:nth-child(78){left:3%;width:18px;height:18px;animation-duration:7619ms;animation-delay:1043ms}.g-snows>li:nth-child(79){left:28%;width:15px;height:15px;animation-duration:5314ms;animation-delay:4296ms}.g-snows>li:nth-child(80){left:68%;width:2px;height:2px;animation-duration:5585ms;animation-delay:1749ms}.g-snows>li:nth-child(81){left:57%;width:7px;height:7px;animation-duration:12011ms;animation-delay:4512ms}.g-snows>li:nth-child(82){left:11%;width:4px;height:4px;animation-duration:5281ms;animation-delay:1782ms}.g-snows>li:nth-child(83){left:8%;width:5px;height:5px;animation-duration:7533ms;animation-delay:2475ms}.g-snows>li:nth-child(84){left:11%;width:10px;height:10px;animation-duration:5695ms;animation-delay:1810ms}.g-snows>li:nth-child(85){left:120%;width:6px;height:6px;animation-duration:8462ms;animation-delay:1270ms}.g-snows>li:nth-child(86){left:80%;width:3px;height:3px;animation-duration:5525ms;animation-delay:1552ms}.g-snows>li:nth-child(87){left:82%;width:5px;height:5px;animation-duration:6954ms;animation-delay:4941ms}.g-snows>li:nth-child(88){left:89%;width:10px;height:10px;animation-duration:6151ms;animation-delay:3487ms}.g-snows>li:nth-child(89){left:54%;width:11px;height:11px;animation-duration:7822ms;animation-delay:3068ms}.g-snows>li:nth-child(90){left:4%;width:1px;height:1px;animation-duration:9647ms;animation-delay:3795ms}.g-snows>li:nth-child(91){left:53%;width:9px;height:9px;animation-duration:7790ms;animation-delay:86ms}.g-snows>li:nth-child(92){left:29%;width:8px;height:8px;animation-duration:7628ms;animation-delay:3581ms}.g-snows>li:nth-child(93){left:19%;width:5px;height:5px;animation-duration:11425ms;animation-delay:3453ms}.g-snows>li:nth-child(94){left:122%;width:2px;height:2px;animation-duration:6403ms;animation-delay:1280ms}.g-snows>li:nth-child(95){left:112%;width:15px;height:15px;animation-duration:12767ms;animation-delay:1370ms}.g-snows>li:nth-child(96){left:7%;width:10px;height:10px;animation-duration:9324ms;animation-delay:852ms}.g-snows>li:nth-child(97){left:48%;width:1px;height:1px;animation-duration:9656ms;animation-delay:4767ms}.g-snows>li:nth-child(98){left:65%;width:2px;height:2px;animation-duration:5747ms;animation-delay:4544ms}.g-snows>li:nth-child(99){left:104%;width:2px;height:2px;animation-duration:7304ms;animation-delay:1576ms}.g-snows>li:nth-child(100){left:16%;width:10px;height:10px;animation-duration:6635ms;animation-delay:1066ms}.g-snows>li:nth-child(4n){width:14px;height:14px;background-position:-31px 0}.g-snows>li:nth-child(4n+1){width:16px;height:16px;background-position:0 -23px}.g-snows>li:nth-child(4n+2){width:13px;height:13px;background-position:0 -50px}.g-snows>li:nth-child(4n+3){width:15px;height:15px;background-position:-49px -35px}@keyframes snow-drop{0%{transform:translate(0,0);opacity:.5;margin-left:0}10%{margin-left:15px}20%{margin-left:20px}25%{transform:translate(0,166.66667px);opacity:.75}30%{margin-left:15px}40%{margin-left:0}50%{transform:translate(0,466.66667px);opacity:1;margin-left:-15px}60%{margin-left:-20px}70%{margin-left:-15px}75%{transform:translate(0,800px);opacity:.5}80%{margin-left:0}100%{transform:translate(0,1000px);opacity:0}}

</style>

<ul class="g-snows" id="jsi-snows"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>{codeBox}

Trang trí Tết ấn tượng cho Website/Blogspot với câu đối, hoa mai đào, pháo hoa khá độc đáo

Banner câu đối và mai vàng 2 bên

{getButton} $text={Banner câu đối} $icon={preview} $color={#27ae60}{getButton} $text={Cành mai vàng} $icon={preview} $color={#27ae60}

Code câu đối:

<style>.tet{display:scroll;position:fixed;top:0px;z-index:999}.tet-left{left:0}.tet-right{right:0}@media (max-width:800px){.tet{display:none}}</style>

<img class='tet tet-left' src='https://1.bp.blogspot.com/-jnoHkZl5_AM/YBgnvWeDMmI/AAAAAAAADy0/R-kqgeeWA5YxmPoN7oZWG4SQeyHYtSoQACLcBGAsYHQ/s522/caudoitet1.webp'/>

<img class='tet tet-right' src='https://1.bp.blogspot.com/-l49qL0RM4Qg/YBgnvdfRExI/AAAAAAAADyw/o0av3DGxSfY7jrzMHxoTuoC1u8FPSYlCgCLcBGAsYHQ/s522/caudoitet2.webp'/>{codeBox}

Code mai vàng:

<style>.tet{display:scroll;position:fixed;top:0px;z-index:999}.tet-left{left:0}.tet-right{right:0}@media (max-width:800px){.tet{display:none}}</style>

<img class='tet tet-left' src='https://1.bp.blogspot.com/-4pEU8vfNSVg/YTrQuF7u5lI/AAAAAAAAHrU/KjGUCp0aW_4D89y2RnxMY7dotxwS3CgTACLcBGAsYHQ/s0/canh-mai-ben-trai.png' style='width:160px;'/>

<img class='tet tet-right' src='https://1.bp.blogspot.com/-YmwJNKuOTls/YTrQuNARLAI/AAAAAAAAHrQ/nSt-mfJa8vAxFWZWO8tZ74XvBpkmsrqDwCLcBGAsYHQ/s0/canh-mai-ben-phai.png' style='width:160px;'/>{codeBox}

Hiệu ứng pháo hoa

{getButton} $text={Hiệu ứng 1} $icon={preview} $color={#27ae60}{getButton} $text={Hiệu ứng 2} $icon={preview} $color={#27ae60}

Code hiệu ứng 1:

<canvas id="canvas">Canvas is not supported in your browser.</canvas>

<style>canvas {cursor: crosshair;display: block;width: 100%;}</style>

<script>

//<![CDATA[

// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval

// not supported in all browsers though and sometimes needs a prefix, so we need a shim

window.requestAnimFrame = ( function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ) {

window.setTimeout( callback, 1000 / 60 );

};

})();


// now we will setup our basic variables for the demo

var canvas = document.getElementById( 'canvas' ),

ctx = canvas.getContext( '2d' ),

// full screen dimensions

cw = window.innerWidth,

ch = window.innerHeight,

// firework collection

fireworks = [],

// particle collection

particles = [],

// starting hue

hue = 120,

// when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks

limiterTotal = 5,

limiterTick = 0,

// this will time the auto launches of fireworks, one launch per 80 loop ticks

timerTotal = 80,

timerTick = 0,

mousedown = false,

// mouse x coordinate,

mx,

// mouse y coordinate

my;

// set canvas dimensions

canvas.width = cw;

canvas.height = ch;


// now we are going to setup our function placeholders for the entire demo


// get a random number within a range

function random( min, max ) {

return Math.random() * ( max - min ) + min;

}


// calculate the distance between two points

function calculateDistance( p1x, p1y, p2x, p2y ) {

var xDistance = p1x - p2x,

yDistance = p1y - p2y;

return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );

}


// create firework

function Firework( sx, sy, tx, ty ) {

// actual coordinates

this.x = sx;

this.y = sy;

// starting coordinates

this.sx = sx;

this.sy = sy;

// target coordinates

this.tx = tx;

this.ty = ty;

// distance from starting point to target

this.distanceToTarget = calculateDistance( sx, sy, tx, ty );

this.distanceTraveled = 0;

// track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails

this.coordinates = [];

this.coordinateCount = 3;

// populate initial coordinate collection with the current coordinates

while( this.coordinateCount-- ) {

this.coordinates.push( [ this.x, this.y ] );

}

this.angle = Math.atan2( ty - sy, tx - sx );

this.speed = 2;

this.acceleration = 1.05;

this.brightness = random( 50, 70 );

// circle target indicator radius

this.targetRadius = 1;

}


// update firework

Firework.prototype.update = function( index ) {

// remove last item in coordinates array

this.coordinates.pop();

// add current coordinates to the start of the array

this.coordinates.unshift( [ this.x, this.y ] );

// cycle the circle target indicator radius

if( this.targetRadius < 8 ) {

this.targetRadius += 0.3;

} else {

this.targetRadius = 1;

}

// speed up the firework

this.speed *= this.acceleration;

// get the current velocities based on angle and speed

var vx = Math.cos( this.angle ) * this.speed,

vy = Math.sin( this.angle ) * this.speed;

// how far will the firework have traveled with velocities applied?

this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );

// if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached

if( this.distanceTraveled >= this.distanceToTarget ) {

createParticles( this.tx, this.ty );

// remove the firework, use the index passed into the update function to determine which to remove

fireworks.splice( index, 1 );

} else {

// target not reached, keep traveling

this.x += vx;

this.y += vy;

}

}


// draw firework

Firework.prototype.draw = function() {

ctx.beginPath();

// move to the last tracked coordinate in the set, then draw a line to the current x and y

ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );

ctx.lineTo( this.x, this.y );

ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';

ctx.stroke();

ctx.beginPath();

// draw the target for this firework with a pulsing circle

ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );

ctx.stroke();

}


// create particle

function Particle( x, y ) {

this.x = x;

this.y = y;

// track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails

this.coordinates = [];

this.coordinateCount = 5;

while( this.coordinateCount-- ) {

this.coordinates.push( [ this.x, this.y ] );

}

// set a random angle in all possible directions, in radians

this.angle = random( 0, Math.PI * 2 );

this.speed = random( 1, 10 );

// friction will slow the particle down

this.friction = 0.95;

// gravity will be applied and pull the particle down

this.gravity = 1;

// set the hue to a random number +-20 of the overall hue variable

this.hue = random( hue - 20, hue + 20 );

this.brightness = random( 50, 80 );

this.alpha = 1;

// set how fast the particle fades out

this.decay = random( 0.015, 0.03 );

}


// update particle

Particle.prototype.update = function( index ) {

// remove last item in coordinates array

this.coordinates.pop();

// add current coordinates to the start of the array

this.coordinates.unshift( [ this.x, this.y ] );

// slow down the particle

this.speed *= this.friction;

// apply velocity

this.x += Math.cos( this.angle ) * this.speed;

this.y += Math.sin( this.angle ) * this.speed + this.gravity;

// fade out the particle

this.alpha -= this.decay;

// remove the particle once the alpha is low enough, based on the passed in index

if( this.alpha <= this.decay ) {

particles.splice( index, 1 );

}

}


// draw particle

Particle.prototype.draw = function() {

ctx. beginPath();

// move to the last tracked coordinates in the set, then draw a line to the current x and y

ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );

ctx.lineTo( this.x, this.y );

ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';

ctx.stroke();

}


// create particle group/explosion

function createParticles( x, y ) {

// increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though

var particleCount = 30;

while( particleCount-- ) {

particles.push( new Particle( x, y ) );

}

}


// main demo loop

function loop() {

// this function will run endlessly with requestAnimationFrame

requestAnimFrame( loop );

// increase the hue to get different colored fireworks over time

hue += 0.5;

// normally, clearRect() would be used to clear the canvas

// we want to create a trailing effect though

// setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely

ctx.globalCompositeOperation = 'destination-out';

// decrease the alpha property to create more prominent trails

ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';

ctx.fillRect( 0, 0, cw, ch );

// change the composite operation back to our main mode

// lighter creates bright highlight points as the fireworks and particles overlap each other

ctx.globalCompositeOperation = 'lighter';

// loop over each firework, draw it, update it

var i = fireworks.length;

while( i-- ) {

fireworks[ i ].draw();

fireworks[ i ].update( i );

}

// loop over each particle, draw it, update it

var i = particles.length;

while( i-- ) {

particles[ i ].draw();

particles[ i ].update( i );

}

// launch fireworks automatically to random coordinates, when the mouse isn't down

if( timerTick >= timerTotal ) {

if( !mousedown ) {

// start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen

fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );

timerTick = 0;

}

} else {

timerTick++;

}

// limit the rate at which fireworks get launched when mouse is down

if( limiterTick >= limiterTotal ) {

if( mousedown ) {

// start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target

fireworks.push( new Firework( cw / 2, ch, mx, my ) );

limiterTick = 0;

}

} else {

limiterTick++;

}

}


// mouse event bindings

// update the mouse coordinates on mousemove

canvas.addEventListener( 'mousemove', function( e ) {

mx = e.pageX - canvas.offsetLeft;

my = e.pageY - canvas.offsetTop;

});


// toggle mousedown state and prevent canvas from being selected

canvas.addEventListener( 'mousedown', function( e ) {

e.preventDefault();

mousedown = true;

});


canvas.addEventListener( 'mouseup', function( e ) {

e.preventDefault();

mousedown = false;

});


// once the window loads, we are ready for some fireworks!

window.onload = loop;

//]]>

</script>{codeBox}

Code hiệu ứng 2:

<script>

//<![CDATA[

var bits=90;var speed=33;var bangs=7;var colours=new Array("#03f","#f03","#fff","#f7efa1","#0cf","#f93","#f0c","#fff");var bangheight=new Array();var intensity=new Array();var colour=new Array();var Xpos=new Array();var Ypos=new Array();var dX=new Array();var dY=new Array();var stars=new Array();var decay=new Array();var swide=800;var shigh=600;var boddie;window.onload=function(){if(document.getElementById){var i;boddie=document.createElement("div");boddie.style.position="fixed";boddie.style.top="0px";boddie.style.left="0px";boddie.style.overflow="visible";boddie.style.width="1px";boddie.style.height="1px";boddie.style.backgroundColor="transparent";document.body.appendChild(boddie);set_width();for(i=0;i<bangs;i++){write_fire(i);launch(i);setInterval('stepthrough('+i+')',speed);}}}

function write_fire(N){var i,rlef,rdow;stars[N+'r']=createDiv('|',12);boddie.appendChild(stars[N+'r']);for(i=bits*N;i<bits+bits*N;i++){stars[i]=createDiv('*',13);boddie.appendChild(stars[i]);}}

function createDiv(char,size){var div=document.createElement("div");div.style.font=size+"px monospace";div.style.position="absolute";div.style.backgroundColor="transparent";div.appendChild(document.createTextNode(char));return(div);}

function launch(N){colour[N]=Math.floor(Math.random()*colours.length);Xpos[N+"r"]=swide*0.5;Ypos[N+"r"]=shigh-5;bangheight[N]=Math.round((0.5+Math.random())*shigh*0.4);dX[N+"r"]=(Math.random()-0.5)*swide/bangheight[N];if(dX[N+"r"]>1.25)stars[N+"r"].firstChild.nodeValue="/";else if(dX[N+"r"]<-1.25)stars[N+"r"].firstChild.nodeValue="\\";else stars[N+"r"].firstChild.nodeValue="|";stars[N+"r"].style.color=colours[colour[N]];}

function bang(N){var i,Z,A=0;for(i=bits*N;i<bits+bits*N;i++){Z=stars[i].style;Z.left=Xpos[i]+"px";Z.top=Ypos[i]+"px";if(decay[i])decay[i]--;else A++;if(decay[i]==15)Z.fontSize="10px";else if(decay[i]==7)Z.fontSize="2px";else if(decay[i]==1)Z.visibility="hidden";Xpos[i]+=dX[i];Ypos[i]+=(dY[i]+=1.25/intensity[N]);}

if(A!=bits)setTimeout("bang("+N+")",speed);}

function stepthrough(N){var i,M,Z;var oldx=Xpos[N+"r"];var oldy=Ypos[N+"r"];Xpos[N+"r"]+=dX[N+"r"];Ypos[N+"r"]-=4;if(Ypos[N+"r"]<bangheight[N]){M=Math.floor(Math.random()*3*colours.length);intensity[N]=5+Math.random()*4;for(i=N*bits;i<bits+bits*N;i++){Xpos[i]=Xpos[N+"r"];Ypos[i]=Ypos[N+"r"];dY[i]=(Math.random()-0.5)*intensity[N];dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;decay[i]=25+Math.floor(Math.random()*25);Z=stars[i];if(M<colours.length)Z.style.color=colours[i%2?colour[N]:M];else if(M<2*colours.length)Z.style.color=colours[colour[N]];else Z.style.color=colours[i%colours.length];Z.style.fontSize="20px";Z.style.visibility="visible";}

bang(N);launch(N);}

stars[N+"r"].style.left=oldx+"px";stars[N+"r"].style.top=oldy+"px";}

window.onresize=set_width;function set_width(){var sw_min=999999;var sh_min=999999;if(document.documentElement&&document.documentElement.clientWidth){if(document.documentElement.clientWidth>0)sw_min=document.documentElement.clientWidth;if(document.documentElement.clientHeight>0)sh_min=document.documentElement.clientHeight;}

if(typeof(self.innerWidth)!="undefined"&&self.innerWidth){if(self.innerWidth>0&&self.innerWidth<sw_min)sw_min=self.innerWidth;if(self.innerHeight>0&&self.innerHeight<sh_min)sh_min=self.innerHeight;}

if(document.body.clientWidth){if(document.body.clientWidth>0&&document.body.clientWidth<sw_min)sw_min=document.body.clientWidth;if(document.body.clientHeight>0&&document.body.clientHeight<sh_min)sh_min=document.body.clientHeight;}

if(sw_min==999999||sh_min==999999){sw_min=800;sh_min=600;}

swide=sw_min;shigh=sh_min;}

//]]>

</script>{codeBox}

Hiệu ứng âm thanh

Để thêm không khí tưng bừng của ngày tết đi đôi với câu đối pháo hoa, bạn có thể chèn nhạc nền hoặc là âm thanh bắn pháo hoa ngày tết cho thêm phần rộn ràng nhé!

Code:

<audio autoplay='true' src='https://drive.google.com/uc?export=download&id=1DE7-rtO14PKELMTfbR71rvo-eR89RNlb'/>{codeBox}

Ở đây yêu cầu là tệp .mp3 nên bạn chỉ cần tải nhạc, âm thanh định dạng .mp3 sau đó tải lên Google Drive lấy link và truy cập trang sau {getButton} $text={Google Drive Direct Link Generator} $icon={link} $color={#8e44ad} để có thể lấy được liên kết trực tiếp và thay thế liên kết ở phía trên nhé!

Tham khảo thêm một số cách trang trí tết

Logo: Điều đầu tiên khi trang trí website tết là thay đổi những kí tự, hình ảnh trong logo thành biểu tượng năm 2022 hoặc tạo những chùm pháo bông là cách làm hiệu quả để logo trông sinh động và hấp dẫn hơn.

Background: Nhiều người nghĩ rằng càng đặt nhiều chi tiết Tết vào website thì trông mới thực sự thu hút, nhưng trên thực tế việc tạo càng nhiều mẫu nhỏ chỉ khiến website vừa rối mắt vừa mất thời gian tải trang. Bạn có thểm tham khảo một số mẫu ảnh nền tết để thay đổi {getButton} $text={Background Tết} $icon={share} $color={#e74c3c}.

Kết luận

Trên đây thì mình cũng đã chia sẻ tới các bạn một số cách trang trí Tết cho web/blog, giúp trang của bạn bắt mắt và giúp người đọc cảm thấy có không khí tết hơn rồi phải không nào! Chúc bạn có 1 năm mới tốt đẹp và đừng quên 5K của Bộ Y Tế nhé, Tết nhưng vẫn phải an toàn cho mình và người thân.

Trang trí Tết ấn tượng cho Website/Blogspot với câu đối, hoa mai đào, pháo hoa khá độc đáo
QTV

Xin chào các bạn. Khi bạn ghé thăm đến đây thì những gì ở đây là những thứ bạn đang cần tìm kiếm. Bạn chỉ mất khoảng 2 phút để có thể hiểu và làm được. Nhưng mình mất 2 giờ đồng hồ để tạo ra chúng. Vậy nên nếu thấy bài viết hay hãy chia sẻ giúp mình nhé! google facebook

2
Nhận xét

Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang Upload Image, sao chép link ảnh vào khung bình luận.

  1. Cảm ơn bạn, các hiệu ứng rất đẹp, mình sẽ thêm nó vào trang của mình <3

    Trả lờiXóa
Báo link hỏng | Hỗ trợ kỹ thuật | Khắc phục quá giới hạn lượt tải
TruongBlogger là website chia sẻ miễn phí các thủ thuật phần mềm cũng như phần cứng trong lĩnh vực công nghệ. Các phần mềm được chia sẻ trên TruongBlogger nên dùng cho mục đích dùng thử. Nếu thấy phần mềm tốt, hãy mua bản quyền để ủng hộ tác giả.
"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" bạn hãy tắt AdsBlock và dành thời gian click QUẢNG CÁO để ủng hộ mình nhé!