Code trang trí tết cho website

 hí anh em, gần tết rồi, nhiều nhà đã chuẩn bị mọi thứ cho việc đón tết. từ dọn và lao nhà cửa, thì còn phải trang trí cho đẹp, đặc biệt là phải có bánh mức hay cành mai đào trưng vào dịp tết. ....

Code trang trí tết cho website

và trang trí bên ngoài thì chưa đủ, chúng ta hãy cùng trang trí thêm bên trong, đó là website của chúng ta. hãy coi một website như một ngôi nhà,  và chúng ta hãy trang trí cho nó thêm cành mai đào để có thêm không khí tết nhá. 

và sau đây với những code này mà lấy đi trang trí cho website của các bạn thì phải gọi là bá cháy lun ấy chứ. ;>>>

code này thì nó sẽ hỗ trợ cả cho blogger/wordpress và nhiều nền tảng khác nữa nhá. 

NỘI DUNG BÀI VIẾT

1. Code 1: hoa mai/ đào rơi
2. code 2 hoa mai hoa đào rơi, tối ưu
3. code 3 trang trí tết bằng cành mai, câu đối đỏ. 
4. Happy New Years

Code 1: hoa mai/ đào rơi

copy toàn bộ code bên dưới và dán vào phía trên thẻ </body>

<script type='text/javascript'>    //<![CDATA[    var pictureSrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtKr5Ia12TITHsjfAvKUXmKMZKAZwpH0M3_NFqzcrfupjhLyiqf9YN67dp-pGZndD_Gau_amETq-_yJ4VGevyGyEtgRCITWa3bfdTrOwNNIRc40uhWY_oZqZhFq44elSZkdjN327SGY6U/s1600/hoamai.png"; //Link ảnh hoa muốn hiển thị trên web    var pictureWidth = 15; //Chiều rộng của hoa mai or đào    var pictureHeight = 15; //Chiều cao của hoa mai or đào    var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web    var downSpeed = 0.01; //Tốc độ rơi của hoa    var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại    if (typeof(numFlakes) != 'number' || Math.round(numFlakes) != numFlakes || numFlakes < 1) {        numFlakes = 10;    }    //draw the snowflakes    for (var x = 0; x < numFlakes; x++) {        if (document.layers) { //releave NS4 bug            document.write('<layer id="snFlkDiv' + x + '"><imgsrc="' + pictureSrc + '" height="' + pictureHeight + '"width="' + pictureWidth + '" alt="*" border="0"></layer>');        } else {            document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv' + x + '"><img src="' + pictureSrc + '"height="' + pictureHeight + '" width="' + pictureWidth + '" alt="*"border="0"></div>');        }    }    //calculate initial positions (in portions of browser window size)    var xcoords = new Array(),        ycoords = new Array(),        snFlkTemp;    for (var x = 0; x < numFlakes; x++) {        xcoords[x] = (x + 1) / (numFlakes + 1);        do {            snFlkTemp = Math.round((numFlakes - 1) * Math.random());        } while (typeof(ycoords[snFlkTemp]) == 'number');        ycoords[snFlkTemp] = x / numFlakes;    }    //now animate    function flakeFall() {        if (!getRefToDivNest('snFlkDiv0')) {            return;        }        var scrWidth = 0,            scrHeight = 0,            scrollHeight = 0,            scrollWidth = 0;        //find screen settings for all variations. doing this every time allows for resizing and scrolling        if (typeof(window.innerWidth) == 'number') {            scrWidth = window.innerWidth;            scrHeight = window.innerHeight;        } else {            if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {                scrWidth = document.documentElement.clientWidth;                scrHeight = document.documentElement.clientHeight;            } else {                if (document.body && (document.body.clientWidth || document.body.clientHeight)) {                    scrWidth = document.body.clientWidth;                    scrHeight = document.body.clientHeight;                }            }        }        if (typeof(window.pageYOffset) == 'number') {            scrollHeight = pageYOffset;            scrollWidth = pageXOffset;        } else {            if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {                scrollHeight = document.body.scrollTop;                scrollWidth = document.body.scrollLeft;            } else {                if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {                    scrollHeight = document.documentElement.scrollTop;                    scrollWidth = document.documentElement.scrollLeft;                }            }        }        //move the snowflakes to their new position        for (var x = 0; x < numFlakes; x++) {            if (ycoords[x] * scrHeight > scrHeight - pictureHeight) {                ycoords[x] = 0;            }            var divRef = getRefToDivNest('snFlkDiv' + x);            if (!divRef) {                return;            }            if (divRef.style) {                divRef = divRef.style;            }            var oPix = document.childNodes ? 'px' : 0;            divRef.top = (Math.round(ycoords[x] * scrHeight) + scrollHeight) + oPix;            divRef.left = (Math.round(((xcoords[x] * scrWidth) - (pictureWidth / 2)) + ((scrWidth / ((numFlakes + 1) * 4)) * (Math.sin(lrFlakes * ycoords[x]) - Math.sin(3 * lrFlakes * ycoords[x])))) + scrollWidth) + oPix;            ycoords[x] += downSpeed;        }    }    //DHTML handlers    function getRefToDivNest(divName) {        if (document.layers) {            return document.layers[divName];        } //NS4        if (document[divName]) {            return document[divName];        } //NS4 also        if (document.getElementById) {            return document.getElementById(divName);        } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)        if (document.all) {            return document.all[divName];        } //Proprietary DOM - IE4        return false;    }    window.setInterval('flakeFall();', 100);    //]]></script>

