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 original: 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
Sólo quedan ...
para Navidad
Código CSS
Código JavaScript
${hours
${minutes
${seconds
`);
};
render(state);
let update = setInterval(function () {
let counter = props.until - new Date().getTime();
if (counter 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 = '';
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
});
});
Crédito: https://codepen.io/JorgeAguilar
Puedes visualizar la animación a pantalla completa en el siguiente enlace: Cuenta atrás para la Navidad
`);
};
render(state);
let update = setInterval(function () {
let counter = props.until - new Date().getTime();
if (counter 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 = '';
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
});
});
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
