Tạo bộ lịch đếm ngược có ghi lời chúc giáng sinh độc đáo

Create a Countdown Calendar with Christmas greetings

Giáng sinh đã đến gần hãy cùng Iris Tips tạo một bộ lịch đếm ngược có ghi những lời chúc giáng sinh đầy ngộ nghĩnh và đáng yêu nhé.

Mặc định tiện ích này sẽ có 25 ô tương ứng với các ngày trong tháng 12 từ 1 đến 25 (Noel). Khi thời gian trôi đến ngày nào tiện ích sẽ lật mở ô chứa lời chúc của ngày đó và sẽ đếm ngược lần lượt cho đến ngày Noel.

• DEMO

Cách thực hiện

1Có khá nhiều tùy chọn để đặt đoạn code này. Bạn có thể đặt nó ở trang bài viết hoặc trang tĩnh đều được cả. Để trông được đẹp mắt Iris Tips khuyến nghị đặt ở trang có chiều rộng tối thiểu 800px. Bạn có thể tham khảo thủ thuật ở bài viết bên dưới căn chỉnh chiều rộng cho phù hợp nhé.

Xem thêm: Cách ẩn Widget Sidebar để tạo Trang hoặc Bài viết full width 100%

1. CSS

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Oleo+Script);body{background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/xmas.jpg");color:#fff;font-family:'Oleo Script',cursive;padding:20px;font-weight:400}
h1{margin:0;font-size:75px;line-height:75px;text-align:center;font-weight:400}
ul{margin:0 auto 30px auto;padding:0;list-style-type:none;max-width:900px;width:100%;text-align:center;user-select:none}
li{font-weight:400;background-color:#fff;box-sizing:border-box;border-radius:6px;display:inline-block;color:#111;cursor:pointer;font-size:26px;padding:15px;margin:25px 12px;width:130px;height:130px;line-height:100px;text-align:center;position:relative;vertical-align:top;user-select:none;perspective:800px;transition:all 0.4s ease-in-out}
ul li:last-child{background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/santa.jpg") center top;background-size:cover;display:block;clear:both;margin:20px auto 0 auto;width:200px;height:275px}
ul li:last-child .door{font-size:100px;width:200px;height:275px;line-height:240px}
ul li:last-child .revealed{line-height:123px}
.door{user-select:none;color:#fff;font-size:70px;position:absolute;top:0;left:0;background-color:#91c1cc;box-sizing:border-box;border-top:2px #eee dashed;border-right:2px #eee dashed;border-bottom:2px #eee dashed;border-left:1px #eee solid;border-radius:6px;padding:15px;width:130px;height:130px;transform-origin:0 40%;transition:all 0.4s ease-in-out;transform-style:preserve-3d}
.current .door{background-color:#7EAD44}
.current .door.open{color:#7EAD44}
.revealed{user-select:none}
#message{box-sizing:border-box;color:#222;display:none;font-size:24px;padding:20px;background:#eddecb;max-width:500px;width:100%;border-radius:15px;margin:0 auto}
.open{box-shadow:14px 0 15px -1px rgba(0,0,0,0.2);color:#91c1cc;transform:rotate3d(0,1,0,-98deg)}
.jiggle{animation:jiggle 0.2s infinite;transform:rotate(-1deg)}
@keyframes jiggle{0%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@media screen and (min-width:480px){li{margin:25px 20px}}
@media screen and (min-width:768px){body{background-size:150px}p{right:6%;top:20%;bottom:auto;margin-left:auto;left:auto}}
</style>

2. HTML

<h1>Merry Christmas</h1>
<ul>
  <li><div class="door">1</div></li>
  <li><div class="door">2</div></li>
  <li><div class="door">3</div></li>
  <li><div class="door">4</div></li>
  <li><div class="door">5</div></li>
  <li><div class="door">6</div></li>
  <li><div class="door">7</div></li>
  <li><div class="door">8</div></li>
  <li><div class="door">9</div></li>
  <li><div class="door">10</div></li>
  <li><div class="door">11</div></li>
  <li><div class="door">12</div></li>
  <li><div class="door">13</div></li>
  <li><div class="door">14</div></li>
  <li><div class="door">15</div></li>
  <li><div class="door">16</div></li>
  <li><div class="door">17</div></li>
  <li><div class="door">18</div></li>
  <li><div class="door">19</div></li>
  <li><div class="door">20</div></li>
  <li><div class="door">21</div></li>
  <li><div class="door">22</div></li>
  <li><div class="door">23</div></li>
  <li><div class="door">24</div></li>
  <li><div class="door">25</div></li>
</ul>

<p id="message"></p>

3. Javascript

<script type='text/javascript'>
$( document ).ready(function() {

  var words = ["Christmas ", "is ", "love", "and", "ioy.", "Christmas", "is", "caring,", "giving", "and", "sharing.", "Christmas", "is", "the", "most", "wonderful", "feeling", "of", "the", "year.", "And", "one", "more", "thing", "Merry Christmas!"];

  var message = "";
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var scrolled = false;
  var timeDelay = 200;

  // function to reveal message
  var cardReveal = function() {
    $("#message").text(message).show();
  }  

  //day=25; // uncomment to skip to 25

  // Only work in December
  if(month === 12) {
    // Loop through each calendar window
    $("li").each( function( index ) {
      var adventwindow = index + 1;
      var item = $(this);

      // Open past windows
      if( day !== adventwindow && adventwindow < day ) {
        window.setTimeout(function(){
          item.children(".door").addClass("open");
        }, timeDelay);
      }

      // timeout offset for past window opening animation
      timeDelay += 100;

      // Add words so far to message variable
      if( adventwindow <= day ) {
        var word = words[index];
        $(this).append('<div class="revealed">' + word + '</div>');
        message = message + " " + word;
      }

      // Add jiggle animation to current day window
      if(adventwindow === day) {
        $(this).addClass("current");
        $(this).addClass("jiggle");
      }

      // On clicking a window, toggle it open/closed and
      // handle other things such as removing jiggle and 25th
      $(this).on("click", function() {
        if(adventwindow <= day) { 
          $(this).children(".door").toggleClass("open");
        }

        $(this).removeClass("jiggle");

        // If 25th, can show the message
        if(day >= 25 && adventwindow === 25) {
          messageReveal();

          // Animate scroll to message if not already done
          if(!scrolled) {
            $('html, body').animate({
              scrollTop: $("#message").offset().top
            }, 2000);
            scrolled = true;
          }
        }
      });

    });

    // If beyond 24, show message
    if(day >= 26){
      messageReveal();
    }

  }

});
</script>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm