slide1

Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

slide2

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

slide3

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

slide4

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

slide5

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas
Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas

7 de diciembre de 2021

Cuenta atrás para la Navidad

Christmas Icon
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



16 de diciembre de 2014

Comentarios con desplazamiento de texto para Blogger (efecto marquee)


Todos conocemos la importancia de un blog como herramienta de marketing online para cualquier actividad empresarial o negocio. Se trata de un instrumento muy competitivo y diferencial que actúa como canal de comunicación entre las empresas que ofrecen sus productos o servicios y los usuarios.

Un blog corporativo posibilita la interacción con nuestros clientes actuales y potenciales a través de comentarios, teniendo como finalidad aumentar la reputación de nuestra marca lo que se traducirá en la consecución de nuestros objetivos.
En cada acción que realizas o en cada comentario que alguien hace sobre ti, se está construyendo tú marca comercial o personal.

Para mostrar los comentarios recientes en nuestro blog, pagina o sitio web, podemos utilizar las herramientas que nos ofrecen los distintos gestores de contenido.
Ese plus de visibilidad nos los proporcionan los widgets o gadgets que permiten incrustar y presentar información relevante para el usuario final.

Blogger pone a nuestra disposición un gadget de muy fácil implementación y de máximo interés: un tablero con los últimos comentarios publicados en tu sitio web o blog..

Éstos son los pasos a seguir:

  1. Selecciona la entrada Diseño del panel principal de Blogger.
  2. Pulsa sobre el link Añadir un gadget y se abrirá una ventana con diferentes alternativas
  3. Desplazamos el scroll de la nueva ventana hacia abajo hasta llegar a la opción:

    HTML/JavascriptAñadir
    Añade una característica de un tercero u otro código a tu blog.





  4. Introduce el Título del widget (por ejemplo Últimos comentarios)
  5. En la caja Contenido pega el siguiente código:

    <script type="text/javascript">
     // Recent Comments Settings
     var
     numComments  = 10,
     showAvatar  = true,
     avatarSize  = 40,
     roundAvatar = true,
     characters  = 40,
     showMorelink = false,
     moreLinktext = "More »",
     defaultAvatar  = "http://i.imgur.com/3QqaBeS.png",
     hideCredits = true;
    </script>
    
    <script type="text/javascript" src="
    https://raw.githack.com/jmacuna/comments-avatar/master/recent_comments.html"></script>
    <script type="text/javascript" src="[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script>
    
  6. Por último hacemos click sobre el botón Guardar

Vamos a analizar cada uno de los parámetros:

  • numComments: número de comentarios a mostrar.
  • showAvatar: 'true' si queremos mostrar el avatar (identidad virtual) del autor del comentario.
  • avatarSize: tamaño en píxeles de la imagen del avatar.
  • roundAvatar: 'true' para mostrar el avatar en forma redondeada.
  • characters: especifica el número de caracteres del comentario.
  • showMorelink: 'true' para que aparezca el link que nos lleva a la lectura de ese comentario.
  • moreLinktext: texto del enlace para acceder al comentario.
  • defaultAvatar: imagen por defecto para aquellos avatares que no disponen de imagen identificativa.
  • hideCredits: 'true'si queremos ocultar la url de la pagina del creador.