mọi người có thể thay link ảnh hoa muốn hiển thị thành link ảnh hoa khác. ở đây mình sẽ hỗ trợ cho mọi người là hoa mai và hoa đào. 

link ảnh hoa đào: 

https://blogger.googleusercontent.com/img/a/AVvXsEiGwiKY4UEVHwcigi0lLQ6z43PYHoscMVaIsV2umnXlIP3UFgD_zsvkAZ5xY5BihQzm8mWSlB1oWkPFetYgv0Hs7MPwLTduLS2afd_NQyxja4Bjp8XMP7lPR4fDgZ38asrlHRwtywb3nW5RlSECQpi7DnpkrrqH0WrUB_hHRYMbinqR9p2qpgbBusqZxA=s320

code 2 hoa mai hoa đào rơi, tối ưu

code này thì mình đã tối ưu, nó ngắn ngọn và dễ dùng hơn code ở phái trên. code cũng mượt mà hơn ở trên. 

code html dán vào phía trên thẻ </body>

 <div id='tet'>        <p class='tetkimidev'><img style="width:20px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtKr5Ia12TITHsjfAvKUXmKMZKAZwpH0M3_NFqzcrfupjhLyiqf9YN67dp-pGZndD_Gau_amETq-_yJ4VGevyGyEtgRCITWa3bfdTrOwNNIRc40uhWY_oZqZhFq44elSZkdjN327SGY6U/s1600/hoamai.png" /></p>        </div>

code css

<style>        #tet{position:absolute;left:0px;top:0px;}	.tetkimidev{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color:#ebebeb;user-select:none;z-index:1000;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}	.tetkimidev:hover {cursor:default}    </style>

code js dán vào phía trên thẻ </body> 

