Tổng hợp Code trang trí tết cho Website

Chào mừng các bạn đến với bài hướng dẫn Office tiếp theo trong GOGOhalloween.  

Tại một cái tết đến gần, chúng ta cũng cần trang trí Website của mình cho có không khí vui tươi của mùa xuân. Trong bài này mình sẽ tổng hợp một số code javascript, css để tạo cảnh hoa đào, hoa mai rơi, và các câu đối tết giúp Website bạn sinh động hơn.

Code đối tết cho Website ở góc Website

CSS:

<style type="text/css">
        .tet_left img, .tet_right img {
            width: 100%;
            height: auto;
        }
        .tet_left, .tet_right {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
            width: 191px;
            pointer-events: none;
        }
        .tet_right {
            left: auto;
            right: 0;
            width: 191px;
        }
                .tet_bottom {
            position: fixed;
            bottom: 0;
            left: 80px;
            z-index: 99;
            width: 320px;
            pointer-events: none;
        }
                @media (max-width: 1331px){
            .tet_left, .tet_right, .tet_bottom{
                display: none !important;
            }
        }
</style>

Đoạn này đặt trong thẻ Head của Website


<div class="tet_left"><img src="https://anonyviet.com/resource/hodaoroi/left-1.png" alt="AnonyViet-Tet"/></div>
<div class="tet_right"><img src="https://anonyviet.com/resource/hodaoroi/right-1.png" alt="AnonyViet-Tet"/></div>
<div class="tet_bottom"><img src="https://anonyviet.com/resource/hodaoroi/bottom-1.png" alt="AnonyViet-Tet"/></div>

Code hoa đào rơi

Copy đoạn Javascript này đặt trong giữa thẻ <head></head> cho Website.

<script type="text/javascript">
        var no = 20;
        if (matchMedia('only screen and (max-width: 767px)').matches) {
            no = 10        }
        let img_url = 'https://anonyviet.com/resource/hodaoroi/hoadao.png';
        var hidesnowtime = 0;
        var color_snow  = '#fff';
        var snowdistance = 'windowheight'; // windowheight or pageheight;
        var ie4up = (document.all) ? 1 : 0;
        var ns6up = (document.getElementById && !document.all) ? 1 : 0;

        function iecompattest() {
            return (document.compatMode && document.compatMode != 'BackCompat') ? document.documentElement : document.body
        }

        var dx, xp, yp;
        var am, stx, sty;
        var i, doc_width = 800, doc_height = 600;
        if (ns6up) {
            doc_width = self.innerWidth;
            doc_height = self.innerHeight
        } else if (ie4up) {
            doc_width = iecompattest().clientWidth;
            doc_height = iecompattest().clientHeight
        }
        dx = new Array();
        xp = new Array();
        yp = new Array();
        am = new Array();
        stx = new Array();
        sty = new Array();
        for (i = 0; i < no; ++i) {
            dx[i] = 0;
            xp[i] = Math.random() * (doc_width - 50);
            yp[i] = Math.random() * doc_height;
            am[i] = Math.random() * 20;
            stx[i] = 0.02 + Math.random() / 10;
            sty[i] = 0.7 + Math.random();
            if (ie4up || ns6up) {
                document.write('<div id="dot'+i+'" style="POSITION:fixed;Z-INDEX:'+(99+i)+';VISIBILITY:visible;TOP:15px;LEFT:15px;pointer-events: none;width:15px"><span style="font-size:18px;color:'+color_snow+'"><img src="'+img_url+'" alt=""></span></div>');
            }
        }

        function snowIE_NS6() {
            doc_width = ns6up ? window.innerWidth - 10 : iecompattest().clientWidth - 10;
            doc_height = (window.innerHeight && snowdistance == 'windowheight') ? window.innerHeight : (ie4up && snowdistance == 'windowheight') ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == 'pageheight') ? iecompattest().scrollHeight : iecompattest().offsetHeight;
            for (i = 0; i < no; ++i) {
                yp[i] += sty[i];
                if (yp[i] > doc_height - 50) {
                    xp[i] = Math.random() * (doc_width - am[i] - 30);
                    yp[i] = 0;
                    stx[i] = 0.02 + Math.random() / 10;
                    sty[i] = 0.7 + Math.random()
                }
                dx[i] += stx[i];
                document.getElementById('dot' + i).style.top = yp[i] + 'px';
                document.getElementById('dot' + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + 'px'
            }
            snowtimer = setTimeout('snowIE_NS6()', 10)
        }

        function hidesnow() {
            if (window.snowtimer) {
                clearTimeout(snowtimer)
            }
            for (i = 0; i < no; i++) document.getElementById('dot' + i).style.visibility = 'hidden'
        }

        if (ie4up || ns6up) {
            snowIE_NS6();
            if (hidesnowtime > 0) setTimeout('hidesnow()', hidesnowtime * 1000)
        }
    </script>

Nếu bạn đang dùng WordPress có thể cài Plugin DevVN – Trang trí Tết Việt Nam cho tiện

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

 

📥 DOWNLOAD NOW

Trên đây là đường link video hướng dẫn cụ thể chi tiết từng phần mà chúng tôi đã bỏ thời gian ra làm và quay lại. Bạn hãy tải xuống và thực hiện như chúng tôi nhé!

Related Posts

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *