markdown salvapantallas animado

Posted 2021-05-06

# 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);
});
```