<script>            //<![CDATA[                var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;                var transforms=["transform","msTransform","webkitTransform","mozTransform","oTransform"];                var transformProperty=getSupportedPropertyName(transforms);                var tetkimidevs=[];                var browserWidth;                var browserHeight;                var numberOftetkimidevs=39;                var resetPosition=false;                function setup(){                    window.addEventListener("DOMContentLoaded",generatetetkimidevs,false);                    window.addEventListener("resize",setResetFlag,false)}setup();                    function getSupportedPropertyName(b){                        for(var a=0;a<b.length;a++){                            if(typeof document.body.style[b[a]]!="undefined"){                                return b[a]}}return null}                                function tetkimidev(b,a,d,e,c){                                    this.element=b;                                    this.radius=a;                                    this.speed=d;                                    this.xPos=e;                                    this.yPos=c;                                    this.counter=0;                                    this.sign=Math.random()<0.5?1:-1;                                    this.element.style.opacity=0.5+Math.random();                                    this.element.style.fontSize=4+Math.random()*30+"px"                                }                                tetkimidev.prototype.update=function(){                                    this.counter+=this.speed/5000;                                    this.xPos+=this.sign*this.speed*Math.cos(this.counter)/40;                                    this.yPos+=Math.sin(this.counter)/40+this.speed/30;setTranslate3DTransform(this.element,Math.round(this.xPos),Math.round(this.yPos));                                    if(this.yPos>browserHeight){this.yPos=-50}};function setTranslate3DTransform(a,c,b){                                        var d="translate3d("+c+"px, "+b+"px, 0)";a.style[transformProperty]=d                                    }                                        function generatetetkimidevs(){                                            var b=document.querySelector(".tetkimidev");                                            var h=b.parentNode;browserWidth=document.documentElement.clientWidth;                                            browserHeight=document.documentElement.clientHeight;for(var d=0;d<numberOftetkimidevs;d++){                                                var j=b.cloneNode(true);h.appendChild(j);                                                var e=getPosition(50,browserWidth);                                                var a=getPosition(50,browserHeight);                                                var c=5+Math.random()*40;var g=4+Math.random()*10;                                                var f=new tetkimidev(j,g,c,e,a);                                                tetkimidevs.push(f)                                            }h.removeChild(b);                                            movetetkimidevs()}                                            function movetetkimidevs(){for(var b=0;b<tetkimidevs.length;b++){                                                var a=tetkimidevs[b];a.update()                                            }                                                if(resetPosition){browserWidth=document.documentElement.clientWidth;                                                    browserHeight=document.documentElement.clientHeight;for(var b=0;b<tetkimidevs.length;b++){                                                        var a=tetkimidevs[b];a.xPos=getPosition(50,browserWidth);                                                        a.yPos=getPosition(50,browserHeight)}resetPosition=false}requestAnimationFrame(movetetkimidevs)}                                                        function getPosition(b,a){return Math.round(-1*b+Math.random()*(a+2*b))}                                                        function setResetFlag(a){resetPosition=true};                //]]>            </script>

đây là code mà mình đã tối ưu và nó khá mượt, mọi người cũng có thể thay link ảnh tại HTML thành link của hoa hình ảnh khác. 

code 3 trang trí tết bằng cành mai, câu đối đỏ. 

code html dán vào phái trên thẻ </body>

<div class="kimidev-tet-left" ><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLobG5ENPLtHs7-piwW7NxmouhUFQUvfkVOJnG2AGp5zei3sdnDpcebiW3GjKk7yCpZTudmW74iBCNd6Sw5tB7fm6956chh4wpO_kV219pfKzRRaLKLTHqDy9ukvlneiBiVqwseQ34MbuD/s0/nam-moi-hanh-phuc-binh-an-den.png" style="width:130px;"/></div><div class="kimidev-tet-right"><img alt="Trang trí đón tết cho blog/website bằng hình ảnh câu đối, cành mai" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQRwDZzidijdzlQ3w9DVB7MMjMT1tEnmBm3HzrLuXzaD6f72PU4Js3iI4ueHw3pYBSZgXSHbditDs1TUd46CBvfQhSFSJCQaLhtVjkqB8Ee3hrtguRwNoJj_4faeEBjU2Uul8LHNDTi54U/s0/ngay-xuan-vinh-hoa-phu-quy-ve.png" style="width:130px;"/></div>

code css

 <style>        .kimidev-tet-left{position:fixed;top:0;left:0;z-index:9999}.kimidev-tet-right{position:fixed;top:0;right:0;z-index:9999}@media(max-width:767px){.kimidev-tet-left,.kimidev-tet-right{display:none!important}}    </style>

okii thì phía trên là 3 code trang trí tết cho website của bạn, nếu như có thắc mắc hay không hiểu chỗ nào thì mọi người có thể comment bên dưới cho mình biết mình sẽ giải đáp cho mọi người. 

chúc mọi người có một năm mới thật là zui zẻ và hạnh phúc bên gia đình của mình nhá. 

Happy New Years