HTML Favicon animado
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML Favicon animado相关的知识,希望对你有一定的参考价值。
<link href="url de la imágen" type="image/gif" rel="icon" />
markdown salvapantallas animado
# Introducción
Se pretende crear un salvapantalla animado con JavaScript.
Se indica por pasos, primero la parte estática y luego animada.
## Paso 1: Crear el salvapantallas estático
Creamos un fondo negro con una imagen estática.
Usamos alguna clase de bootstrap como `hidden`
y jQuery para culminar este ejemplo. Se podría
hacer con JS puro pero es más un poco más complicado
y hace que sea más difícil de entender el ejemplo.
### HTML
Empecemos por el HTML. El overlay y dentro la imagen que
animaremos. Podemos usar CSS puro para ello también:
```html
<div class="overlay hidden" id="overlay-container">
<img class="overlay-img" src="ruta/imagen.png" id="overlay-img">
</div>
```
### CSS
El position relative de `.overlay-img`
no es necesario aún pero lo agregamos ya para
simplificar el ejemplo.
```css
.overlay {
height: 100%;
width: 100%;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
background-color: #000;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
.overlay-img {
height: 200px;
position:relative;
}
```
### JS
Ahora vamos a mostrar el overlay cada X tiempo sin actividad.
Por defecto escuchamos a los eventos de click o pulsación para
detectar actividad.
```javascript
$(document).ready(function() {
var intervalId;
function overlay() {
$(".overlay").addClass("hidden");
clearInterval(intervalId);
intervalId = setInterval(function () {
$(".overlay").removeClass("hidden");
}, 60000);
}
overlay();
// Mostramos / ocultamos el salvapantallas
// cuando se haga click o pulse algo.
$("body").first().on("click touchend", overlay);
});
```
Felicidades, ya tienes tu overlay estático. Pero, ¿qué sería
de un salvapantallas sin algo de movimiento? Pasemos a darle
un poco de vida a este ejemplo.
## Paso 2: Salvapantallas animado
No vamos a necesitar más HTML ni CSS para este paso puesto
que lo tenemos del paso 1. Vamos a modificar el JS para
visualizar como quedaría el resultado final.
```javascript
$(document).ready(function() {
var intervalId,
// Vertical movement: 1 - down | 0 - up
controlY = Math.floor((Math.random() * 1) + 0),
// Horizontal movement: 1 - right | 0 - left
controlX = Math.floor((Math.random() * 1) + 0),
// Animation object position (x , y)
x = 0, y = 0,
speed = 1, screensaverIntervalId;
function moveScreensaverAnimation() {
var overlayContainer = document.getElementById("overlay-container"),
overlayImg = document.getElementById("overlay-img");
// Vertical
if (controlY == 1) {
y += speed;
} else {
y -= speed;
}
if (y < 0) {
controlY = 1;
y = speed;
} else if (y >= overlayContainer.offsetHeight - overlayImg.height) {
controlY = 0;
y = overlayContainer.offsetHeight - overlayImg.height;
}
// Horizontal
if (controlX == 1) {
x += speed;
} else {
x -= speed;
}
if (x < 0) {
controlX = 1;
x = speed;
} else if (x >= overlayContainer.offsetWidth - overlayImg.width) {
controlX = 0;
x = overlayContainer.offsetWidth - overlayImg.width;
}
overlayImg.style.left = x + "px";
overlayImg.style.top = y + "px";
}
function initScreensaverAnimation() {
if (typeof screensaverIntervalId == "undefined") {
screensaverIntervalId = setInterval(moveScreensaverAnimation, 20);
}
}
function stopScreensaverAnimation() {
clearInterval(screensaverIntervalId);
}
function overlay() {
stopScreensaverAnimation();
$(".overlay").addClass("hidden");
clearInterval(intervalId);
intervalId = setInterval(function () {
$(".overlay").removeClass("hidden");
initScreensaverAnimation();
}, 60000);
}
overlay();
// Mostramos / ocultamos el salvapantallas
// cuando se haga click o pulse algo.
$("body").first().on("click touchend", overlay);
});
```
以上是关于HTML Favicon animado的主要内容,如果未能解决你的问题,请参考以下文章
markdown salvapantallas animado
css Efecto Animado标题(Kern-burns)