Cuenta atrás para la Navidad ~ TecnoBlog

TecnoBlog les desea a todos sus lectores Feliz Navidad con esta animación realizada con jQuery. Si lo deseas, puedes descargar y modificar el ejemplo para añadirlo a tu página web siguiendo las instrucciones detalladas más abajo.
(Fuente: https://codepen.io/JorgeAguilar/).

Para componer la animación, tendrás que incorporar código html, adaptar los estilos correspondientes importando la fuente de Google Mountains of Christmas con tres imágenes de fondo y código javascript con la librería jQuery.

Código HTML

<section class="countdownSection">
  <div class="decorations">
    <div class="decoration" data-pos="bottom left"></div>
    <div class="decoration" data-pos="top right"></div>
    <div class="snow"></div>
    <div class="santaWrapper">
      <div class="santa">
        <div class="hat">
          <div></div>
          <div></div>
        </div>
        <div class="face">
          <div class="eyeBrows left"></div>
          <div class="eyeBrows right"></div>
          <div class="eye left"></div>
          <div class="eye right"></div>
          <div class="nose"></div>
          <div class="cheek left"></div>
          <div class="cheek right"></div>
          <div class="beard">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div class="body">
          <div class="sweater"></div>
          <div class="hand left">
            <div class="inner"></div>
          </div>
          <div class="hand right"></div>
        </div>
      </div>
      <div class="rope"></div>
      <div class="rope back"></div>
      <div class="sled"></div>
      <div class="reindeer">
        <div class="face">
          <div class="ear"></div>
          <div class="horn right"></div>
          <div class="horn left"></div>
        </div>
        <div class="body">
          <div class="foot front">
            <div class="inner">
              <div class="extension"></div>
            </div>
          </div>
          <div class="foot back">
            <div class="inner">
              <div class="extension"></div>
            </div>
          </div>
          <div class="tail"></div>
        </div>
      </div>
      <div class="reindeer second">
        <div class="rope"></div>
        <div class="face">
          <div class="ear"></div>
          <div class="horn right"></div>
          <div class="horn left"></div>
        </div>
        <div class="body">
          <div class="foot front">
            <div class="inner">
              <div class="extension"></div>
            </div>
          </div>
          <div class="foot back">
            <div class="inner">
              <div class="extension"></div>
            </div>
          </div>
          <div class="tail"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="counterWrapper">
      <p>Sólo quedan ...</p>
      <div class="countdown"></div>
      <p>para Navidad</p>
    </div>
  </div>
</section>

Código CSS

<style>
@import url("https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap");
@keyframes santa__mov {
  0%, 100% {
    bottom: 0;
    left: 0;
    transform: translateX(-100%) rotate(-10deg);
  }
  30% {
    bottom: 100%;
    left: 100%;
    transform: translateX(100%) rotate(-10deg);
  }
  40% {
    bottom: 0;
    left: 100%;
    transform: translateX(100%) rotateY(180deg);
  }
  70% {
    bottom: 0;
    left: 0;
    transform: translateX(-100%) rotateY(180deg);
  }
}
@keyframes santa__hand-left {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}
@keyframes santa__hand-right {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(-6deg);
  }
}
@keyframes rope__left {
  0% {
    transform: rotate(2deg);
  }
  100% {
    transform: rotate(5deg);
  }
}
@keyframes rope__right {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}
@keyframes rope__inner {
  0% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(-15deg) translateY(3px);
  }
}
@keyframes reindeer__leg-front {
  0% {
    transform: rotate(-24deg);
  }
  100% {
    transform: rotate(-13deg);
  }
}
@keyframes reindeer__leg-front-extension {
  0% {
    transform: rotate(131deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes reindeer__leg-back {
  0% {
    transform: rotate(-73deg);
  }
  100% {
    transform: rotate(-95deg);
  }
}
@keyframes reindeer__leg-back-extension {
  0% {
    top: 4px;
    left: -4px;
    transform: rotate(50deg);
  }
  100% {
    top: 0;
    left: 0;
    transform: rotate(0);
  }
}
@keyframes snow {
  0% {
    fill-opacity: 1;
  }
  100% {
    fill-opacity: 0;
    transform: translateY(50%);
  }
}
body {
  overflow-x: hidden;
  color: #fff;
  margin: 0 auto;
  background-color: #005b38;
}
body * {
  font-family: "Mountains of Christmas", cursive;
}
body p, body h1, body h2, body h3, body h4, body h5, body h6 {
  margin: 0;
}
body a {
  color: #fff;
  text-decoration: none;
}
body ul, body li {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.countdownSection {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.countdownSection:before, .countdownSection:after {
  content: "";
  position: absolute;
}
.countdownSection:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(rgba(255, 255, 255, 0.3), transparent);
  pointer-events: none;
}
.countdownSection:after {
  width: 90%;
  height: 90%;
  /*border: 1px solid rgba(255, 255, 255, 0.1);*/
}
.countdownSection .decorations {
  pointer-events: none;
}
.countdownSection .decorations .decoration {
  background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcD16hX9tPJgLkdoLFTTfy5YZoVEVKcLNrvgIFHPtRpFTprLA3v-gcwEBpLGDYEgfwoKe2zZ085D7E4QpXEyQOK60QtoOH8z08mxIE1Ms34WO2ceEy0sfWOs_eAIB4XYMnBqKwmHkUIobX/s0/decoration.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  width: 500px;
  height: 500px;
  filter: blur(3px);
  z-index: 1;
}
.countdownSection .decorations .decoration[data-pos="top left"] {
  top: 0;
  left: 0;
  transform: rotate(90deg);
}
.countdownSection .decorations .decoration[data-pos="top right"] {
  top: 0;
  right: 0;
  transform: rotate(180deg);
}
.countdownSection .decorations .decoration[data-pos="bottom left"] {
  bottom: 0;
  left: 0;
}
.countdownSection .decorations .decoration[data-pos="bottom right"] {
  bottom: 0;
  right: 0;
  transform: rotate(-90deg);
}
.countdownSection .decorations .snow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.countdownSection .decorations .snow .particle {
  fill: #fff;
  animation: snow 5s ease-out infinite;
}
.countdownSection .decorations .snow .particle:nth-child(2n) {
  animation-delay: 1.5s;
}
.countdownSection .decorations .snow .particle:nth-child(3n) {
  animation-delay: 2.5s;
  animation-duration: 5.3s;
}
.countdownSection .decorations .snow .particle:nth-child(4n) {
  animation-delay: 1s;
  animation-duration: 5.2s;
}
.countdownSection .decorations .snow .particle:nth-child(5n) {
  animation-delay: 3s;
}
.countdownSection .decorations .santaWrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 430px;
  height: 155px;
  transform: translateX(-100%);
  animation: santa__mov 15s linear infinite;
}
.countdownSection .decorations .santaWrapper .santa {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 125px;
  height: 107px;
  z-index: 10;
  transform: rotateY(180deg);
}
.countdownSection .decorations .santaWrapper .santa:before, .countdownSection .decorations .santaWrapper .santa:after {
  content: "";
  position: absolute;
  bottom: 0;
  background-color: #520d0d;
}
.countdownSection .decorations .santaWrapper .santa:before {
  left: -10px;
  width: 126px;
  height: 30px;
  border-radius: 10px 50% 10px 50%;
  transform: rotate(0);
  z-index: 10;
}
.countdownSection .decorations .santaWrapper .santa:after {
  left: 70px;
  width: 50px;
  height: 53px;
  border-radius: 50% 10px 22px 10px;
  transform: rotate(8deg);
}
.countdownSection .decorations .santaWrapper .santa .hat > * {
  position: absolute;
  top: 7px;
  left: 31px;
  width: 43px;
  height: 58px;
  border-radius: 50%;
  transform: rotate(28deg);
  background-color: #d63527;
}
.countdownSection .decorations .santaWrapper .santa .hat > *:nth-child(1):before, .countdownSection .decorations .santaWrapper .santa .hat > *:nth-child(1):after {
  content: "";
  position: absolute;
}
.countdownSection .decorations .santaWrapper .santa .hat > *:nth-child(1):before {
  top: 9px;
  left: 45px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #fff;
}
.countdownSection .decorations .santaWrapper .santa .hat > *:nth-child(1):after {
  top: 3px;
  left: 19px;
  width: 30px;
  height: 7px;
  border-radius: 50%;
  transform: rotate(22deg);
  background-color: #d63527;
}
.countdownSection .decorations .santaWrapper .santa .hat > *:nth-child(2) {
  position: absolute;
  top: 18px;
  left: 31px;
  width: 44px;
  height: 34px;
  border-radius: 50%;
  transform: rotate(12deg);
  background-color: #fff;
}
.countdownSection .decorations .santaWrapper .santa .face {
  position: absolute;
  top: 25px;
  left: 37px;
  width: 31px;
  height: 17px;
  border-radius: 20px 20px 50% 50%;
  transform: rotate(10deg);
  background-color: #fde2b7;
  z-index: 10;
}
.countdownSection .decorations .santaWrapper .santa .face .eyeBrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 7px;
  border-radius: 50%;
  background-color: #fff;
}
.countdownSection .decorations .santaWrapper .santa .face .eyeBrows.left {
  top: 2px;
  left: 22px;
  transform: rotate(-65deg);
}
.countdownSection .decorations .santaWrapper .santa .face .eyeBrows.right {
  top: 1px;
  left: 4px;
  transform: rotate(65deg);
}
.countdownSection .decorations .santaWrapper .santa .face .eye {
  position: absolute;
  top: 8px;
  left: 2px;
  width: 3px;
  height: 4px;
  border-radius: 50%;
  background-color: #000;
}
.countdownSection .decorations .santaWrapper .santa .face .eye.left {
  top: 8px;
  left: 2px;
}
.countdownSection .decorations .santaWrapper .santa .face .eye.right {
  top: 8px;
  left: 20px;
}
.countdownSection .decorations .santaWrapper .santa .face .nose {
  position: absolute;
  top: 10px;
  left: 6px;
  width: 12px;
  height: 9px;
  border-radius: 50%;
  z-index: 10;
  background-color: #f7d194;
}
.countdownSection .decorations .santaWrapper .santa .face .cheek {
  position: absolute;
  top: 10px;
  left: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  z-index: 10;
  background-color: #f4cfe3;
}
.countdownSection .decorations .santaWrapper .santa .face .cheek.left {
  top: 12px;
  left: -3px;
}
.countdownSection .decorations .santaWrapper .santa .face .cheek.right {
  top: 13px;
  left: 22px;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > * {
  position: absolute;
  top: 8px;
  left: -14px;
  width: 15px;
  height: 17px;
  border-radius: 50%;
  background-color: #fff;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > *:before, .countdownSection .decorations .santaWrapper .santa .face .beard > *:after {
  content: "";
  position: absolute;
  background-color: #fff;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > *:before {
  top: 12px;
  left: 1px;
  width: 15px;
  height: 17px;
  border-radius: 50%;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > *:nth-child(2) {
  top: 16px;
  left: -8px;
  width: 26px;
  height: 30px;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > *:nth-child(2):before {
  top: 16px;
  left: 13px;
  width: 19px;
  height: 17px;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > *:nth-child(2):after {
  top: 1px;
  left: 13px;
  width: 19px;
  height: 17px;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > *:nth-child(3) {
  top: 16px;
  left: 14px;
  width: 27px;
  height: 28px;
}
.countdownSection .decorations .santaWrapper .santa .face .beard > *:nth-child(3):before {
  top: -4px;
  left: 13px;
  width: 17px;
  height: 17px;
}
.countdownSection .decorations .santaWrapper .santa .body {
  position: absolute;
  top: 54px;
  left: 16px;
  width: 88px;
  height: 53px;
}
.countdownSection .decorations .santaWrapper .santa .body:before {
  content: "";
  position: absolute;
  top: -23px;
  right: -10px;
  width: 53px;
  height: 51px;
  border-radius: 42% 50%;
  background-color: #f3f0f0;
  z-index: -1;
}
.countdownSection .decorations .santaWrapper .santa .body .sweater {
  top: -3px;
  left: 10px;
  position: absolute;
  width: 45px;
  height: 39px;
  border-radius: 50% 50% 10% 10%;
  background-color: #d63527;
  z-index: 5;
}
.countdownSection .decorations .santaWrapper .santa .body .sweater:before {
  content: "";
  top: 28px;
  left: 0px;
  position: absolute;
  width: 45px;
  height: 5px;
  background-color: #000;
  transform: rotate(1deg);
}
.countdownSection .decorations .santaWrapper .santa .body .sweater:after {
  content: "";
  top: 27px;
  left: 10px;
  position: absolute;
  width: 7px;
  height: 5px;
  background-color: #000;
  border: 1px solid #fff;
  border-radius: 3px;
  transform: rotate(1deg);
}
.countdownSection .decorations .santaWrapper .santa .body .hand {
  position: absolute;
}
.countdownSection .decorations .santaWrapper .santa .body .hand.left {
  top: 5px;
  left: 19px;
  width: 33px;
  height: 30px;
  overflow: hidden;
}
.countdownSection .decorations .santaWrapper .santa .body .hand.left .inner {
  position: absolute;
  top: 10px;
  left: 8px;
  width: 49px;
  z-index: 100;
  height: 7px;
  border-radius: 10px;
  transform: rotate(12deg);
  background-color: #d63527;
  animation: santa__hand-right 0.3s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .santa .body .hand.left .inner:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 7px;
  top: -2px;
  left: -6px;
  background-color: #000;
  border-radius: 50%;
  transform: rotate(25deg);
}
.countdownSection .decorations .santaWrapper .santa .body .hand.right {
  top: 4px;
  left: 3px;
  width: 11px;
  height: 7px;
  border-radius: 10px;
  background-color: #d63527;
  transform: rotate(25deg);
  animation: santa__hand-left 0.3s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .santa .body .hand.right:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 7px;
  top: -2px;
  left: -6px;
  background-color: #000;
  border-radius: 50%;
  transform: rotate(10deg);
}
.countdownSection .decorations .santaWrapper .rope {
  position: absolute;
  top: 92px;
  left: 84px;
  width: 182px;
  height: 33px;
  overflow: hidden;
  z-index: 10;
  transform: rotate(0deg);
  transform-origin: bottom right;
  animation: rope__right 0.3s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .rope.back {
  top: 85px;
  left: 105px;
  width: 149px;
  transform: rotate(4deg);
  z-index: 0;
  transform-origin: top left;
  animation: rope__left 0.3s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .rope:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -12px;
  width: 100%;
  height: 48px;
  border-bottom: 1px solid #fff;
  border-radius: 50%;
}
.countdownSection .decorations .santaWrapper .sled {
  position: absolute;
  bottom: -12px;
  left: 0px;
  width: 145px;
  height: 11px;
  transform: rotate(-3deg);
  border-bottom: 5px solid #690e00;
  border-right: 5px solid #690e00;
  border-radius: 10px;
  z-index: 10;
}
.countdownSection .decorations .santaWrapper .sled:before, .countdownSection .decorations .santaWrapper .sled:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #690e00;
}
.countdownSection .decorations .santaWrapper .sled:before {
  top: 2px;
  left: 34px;
  height: 9px;
}
.countdownSection .decorations .santaWrapper .sled:after {
  top: 3px;
  left: 108px;
  width: 5px;
  height: 8px;
}
.countdownSection .decorations .santaWrapper .reindeer {
  position: absolute;
  width: 115px;
  height: 155px;
  top: 50px;
  right: 0;
  transform: rotate(14deg) translateX(calc(-100% - 30px));
  z-index: 0;
}
.countdownSection .decorations .santaWrapper .reindeer.second {
  top: 0;
  transform: rotate(14deg);
}
.countdownSection .decorations .santaWrapper .reindeer.second .rope {
  top: 70px;
  left: -55px;
  width: 155px;
  transform: rotate(-15deg);
  animation: rope__inner 0.3s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .reindeer:before {
  content: "";
  position: absolute;
  top: 65px;
  left: 76px;
  width: 8px;
  height: 31px;
  background-color: #520d0d;
  z-index: 10;
  transform: rotate(-55deg);
}
.countdownSection .decorations .santaWrapper .reindeer:after {
  content: "";
  position: absolute;
}
.countdownSection .decorations .santaWrapper .reindeer .face {
  position: absolute;
  width: 30px;
  height: 22px;
  top: 44px;
  left: 72px;
  border-radius: 10px 10px 50% 50%;
  transform: rotate(-3deg);
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .face:before {
  content: "";
  position: absolute;
  background-color: #cca58b;
  width: 29px;
  height: 16px;
  border-radius: 50%;
  top: 0px;
  left: 11px;
  transform: rotate(-49deg);
}
.countdownSection .decorations .santaWrapper .reindeer .face:after {
  content: "";
  position: absolute;
  background-color: #000;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: -8px;
  left: 31px;
}
.countdownSection .decorations .santaWrapper .reindeer .face .ear {
  position: absolute;
  width: 21px;
  height: 11px;
  top: 4px;
  left: -18px;
  border-radius: 4px 0 50% 50%;
  transform: rotate(4deg);
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .face .ear:before {
  content: "";
  position: absolute;
  top: -2px;
  left: 34px;
  width: 4px;
  height: 5px;
  border-radius: 50%;
  transform: rotate(-35deg);
  background-color: #000;
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn {
  position: absolute;
  width: 29px;
  height: 4px;
  top: -7px;
  left: -21px;
  border-radius: 2px;
  transform: rotate(38deg);
  background-color: #f0dbc2;
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn:before, .countdownSection .decorations .santaWrapper .reindeer .face .horn:after {
  content: "";
  position: absolute;
  background-color: #f0dbc2;
  border-radius: 2px;
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn.left {
  top: -7px;
  left: -21px;
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn.left:before {
  top: -4px;
  left: 6px;
  width: 14px;
  height: 4px;
  transform: rotate(43deg);
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn.left:after {
  top: -4px;
  left: 13px;
  width: 14px;
  height: 4px;
  -webkit-transform: rotate(43deg);
  transform: rotate(53deg);
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn.right {
  top: -12px;
  left: -6px;
  width: 24px;
  transform: rotate(62deg);
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn.right:before {
  top: -3px;
  left: 5px;
  width: 10px;
  height: 4px;
  transform: rotate(43deg);
}
.countdownSection .decorations .santaWrapper .reindeer .face .horn.right:after {
  top: -3px;
  left: 11px;
  width: 10px;
  height: 4px;
  transform: rotate(53deg);
}
.countdownSection .decorations .santaWrapper .reindeer .body {
  position: absolute;
  width: 58px;
  height: 31px;
  top: 84px;
  left: 28px;
  border-radius: 50% 0;
  transform: rotate(-3deg);
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .body:before {
  content: "";
  position: absolute;
  width: 46px;
  height: 26px;
  top: -15px;
  left: 32px;
  border-radius: 0 0 50% 50%;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-55deg);
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .body:after {
  content: "";
  position: absolute;
  width: 43px;
  height: 26px;
  top: -11px;
  left: 29px;
  border-radius: 0 0 50% 50%;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-30deg);
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.front .inner {
  position: absolute;
  width: 40px;
  height: 8px;
  top: 13px;
  left: 35px;
  border-radius: 0 50%;
  transform: rotate(-17deg);
  background-color: #cca58b;
  animation: reindeer__leg-front 0.3s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.front .inner .extension {
  position: absolute;
  width: 28px;
  height: 8px;
  top: 3px;
  left: 100%;
  border-radius: 2px 50%;
  transform: rotate(131deg);
  background-color: #cca58b;
  transform-origin: top left;
  animation: reindeer__leg-front-extension 0.2s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.front .inner .extension:after {
  content: "";
  position: absolute;
  top: 0;
  right: -2px;
  width: 7px;
  height: 8px;
  border-radius: 2px;
  background-color: #000;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner {
  position: absolute;
  width: 56px;
  height: 9px;
  top: 37px;
  left: -29px;
  border-radius: 0 50%;
  transform: rotate(-73deg);
  animation: reindeer__leg-back 0.3s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner:before {
  content: "";
  position: absolute;
  width: 25px;
  height: 16px;
  top: 4px;
  left: 25px;
  border-radius: 0 50%;
  transform: rotate(15deg);
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner:after {
  content: "";
  position: absolute;
  right: 0;
  width: 65%;
  height: 100%;
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner .extension {
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 8px;
  background: #cca58b;
  border-radius: 2px 50%;
  transform-origin: top right;
  animation: reindeer__leg-back-extension 0.2s linear alternate infinite;
}
.countdownSection .decorations .santaWrapper .reindeer .body .foot.back .inner .extension:after {
  content: "";
  position: absolute;
  width: 8px;
  height: 9px;
  top: -2px;
  left: -2px;
  border-radius: 2px 0 2px 2px;
  transform: rotate(14deg);
  background-color: #000;
}
.countdownSection .decorations .santaWrapper .reindeer .body .tail {
  position: absolute;
  width: 27px;
  height: 26px;
  top: 6px;
  left: -8px;
  border-radius: 50% 2px;
  transform: rotate(-17deg);
  background-color: #cca58b;
}
.countdownSection .decorations .santaWrapper .reindeer .body .tail:before {
  content: "";
  position: absolute;
  background-color: #cca58b;
  border-radius: 50%;
  top: -2px;
  left: -3px;
  width: 15px;
  height: 5px;
  transform: rotate(25deg);
}
.countdownSection .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 90%;
  padding: 50px 0;
}
.countdownSection .container .counterWrapper {
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}
.countdownSection .container .counterWrapper p {
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCxcL1jUIlrzSSrTtWyjwatisU5E2FuaQpGXztSERO1YPXExrYRlsz1_TDQJ6f9POLJgSSUIZpPVg5r7aeBnHu2ogaSYrqjwxe3XAWPuBIWURY8YqQXjUUtXWWeFLymaRct4OCB7dixgdP/s0/pattern.jpg);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 100px;
}
.countdownSection .container .counterWrapper .countdown {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
}
.countdownSection .container .counterWrapper .countdown .countdownProp {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 240px;
  margin: 10px;
  font-size: 200px;
  line-height: 150px;
  background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgor0zxlPtH9go59mfHe-IpHE0US6YyoOXcr7iiQY7qYcri_Zj-pIze-cz5HwTBydbBZ_khIQCZb454MtxMzBm_FyqOlgGAwNkL1nWu3OH6oDPGI7oHhgRk9vGSMd6o6kv8fP6b8_wBzZIy/s0/pattern1.png);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 100px #fff;
}
.countdownSection .container .counterWrapper .countdown .countdownProp:not(:first-child):before {
  content: ":";
}
.countdownSection .container .counterWrapper .countdown .countdownProp:after {
  content: attr(date-count);
  width: 100%;
  font-size: 20px;
  -webkit-text-fill-color: #fff;
  line-height: normal;
}
@media only screen and (max-width: 700px) {
  .countdownSection .decorations .decoration {
    width: 300px;
    height: 300px;
  }
  .countdownSection .container .counterWrapper p {
    font-size: 70px;
  }
  .countdownSection .container .counterWrapper .countdown {
    margin: 20px 0;
  }
  .countdownSection .container .counterWrapper .countdown .countdownProp {
    width: 120px;
    font-size: 100px;
    line-height: 80px;
  }
}
@media only screen and (max-width: 300px) {
  .countdownSection .decorations .santaWrapper {
    display: none;
  }
  .countdownSection .container .counterWrapper p {
    font-size: 50px;
  }
  .countdownSection .container .counterWrapper .countdown .countdownProp {
    display: block;
  }
  .countdownSection .container .counterWrapper .countdown .countdownProp:not(:first-child):before {
    display: none;
  }
  .countdownSection .container .counterWrapper .countdown .countdownProp:after {
    display: block;
  }
}
</style>

Código JavaScript

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script id="rendered-js" >
$(function () {
  $.fn.extend({
    countdown: function (props) {
      props = jQuery.extend({ //Default props
        until: new Date() },
      props);
      const state = {
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0 };

      let render = props => {
        const { days, hours, minutes, seconds } = props;
        this.empty();
        this.append(`
        <div class="countdownProp" date-count="${days == 1 ? 'día' : 'días'}">${days}</div>
        <div class="countdownProp" date-count="${hours == 1 ? 'hora' : 'horas'}">${hours < 10 ? '0' + hours : hours}</div>
        <div class="countdownProp" date-count="${minutes == 1 ? 'minuto' : 'minutos'}">${minutes < 10 ? '0' + minutes : minutes}</div>
        <div class="countdownProp" date-count="${seconds == 1 ? 'segundo' : 'segundos'}">${seconds < 10 ? '0' + seconds : seconds}</div>
        `);
      };
      render(state);
      let update = setInterval(function () {
        let counter = props.until - new Date().getTime();
        if (counter <= 0) {
          clearInterval(update);
          return false;
        }
        state.days = Math.floor(counter / (1000 * 60 * 60 * 24));
        state.hours = Math.floor(counter % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
        state.minutes = Math.floor(counter % (1000 * 60 * 60) / (1000 * 60));
        state.seconds = Math.floor(counter % (1000 * 60) / 1000);
        render(state);
      }, 1000);
      return this;
    },
    snow: function (props) {
      props = jQuery.extend({ //Default props
        amount: 60 },
      props);
      let random = (min, max) => {
        return Math.random() * (max - min) + min;
      };
      let svg = '<svg class="snow" xmlns="http://www.w3.org/2000/svg">';
      for (let index = 0; index < props.amount; index++) {
        svg += `<circle class="particle" r="${random(1, 3)}" cx="${random(1, 100)}%" cy="-${random(1, 100)}" />`;
      }
      svg += '</svg>';
      this.replaceWith(svg);
    } });
  $('.countdown').countdown({
    until: new Date('Dec, 25, 2021') // you can add time optionally ('Dec, 25, 2020 00:00:00')
  });
  $('.snow').snow({
    amount: 100 //Number of particles
  });
});
</script>

Crédito: https://codepen.io/JorgeAguilar

Puedes visualizar la animación a pantalla completa en el siguiente enlace: Cuenta atrás para la Navidad

Jose Maria Acuña Morgado - Web Developer && Ethical hacking

2 comments:

provident.com.mx29 de diciembre de 2021, 20:45
Gran aporte al blog, muchas gracias por compartir los códigos
ResponderEliminar
Respuestas
Liliana14 de abril de 2022, 21:33
Disfruta la navidad en https://www.santafemedellin.com/ donde puedes comprar regalos tecnológicos para los que mas amas y también puedes disfrutar de un día genial
ResponderEliminar
Respuestas

Añadir comentario

TecnoBlog | Espacio de Tecnología

7 de diciembre de 2021

Cuenta atrás para la Navidad

2 comments:

Entradas populares

Entradas recientes

Archivos del Blog

Extensión para Chrome

Suscribirse por email

Suscríbete a nuestro Boletín de Noticias:

Categorías

Etiquetas

Enlaces de Interés