[Đóng góp] Trang chủ Tết Bính Thân 2016

  Bài viết hay nhất1
Chào các bạn, nhân dịp Tết đến xuân về, mình xin chia sẻ cho các bạn 1 trang chủ mình đã edit từ Mèo Đz. Mình đã tắt vài cái không có quan trọng cho trang nhẹ một tí, chỉ là tắt chứ không hẵn là xóa đi, ai muộn hiện lại thì xóa style="display:none" trong mấy cái link dưới cùng á. Các bạn chỉ cần copy code lại và dán vào trang HTML.

Trang chủ Tết Bính Thân 2016


Demo

[Đóng góp] Trang chủ Tết Bính Thân 2016 Download

Source Code

Code:
<!DOCTYPE html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF8"/>
   <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
      <meta name="theme-color" content="#880043"/>
    <title>Doraeiga VN - Chúc mừng năm mới</title>
    <link rel="shortcut icon" type="image/x-icon" href="http://www.upsieutoc.com/images/2015/12/21/f_Dorayaki1.gif"/>
   <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300italic,300,400italic,700,700italic&subset=latin,vietnamese' rel='stylesheet' type='text/css'/>
   <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700|Open+Sans:800' rel='stylesheet' type='text/css'/>
   <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'/>
   <link href='http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css' rel='stylesheet'/>
    <link href="http://www.meomeoilu.com/css/fireworks.css" rel="stylesheet"/>
   <link rel="stylesheet" type="text/css" href="http://www.meomeoilu.com/css/component.css" />
   <link href="http://www.meomeoilu.com/css/soon.min.css" rel="stylesheet"/>      
   <link href="http://www.meomeoilu.com/lib/animate.css" rel="stylesheet"/>      
   <style>
      body {
         margin: 0;
         padding: 0;
         text-align: center;
         width: 100%;
          font-family: 'Roboto Condensed';
      }
      a {
         color: #ccc;
         text-decoration: none;
      }
      #container {
         margin: 0;
         padding: 0;
         height: 100%;
         position:relative;
      }
      .hi-icon-wrap{
         /*background: url("http://www.meomeoilu.com/images/background.png") bottom center repeat-x;*/
      }
      #canvastext{
         /*background: transparent url(http://www.meomeoilu.com/images/bg.png) top center no-repeat;*/
         background-color: transparent;
         background-image: url(https://lh3.googleusercontent.com/--vCv4c2ydA4/VouNG4inXsI/AAAAAAAACds/sMkZeNpv62g/s0-Ic42/bg.png), url(https://lh3.googleusercontent.com/-ociyNHFTLno/VouOOmMG97I/AAAAAAAACeE/q3-PK_BG9Z4/s0-Ic42/background.png);
         background-position: top center, bottom center;
         background-repeat: no-repeat; repeat-x;
         background-size: 100% auto, 100% auto;
         z-index: 5;
         position: absolute;
         top: 0;
         left: 0;
      }
            
      canvas:nth-child(2){
         z-index: 1;
         position: relative;
         background: transparent;
      }
      canvas{
         width: 100%;
         height: auto;
      }
      
      #home-button{
         background: transparent url(https://lh3.googleusercontent.com/-eLiHloXbZyc/VouNHAFHZII/AAAAAAAACds/98WzBxhr3Uw/s236-Ic42/4.png) center center no-repeat;
         background-size: 100% auto;
         z-index: 6;
         position: relative;
         width: 236px;
         height: 136px;
         cursor: pointer;
         display: inline-block;
      }
      
      #home-button a.homepage-btn{
         text-align: center;
         position: absolute;
         width: 100%;
         bottom: 0;
         left: 0;
         font-family: 'Roboto Condensed', sans-serif;
         font-size: 24px;
         color: #F3D60C;
         line-height: 25px;
      }
      
      #fireWork{
         position: absolute;
         width:100%;
         top: 0;
         left:0;         
      }
      
      .content-logo-wrap{
         position: absolute;
         width: 100%;
         z-index: 2;
         bottom: 50px;
         left:0;
      }
      
      .content-logo {
         font: 800 14.5em/1  'Open Sans', Impact;
         position: relative;         
         width: 100%;   
         text-align: center;
         opacity: 0.15;
      }

      svg:not(:root) {
         overflow: hidden;
      }
      
      svg.sgmlogo {
         width: 80%;
         margin: 0 auto 50px;
         display: block;
         text-transform: uppercase;
      }

      .text {
         fill: none;
         stroke-width: 6;
         stroke-linejoin: round;
         stroke-dasharray: 70 330;
         stroke-dashoffset: 0;
         -webkit-animation: stroke 6s infinite linear;
         animation: stroke 6s infinite linear;
      }
      .text:nth-child(5n + 1) {
         stroke: #F2385A;
         -webkit-animation-delay: -1.2s;
         animation-delay: -1.2s;
      }
      .text:nth-child(5n + 2) {
         stroke: #F5A503;
         -webkit-animation-delay: -2.4s;
         animation-delay: -2.4s;
      }
      .text:nth-child(5n + 3) {
         stroke: #E9F1DF;
         -webkit-animation-delay: -3.6s;
         animation-delay: -3.6s;
      }
      .text:nth-child(5n + 4) {
         stroke: #56D9CD;
         -webkit-animation-delay: -4.8s;
         animation-delay: -4.8s;
      }
      .text:nth-child(5n + 5) {
         stroke: #3aa1bf;
         -webkit-animation-delay: -6s;
         animation-delay: -6s;
      }

      @-webkit-keyframes stroke {
         100% {
         stroke-dashoffset: -400; }
      }
      @keyframes stroke {
         100% {
         stroke-dashoffset: -400; }
      }
      
      
      #count-down-wrapper {
         position: absolute;
         width:100%;
         top: 50%;
         left:0;
         text-align:center;
         z-index:6;
         /*transform: translateY(-45%);*/
      }      
      
      #soon-glow {
         font-family: 'Quicksand', sans-serif;
         color:#fff;
         background:transparent;
         /*background-color:#f13446;
         background-image:linear-gradient(30deg, #F13B6F,#FC9E2C);*/
         text-transform:lowercase;
      }
      #soon-glow .soon-label {
         color:#fff;
         text-shadow:0 0 .25rem rgba(255,255,255,.75);
      }
      #soon-glow .soon-ring-progress {
         color:#fff;
         background-color:rgba(255,255,255,.15);
      }
      #soon-glow>.soon-group {
         margin-bottom:-.5em;
      }
      .soon[data-layout*=group] {
         padding: 0.5em 0;      
      }
      
      .SLToday {
         font-family: "Roboto Condensed";
         color: #FFF;
         font-size: 25px;
      }
      
      #footer-controls{
         position: absolute;
         bottom:0;
         left:0;
         width: 100%;
         z-index:20;
         background: transparent;
      }
      
      #footer-controls a{
         float:right;
         display: block;
         padding:3px 5px;
         color: #FFF;
         font-size: 14px;
         margin: 0 5px;
      }
      
      #footer-controls a:hover{
         color: #FFFF00;
      }
      
      #footer-controls .music-control{
         margin-right: 30px;
         font-family: "Roboto Condensed", sans-serif;
      }
      
      #footer-controls .music-control i{
         margin-left: 5px;
      }
      
      #footer-controls .fb{
         color: #3E588E;
      }
      
      #footer-controls .yt{
         color: #E62117;
      }
      
      #footer-controls .gp{
         color: #D94E43;
      }
      
      #footer-controls .pin{
         color: #BD2126;
      }
      
      .jp-jplayer, .jp-jplayer audio {
         width: 0;
         height: 0;
      }
      
      .mkCD{
         position: absolute;
         z-index: 15;
         top: 0;
         left: 0;
         display: block;      
         width:140px;
         height:182px;
         cursor:pointer;
      }
      .textCD{
         width: 0px;
         height: 0px;
         background: #FFF url(http://www.meomeoilu.com/images/textbg.jpg) top center no-repeat;
         background-size: 100% 100%;
         display: block;
         position: absolute;   
         z-index: 14;
      }
      .textCD .texts1{
         padding: 30px;
         text-align: center;
         font-family: "Roboto Condensed", Arial, sans-serif;
         font-size: 18px;
         font-weight: bold;
      }
      .textCD .texts1:first-child{
         padding-top: 40px;
         padding-bottom: 0;
         text-transform: uppercase;
      }
      
      @media only screen and (max-width: 850px) {
         #canvastext2{
            width: 200px;
         }
         #home-button{
            width: 200px;
         }
         .hi-icon {            
            margin: 10px 15px;            
         }
      }
      @media only screen and (max-width: 768px) {
         .hi-icon {            
            margin: 10px 3px;
            width: 50px;
            height: 50px;            
         }
         .hi-icon:before{
            font-size:38px;
         }
         #canvastext2{
            width: 120px;
         }
         #home-button{
            width: 120px;
         }
      }
   </style>
  </head>
  <body>
   <div class="content-logo-wrap">
      <div class="content-logo">
         <svg class="sgmlogo" viewBox="0 0 1100 300">
            <!-- Symbol -->
            <symbol id="s-text">
               <text text-anchor="middle" x="50%" y="50%" dy=".35em">Doraeiga</text>
            </symbol>

            <!-- Duplicate symbols -->
            <use xlink:href="#s-text" class="text"></use>
            <use xlink:href="#s-text" class="text"></use>
            <use xlink:href="#s-text" class="text"></use>
            <use xlink:href="#s-text" class="text"></use>
            <use xlink:href="#s-text" class="text"></use>
         </svg>
      </div>
   </div>
   <div id="container">   
   <!-- Hiding library elements in the DOM is fun -->
    <aside id="library">
      <img src="https://lh3.googleusercontent.com/-SJqVqUzXLWI/VouNHyRXgrI/AAAAAAAACds/zgM_5GWaBIA/s0-Ic42/nightsky.png" id="nightsky" />
      <img src="https://lh3.googleusercontent.com/-c7qitldyp14/VouNH9DY9DI/AAAAAAAACds/BPrXaUP-d2w/s0-Ic42/big-glow.png" id="big-glow" />
      <img src="https://lh3.googleusercontent.com/-2b4-lPI_YMY/VouNIJXvfeI/AAAAAAAACds/IL_ETBE7kQo/s0-Ic42/small-glow.png" id="small-glow" />
      <img src="https://lh3.googleusercontent.com/-vU3Oac1_HWU/VouPN8OOc1I/AAAAAAAACec/sHtg7wSdTwU/s0-Ic42/moon.png" alt="" id="moon" style="visibility: hidden;"/>
    </aside>
   <canvas id="canvastext"></canvas>   
   
   <div class="hi-icon-wrap hi-icon-effect-8">
      <a style="display:none" href="#" class="hi-icon hi-icon-photo">Photo</a>
      <a style="display:none" href="#" class="hi-icon hi-icon-video">Video</a>      
      <div id="home-button">                           
                  <a href="/forum" class="homepage-btn">Đi Tới Diễn Đàn</a>
      </div>
      <a style="display:none" href="#" class="hi-icon hi-icon-music">Music</a>
      <a style="display:none" href="#" class="hi-icon hi-icon-livetv">TV</a>      
   </div>
   
   <div id="count-down-wrapper">
      <div class="SLToday"></div>
      <div class="soon" id="soon-glow"
          data-layout="group overlap"
          data-face="slot doctor glow"
          data-padding="false"
          data-scale-max="l"
          data-visual="ring color-light width-thin glow-progress length-70 gap-0 offset-65"
          data-labels-days="Ngày,Ngày"
          data-labels-hours="Giờ,Giờ"
          data-labels-minutes="Phút,Phút"
          data-labels-seconds="Giây,Giây"
          data-due="2016-02-08T00:00:00">
      </div>
   </div>
   </div>
   <div id="footer-controls" style="display:none" >
      <a href="javascript:void(0);" class="music-control" data-play-pause="play">Tắt nhạc <i class="fa fa-pause-circle"></i></a>
      <a href="#" class="pin"><i class="fa fa-pinterest-square"></i></a>
      <a href="#" class="gp"><i class="fa fa-google-plus-square"></i></a>
      <a href="#" class="yt"><i class="fa fa-youtube-square"></i></a>
      <a href="https://www.facebook.com/DoraemonVietNamJapan" class="fb"><i class="fa fa-facebook-official"></i></a>
      <div style="clear:both;"/>
   </div>   
   <div id="bg-music" class="jp-jplayer"></div>
  </body>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>
  <script src="http://www.meomeoilu.com/lib/soundjs-0.6.2.min.js"></script>
  <script src="http://www.meomeoilu.com/lib/flashaudioplugin-0.6.2.min.js"></script>
  <script src="http://www.meomeoilu.com/lib/jplayer/jquery.jplayer.min.js"></script> 
  <script>
   createjs.FlashAudioPlugin.swfPath = "lib/flashaudio/FlashAudioPlugin.swf";
   createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.HTMLAudioPlugin, createjs.FlashAudioPlugin]);
  </script>
  <script src="http://www.meomeoilu.com/js/requestanimframe.js"></script>
  <script src="http://www.meomeoilu.com/js/fireworks.min.js"></script>
  <script src="http://www.meomeoilu.com/lib/moment.js"></script>
  <script src="http://www.meomeoilu.com/lib/moment-timezone-with-data.js"></script>
  <script src="http://www.meomeoilu.com/lib/amlich-ntt.js"></script> 
  <script src="http://www.meomeoilu.com/lib/soon.min.js" data-auto="false"></script>
  <script src="http://www.meomeoilu.com/lib/jquery.lettering.js"></script>
  <script src="http://www.meomeoilu.com/lib/jquery.textillate.js"></script>
  <a style="display:none" href="http://www.forumvi.com" target="_blank">forumvi.com</a>
  <script>
