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á. 

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/AVvXsEiG9Q842Tk_G6kivvtSvuURtd0s7OaH9I5nf_VDczo5zS0qlNZRmDc6e9OqIathbZI609QIZDfDTxAQMozAsEW4OvvDtdEllyBJAx_kOKWgAWlVtF8BuxFp4g-OmmS6ltKYNQ_YAOsqQBI/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/AVvXsEiG9Q842Tk_G6kivvtSvuURtd0s7OaH9I5nf_VDczo5zS0qlNZRmDc6e9OqIathbZI609QIZDfDTxAQMozAsEW4OvvDtdEllyBJAx_kOKWgAWlVtF8BuxFp4g-OmmS6ltKYNQ_YAOsqQBI/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/AVvXsEiJTNspiUlNpPQWVIsfaJmm__1exotrPhyc4cJ91PaVe_m8fifeEW_ke3JSR0k70i-bwb_zZAkMPvrOZ75m1jmXIMWiE2XQAuPbUbjOHM-q7GqeJjQzSqsARfMApKNV35BZATBFGKx7oHnW/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/AVvXsEhC33pWcKsX9p1-Ovcr2BtGNh45cj1zMILM1sA0dlQAM7p1pnFE4JBald5bM1TgQfNwVMO3z2EpLL7DTR3CxGSlekaN9VuOM7OBGb2dUV4GovfdM7eNKjS7RppjPSmUdAXnIrt9qLnCXP2U/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

Design by @KiMiDev

3 Nhận xét

Cảm ơn bạn đã nhận xét, chúng tôi sẽ quay lại và trả lời cho bạn sớm nhất có thể !!!

Mới hơn Cũ hơn

Nhận xét Mới