Christmas countdown page in 2014, Christmas countdown in 2014

Christmas countdown page in 2014, Christmas countdown in 2014

Christmas is coming in 2014. I love programming editor to share with you a countdown to the Christmas Day of 2014, the date card of the day has the effect of jitter. Let's take a look:

Download Online Preview source code

Implementation code.

Html code:

Css code:
body {  background: url("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-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 0px 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;    }}
Js Code:
  $(document).ready(function () {            var words = [        'Lorem ',        'ipsum ',        'delor',        'sit',        'amet',        'consect',        'adipisci',        'elit,',        'sed.',        'Eiusmod',        'tempor',        'a',        'enim',        'minim',        'season',        'nulla',        'dolore',        'sint',        'id',        'est',        'laboris',        'ut.',        'aute',        'laborum',        'toe'    ];            var message = '';            var date = new Date();            var day = date.getDate();            var month = date.getMonth() + 1;            var scrolled = false;            var timeDelay = 200;            var cardReveal = function () {                $('#message').text(message).show();            };            if (month === 12) {                $('li').each(function (index) {                    var adventwindow = index + 1;                    var item = $(this);                    if (day !== adventwindow && adventwindow < day) {                        window.setTimeout(function () {                            item.children('.door').addClass('open');                        }, timeDelay);                    }                    timeDelay += 100;                    if (adventwindow <= day) {                        var word = words[index];                        $(this).append('<div class="revealed">' + word + '</div>');                        message = message + ' ' + word;                    }                    if (adventwindow === day) {                        $(this).addClass('current');                        $(this).addClass('jiggle');                    }                    $(this).on('click', function () {                        if (adventwindow <= day) {                            $(this).children('.door').toggleClass('open');                        }                        $(this).removeClass('jiggle');                        if (day >= 25 && adventwindow === 25) {                            messageReveal();                            if (!scrolled) {                                $('html, body').animate({ scrollTop: $('#message').offset().top }, 2000);                                scrolled = true;                            }                        }                    });                });                if (day >= 26) {                    messageReveal();                }            }        });
Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/11857