var canvas=document.getElementById("canvastext"),ctx=canvas.getContext("2d"),W=window.innerWidth,H=window.innerHeight,text="2016",text2="Ch\u00fac M\u1eebng N\u0103m M\u1edbi",skipCount=4,gravity=.2,touched=!1,mouse={},minDist=20,bounceFactor=.6;canvas.height=H;canvas.width=W;function trackPos(a){mouse.x=a.pageX;mouse.y=a.pageY}
var Particle1=function(){this.r=6*Math.random();this.y=this.x=-100;this.vy=-5+parseInt(10*Math.random());this.vx=-5+parseInt(10*Math.random());this.isFree=!1;this.a=Math.random();this.draw=function(){ctx.beginPath();ctx.fillStyle="rgba(255, 223, 0, "+this.a+")";ctx.arc(this.x,this.y,this.r,0,2*Math.PI,!1);ctx.fill();ctx.closePath()};this.setPos=function(a,d){this.x=a;this.y=d}},particles1=[];
(function(){ctx.fillStyle="black";ctx.font="100px Arial, sans-serif";ctx.textAlign="center";ctx.fillText(text,W/2,H/3);ctx.fillStyle="#29a1f1";ctx.font="70px Arial, sans-serif";ctx.fillText(text2,W/2,H/3+100)})();(function(){})();(function(){for(var a=ctx.getImageData(0,0,W,W),d=a.data,b=0;b<a.height;b+=skipCount)for(var c=0;c<a.width;c+=skipCount)255==d[c*a.width*4+4*b-1]&&(particles1.push(new Particle1),particles1[particles1.length-1].setPos(b,c))})();function clear(){ctx.clearRect(0,0,W,H)}
function update1(){clear();for(i=0;i<particles1.length;i++){var a=particles1[i];a.r+=.15;a.a-=.015;0>a.a&&(a.r=6*Math.random(),a.a=Math.random());mouse.x>a.x-a.r&&mouse.x<a.x+a.r&&mouse.y>a.y-a.r&&mouse.y<a.y+a.r&&(touched=!0);1==touched&&(Math.sqrt((a.x-mouse.x)*(a.x-mouse.x)+(a.y-mouse.y)*(a.y-mouse.y))<=minDist&&(a.isFree=!0),1==a.isFree&&(a.y+=a.vy,a.x+=a.vx,a.vy+=gravity,a.y+a.r>H&&(a.vy*=-bounceFactor,a.y=H-a.r,a.vx=0<a.vx?a.vx-.1:a.vx+.1),a.x+a.r>W&&(a.vx*=-bounceFactor,a.x=W-a.r),0>a.x-a.r&&
(a.vx*=-bounceFactor,a.x=a.r)));ctx.globalCompositeOperation="lighter";a.draw()}}(function animloop(){requestAnimFrame(animloop);update1()})();
     