Como indicación final, sustituimos el texto [URL DE TU BLOG] por la dirección de nuestro blog (en mi caso: http://www.tecnoblog.guru).

Podéis ver el ejemplo funcionando en la columna derecha del blog, bajo la sección Suscribirse por Email (visible en la versión de escritorio).

Ahora vamos a dotar de mayor dinamismo al tablero con el efecto marquee (efecto de movimiento de los textos o comentarios).
Para ello, añadimos dos nuevas librerías javascript y la función jQuery para la ejecución del script.

El código resultante es el siguiente:

<table class="comments">
<tr><td class="title">Últimos comentarios</td></tr>
<tr><td><div class="scroller">
<script type="text/javascript">
var numComments  = 10,
    showAvatar  = true,
    avatarSize  = 40,
    roundAvatar = true,
    characters  = 40,
    showMorelink = false,
    moreLinktext = "More »",
    defaultAvatar  = "http://i.imgur.com/3QqaBeS.png",
    hideCredits = true;
</script>
<script src="https://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/w2b_recent_comments_with_avatars.js"></script>
<script src="[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/scrollForever.js"></script>
</div></td></tr>
</table>
<script type="text/javascript">$(document).ready(function({$(".scroller").scrollForever({dir:"top",container:"ul",inner:"li",speed:1000,delayTime:10,continuous:true,num:1});});</script>


Puedes visualizar y descargar el ejemplo para integrarlo en tu blog en la siguiente dirección:

Comentarios recientes con efecto 'marquee'


11 de octubre de 2014

Como generar barcodes lineales y QR barcodes con jQuery en pocas líneas de código

En el artículo anterior Quick Response Barcode o «código de respuesta rápida» perfilamos las dimensiones que tiene y puede alcanzar este tipo de software. También hablamos de la infinidad de servicios que nos permiten generar el código de forma sencilla y transparente ya sea a través de la instalación de un programa o directamente desde la barra de direcciones de nuestro navegador.

Ahora bien, ¿estamos dispuestos a crear códigos qr dependientes de servicios de terceros?

Con jQuery.qrcode generar códigos QR de forma dinámica en nuestro sitio web será muy fácil y tendremos la posibilidad de codificar alrededor de 2900 caracteres (8 bits).

Este plugin permite la creación de códigos QR de dos formas diferentes:

  • Dibujándolo sobre un objeto canvas: genera en el elemento que deseemos una etiqueta canvas de HTML5, y luego pinta el código sobre su superficie.

    Funcionará en los navegadores más modernos que soporten el objeto canvas de forma nativa:

    • Internet Explorer 9+
    • Firefox 31+
    • Chrome 31+
    • Safari 5.1+
    • Opera 24+
    • iOS Safari 7.1+
    • Opera Mini 7+
    • Android Browser 2.3+
    • Chrome for Android 37+

    Toda la información en http://caniuse.com/#feat=canvas

  • Generándolo a partir de capas o divs: crea el código dibujando cada punto a partir de un elemento div de HTML, por lo que funcionará en cualquier navegador.
Podemos ver una demostración que ilustra estos dos métodos en la dirección https://larsjung.de/jquery-qrcode/latest/demo/

Su uso es simple: seleccionamos con jQuery el elemento en el que queremos albergar el código y llamamos al método qrcode con el parámetro text y la información que queremos mostrar.

Obtenemos el código QR:



También podemos pasar parámetros al método para definir el aspecto del código QR: tamaño, color, fuente, bordes, etc.

Código QR resultante:



jQuery también nos proporciona otro plugin para generar barcodes o códigos de barras lineales, cuya concepción se basa en en la 'representación mediante un conjunto de líneas paralelas verticales de distinto grosor y espaciado que en su conjunto contienen una determinada información, es decir, las barras y espacios del código representan pequeñas cadenas de caracteres'.
Fuente: http://es.wikipedia.org/wiki/Código_de_barras

También resulta extraordinariamente fácil su uso, tan sólo tenemos que importar en nuestro web site la librería jquery-barcode.min.js que podemos bajarnos del sitio oficial http://barcode-coder.com/download/jquery-barcode-2.0.3.zip.

En este caso seleccionamos el elemento en el que queremos insertar el código y llamamos al método barcode con la cadena numérica a codificar y el tipo de codificación.




De la misma forma que los códigos de dos dimensiones, podremos definir el aspecto del barcode: color de fondo, color de las barras verticales, ancho y algo de las barras, etc.


Obtenemos el siguiente código de barras lineal:



Los tipos de códigos de barras que nos proporciona la librería son:

  • EAN 8
  • EAN 13
  • UPC
  • standard 2 of 5 (industrial)
  • interleaved 2 of 5
  • code 11
  • code 39
  • code 93
  • code 128
  • codabar
  • MSI
  • Data Matrix

Toda la información en http://barcode-coder.com/en/barcode-jquery-plugin-201.html


16 de diciembre de 2013

Tarjeta de Navidad animada con jQuery

jQuery es una biblioteca de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. jQuery es la biblioteca de JavaScript más utilizada. jQuery es software libre y de código abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pública General de GNU v2, permitiendo su uso en proyectos libres y privativos.

La familia y los amigos son como las estrellas: no siempre las ves, pero siempre están ahí.

¡¡¡FELIZ NAVIDAD!!!



Tarjeta de Navidad animada con jQuery

 

Haz clic en el lazo azul para abrir la tarjeta

 
 
 
 
 


Si lo deseas, puedes descargar y modificar el ejemplo para añadirlo a tu página web en la siguiente dirección: navidad-jquery
(Fuente original: www.lewebmonster.com)

 



9 de octubre de 2013

Librerías javascript de gran utilidad para tu desarrollo web


JavaScript es un lenguaje de programación que a lo largo de los últimos años ha ido ganando popularidad y con la incursión de HTML5 ha dotado de mayor dinamismo e interactividad a la web, haciendo posible una navegación más agradable para el usuario.


Todos los navegadores llevan integrados sus propios motores JavaScript con objeto de aprovechar al máximo sus características y ofrecer al usuario un mayor rendimiento en aplicaciones web.

Algunas de las librerías más conocidas y que nos pueden ayudar en el desarrollo de nuestros proyectos web son:

  • jQuery: es la librería más utilizada por su fácil manejo en el tratamiento de los objetos del DOM ya que nos permite abstraernos completamente. Muy aconsejable para la integración de efectos y animaciones personalizadas.
    jQuery es software libre y de código abierto permitiendo su uso en proyectos libres y privativos. Además es compatible con los navegadores más comunes del mercado como Mozilla Firefox 2.0+, Internet Explorer 6+, Safari 3+, Opera 10.6+ y Google Chrome 8+
    Recomiendo el siguiente libro gratuito en español sobre Fundamentos de jQuery: http://librojquery.com/
  • Mootools: este framework está enfocado a la orientación de objetos como sus siglas indican (My object oriented tools).
    Cuenta con un componente avanzado de efectos y con transiciones optimizadas y utilizadas por multitud de desarrolladores Flash.
    Es de código abierto y compatible y probado en Safari 3+, Internet Explorer 6+, Mozilla Firefox 2+, Opera 9+, Google Chrome 4+
  • Prototype: es un framework escrito en JavaScript para el desarrollo sencillo y dinámico de aplicaciones web. Su potencial es aprovechado al máximo cuando se desarrolla con Ruby On Rails.
  • Yahoo! UI Library: bibliotecas utilizadas para la construcción de aplicaciones enriquecidas RIA (rich Internet applications) o aplicaciones web que tienen la mayoría de las características de las aplicaciones de escritorio tradicionales.
    Liberadas bajo licencia BSD por parte de la compañía Yahoo.
  • Modernizr: esta librería proporciona la misma experiencia de usurio a todos los visitantes del sitio web independientemente de su navegador.
    Modernizr no añade ninguna funcionalidad al navegador. En cambio, sólo averigua si la funcionalidad que estás intentando implementar responde en dicho navegador. Esto nos permite experimentar con las nuevas características de HTML5 y CSS3 sin preocuparnos por restar experiencia de usuario o que la página no se renderice adecuadamente.
  • Dojo: es un framework que contiene APIs y widgets para facilitar el desarrollo de aplicaciones Web que utilicen tecnología AJAX.
    Es de código abierto y se puede descargar de forma gratuita en su página oficial. Cuenta con el patrocinio de IBM, Google, AOL y Nexaweb.
Si buscamos librerías que atiendan a propósitos específicos:

  • Visualización y efectos de imagenes: JS charts (gráficos de barras, circulares y de líneas simples), Gráfico (10 tipos de gráficos, de barras, de area, de línea y barras horizontales...), Canvas 3D JS Library (objetos 3D), CanvasXpress (gráficos tridimensionales), Raphaël (gráficos vectoriales con SVG y VML), ImageFX (efectos sobre imágenes con CANVAS), Reflection.js (efectos de reflexión), PaintbrushJS (efectos sobre imágenes similares a los que podemos encontrar en aplicaciones como Instagram o picplz)
  • Manejo de cadenas y funciones matemáticas: Date.js (funciones complejas de fechas), Sylvester (vectores y arrays en varias dimensiones), XRegEx (expresiones regulares), JavaScript Url Library (manipulación de direcciones o url).

Como punto final, os reto a que resolváis el siguiente puzzle realizado con JQuery Puzzle:

jqPuzzle