$(document).ready(function(){

   var listBgMusic = [      
      {
         title: "Mùa Xuân Long Phụng Xum Vầy",
         artist:"various ",
         mp3:"http://stream2.s1.mp3.zdn.vn/fsfsdfdsfdserwrwq3/ae124fb9a41fb4cd6b0f230bf8251d26/5699b6d4/2010/12/23/5/c/5cb21b7061dc7cc4565c3cac2accd711.mp3"
      },
      {
         title: "Bài Ca Mùa Xuân",
         artist:"Chí Thien ",
         mp3:"http://stream7.s2.mp3.zdn.vn/fsfsdfdsfdserwrwq3/f38edbf0b89ff70ff3a2671bbee1d323/569923ea/2016/01/14/f/4/f4dd8626c8441e17041fea4fc3b57ec8.mp3"
      },
      {
         title: "Tết Tết Tết ",
         artist:"Đỗ Phú Quí ",
         mp3:"http://stream7.s2.mp3.zdn.vn/fsfsdfdsfdserwrwq3/8afa2ebb90eb3094e87dbad3c910ae0e/56992e98/2016/01/11/2/8/280d2029351fade4c40113e80a8b7a48.mp3"
      },
      {
         title: "Happy New Year",
         artist:"ABBA ",
         mp3:"http://stream2.r17s101.vcdn.vn/fsfsdfdsfdserwrwq3/e638928ac46b14a34cadefea2517343b/56992ece/2011/12/22/7/4/74bebcb72086601d40cbf55d55e55616.mp3"
      },
      {
         title: "Con Bướm Xuân",
         artist:"unknow ",
         mp3:"http://download.s82.stream.nixcdn.com/4939fab827ac4e917cbd8994153a6b79/5699bef2/NhacCuaTui882/ConBuomXuan-HoQuangHieu-2577880.mp3"
      },
      {
         title: "Chúc Mừng Năm Mới",
         artist:"unknow ",
         mp3:"http://download.s82.stream.nixcdn.com/dda2f5cd26e27cb5558e6b92d5f4dc9a/5699bef2/NhacCuaTui884/ChucMungNamMoi-HoQuangHieu-3748398.mp3"
      },
      {
         title: "Như Hoa Mùa Xuân - Minh Hằng, Thủy Tiên, Hồ Ngọc Hà",
         artist:"unknow ",
         mp3:"http://r1.hot.c68.vdc.nixcdn.com/22b4023be4799c2e62994b7b887d6a25/5699bef2/NhacCuaTui847/NhuHoaMuaXuan-MinhHangThuyTienHoNgocHa-2905741.mp3"
      },
      {
         title: "Hạnh Phúc Xuân Ngời - Noo Phước Thịnh",
         artist:"unknow ",
         mp3:"http://r1.hot.c68.vdc.nixcdn.com/340121d9a49fa880aee609e5be8c276c/5699bef2/NhacCuaTui848/HanhPhucXuanNgoi-NooPhuocThinh-2919540.mp3"
      },
      {
         title: "Tết Xuân - Đông Nhi, 365, Hà Anh Tuấn, Tiêu Châu Như Quỳnh",
         artist:"unknow ",
         mp3:"http://f9.stream.nixcdn.com/95747de99e31c97a51701ad76f919832/5699bef2/NhacCuaTui914/TetXuan-DongNhiIsaac365HaAnhTuanTieuChauNhuQuynh-4294636.mp3"
      },
      {
         title: "Mùa Xuân Mới (New Version) - Trịnh Thăng Bình",
         artist:"unknow ",
         mp3:"http://r1.hot.c68.vdc.nixcdn.com/e49b4b75ef140381212838b1fe092ced/5699bef2/NhacCuaTui848/MuaXuanMoiNewVersion-TrinhThangBinh-2932453.mp3"
      },
      {
         title: "Xuân Ca - Noo Phước Thịnh",
         artist:"unknow ",
         mp3:"http://r1.hot.c68.vdc.nixcdn.com/dcaf2a77cae6c6538d6dd7fdfa268ab7/5699bef2/NhacCuaTui825/XuanCa-NooPhuocThinh_4hfpm.mp3"
      },
      {
         title: "Mùa Xuân Trở Về - Hari Won, Sơn Ngọc Minh",
         artist:"unknow ",
         mp3:"http://c34.vdc.nixcdn.com/6c6bfa9c67c71befd9ecb0f9e4af58ed/5699bef2/NhacCuaTui884/MuaXuanTroVe-SonNgocMinhHariWon-3757696.mp3"
      },
      {
         title: "Xuân Ca - Noo Phước Thịnh",
         artist:"unknow ",
         mp3:"http://r1.hot.c68.vdc.nixcdn.com/dcaf2a77cae6c6538d6dd7fdfa268ab7/5699bef2/NhacCuaTui825/XuanCa-NooPhuocThinh_4hfpm.mp3"
      }
      
   ];
   
   var ranBg = Math.floor(Math.random() * listBgMusic.length);
   
   var MBG = $("#bg-music").jPlayer({
        ready: function () {
          $(this).jPlayer("setMedia", listBgMusic[ranBg]).jPlayer("play");
        },
      ended: function() {
         var ranBgNew = Math.floor(Math.random() * listBgMusic.length);
         while(ranBgNew == ranBg){
            ranBgNew = Math.floor(Math.random() * listBgMusic.length);
         }   
         $(this).jPlayer("setMedia", listBgMusic[ranBgNew]).jPlayer("play");
      },
      error: function(){
         var ranBgNew = Math.floor(Math.random() * listBgMusic.length);
         while(ranBgNew == ranBg){
            ranBgNew = Math.floor(Math.random() * listBgMusic.length);
         }   
         $(this).jPlayer("setMedia", listBgMusic[ranBgNew]).jPlayer("play");
      },
        cssSelectorAncestor: "",      
        swfPath: "lib/jplayer/jquery.jplayer.swf",
        supplied: "m4a,oga,mp3",
      preload: "auto",
      volume: 1
    });

   $("#footer-controls a.music-control").on("click", function(){
      var curState = $(this).data("play-pause");
      if(curState == "play"){
         MBG.jPlayer("pause");
         $(this).data("play-pause", "pause").html('Bật nhạc <i class="fa fa-play-circle"></i>');
      }else{
         MBG.jPlayer("play");
         $(this).data("play-pause", "play").html('Tắt nhạc <i class="fa fa-pause-circle"></i>');
      }
   });   
         
   $('#count-down-wrapper .soon').attr('data-now',moment().format());   
   var soon = document.querySelectorAll('#count-down-wrapper .soon');
   Soon.create(soon[0]);
      
   var vnCurrentTime = moment.tz("Asia/Saigon");
   var dd = vnCurrentTime.date();
   var mm = vnCurrentTime.month()+1;
   var yy = vnCurrentTime.year();   
   var ld = getLunarDate(dd, mm, yy);
   
   $(".SLToday").html("Hôm nay: " + vnCurrentTime.format("DD-MM-YYYY") + " <i class='fa fa-calendar'></i> " + ld.day + "-" + ld.month + "-" + ld.year + ", " + getYearCanChi(ld.year));
   
    var monkeyCD = ["htp://www.meomeoilu.com/images/mcd.png", "htp://www.meomeoilu.com/images/mcd2.png", "htp://www.meomeoilu.com/images/mcd3.png", "htp://www.meomeoilu.com/images/mcd4.png"];
   var textCD = [
"Doraeiga VN kính chúc bạn cùng gia đình tràn đầy sức khỏe, thành công và hạnh phúc.",
      "Năm mới Tết đến. Rước hên vào nhà. Quà cáp bao la. Mọi nhà no đủ. Vàng bạc đầy hũ. Gia chủ phát tài. Già trẻ gái trai. Sum vầy hạnh phúc. Cầu tài chúc phúc. Lộc đến quanh năm. An khang thịnh vượng!",
      "Năm mới: Ngàn lần như ý, Vạn lần như mơ, Triệu sự bất ngờ, Tỷ lần hạnh phúc.",
      "Chúc bạn: 12 tháng phú quý, 365 ngày phát tài, 8760 giờ sung túc, 525600 phút thành công 31536000 giây vạn sự như ý.",
      "Sang năm mới chúc mọi người có một bầu trời sức khoẻ, một biển cả tình thương, một đại dương tình cảm, một điệp khúc tình yêu, một người yêu chung thủy, một tình bạn mênh mông, một gia đình thịnh vượng."
   ];
   var monkeyX = $(window).width()/2 - $(".soon-group").outerWidth()/2 - 110 - 10;
   var idcd = Math.floor(Math.random() * monkeyCD.length);
   
   var monkey = '<div id="mcd" style="display:block;width:140px; height:182px;position: absolute;z-index:30; top:0; left: ' + monkeyX + 'px"><div class="mkCD" style="background: transparent url('+ monkeyCD[idcd] +') center center no-repeat;background-size:100% 100%;"></div><div class="textCD"><div class="texts1">Chúc Mừng Năm Mới 2016</div><div class="texts1">'+ textCD[idcd] +'</div></div></div>';
   
   $("#count-down-wrapper").append(monkey);
   
   $(window).resize(function(){
      monkeyX = $(window).width()/2 - $(".soon-group").outerWidth()/2 - 110 - 10;
      $("#mcd").css("left", monkeyX+"px");
   });
   
   $('.texts1').textillate({      
      autoStart: false,
      in: { effect: 'flipInY' },
      out: { effect: 'hinge' }      
   });
   
   $("#mcd").on('mouseenter', function(){
      $(this).animate({width: "+=100", height: "+=130", top: "-=65"});
      $(".mkCD").animate({width: "+=100", height: "+=130"});
      $(".textCD").animate({width: "+=457", height: "+=210", left: "+=200"});
      
      $('.texts1').textillate('start');
      $('.texts1').textillate('in');
   })
   .on('mouseleave', function(){
      $(this).animate({width: "-=100", height: "-=130", top: 0});
      $(".mkCD").animate({width: "-=100", height: "-=130"});
      $(".textCD").animate({width: "-=457", height: "-=210", left: 0});
            
      $('.texts1').textillate('out');      
   })   
      
});
</script>
</html>

Các chức năng

- Click vào túi vàng thì pháo hoa sẽ bắn lên (Phía trên đường link forum)
- Rê chuột vào chỗ kế bên khung thời gian sẽ hiện ra câu chúc Tết
- Hệ thống tự đếm ngày đến Tết

Đôi lời

- Nhân dịp Tết đến, chúc toàn thể thành viên Devs cũng như các BQT có thật nhiều sức khỏe và hạnh phúc bên gia đình
- Có vài bài nhạc mà mình không hiểu sao nó không chạy, mong các pro vào giúp đỡ đoạn code nhạc ạ

Nguồn

Mèo ĐZ
  Bài viết hay nhất2
QUÁ TUYỆT VỜI <3
  Bài viết hay nhất3
Cái này mình add vào phần nào thế chủ thớt?
  Bài viết hay nhất4
HTML page đó bạn. ACP > Modules > [Đóng góp] Trang chủ Tết Bính Thân 2016 Html HTML & JAVASCRIPT > HTML & JAVASCRIPT
  Bài viết hay nhất5
You cannot reply to topics in this forum