Crea fondos web llamativos con JavaScript

por:

Crea fondos llamativos para tu web con JavaScript

Una de las características básicas de las páginas web actuales, es conseguir un aspecto llamativo que permita al usuario recordarla y le invite a seguir descubriéndola. La verdad es que esto lo podemos conseguir utilizando distintas aproximaciones, con un buen diseño basado en imágenes, con tipografías, con iconos, etc.

En este caso os proponemos utilizar una librería de JavaScript que nos va a permitir generar un fondo muy llamativo y espectacular para nuestra web.

Generando fondos con Trianglify

Trianglify es una librería de JavaScript desarrollada por Quinn Rohlf, que se va a encargar de generar infinitos fondos basándose en la distribución de triángulos. Todo ello es aderezado por paletas de colores basadas en degradados para conseguir mejorar el efecto que buscamos:

Generando fondos llamativos con trianglify

Esta librería por defecto crea un fondo escogiendo valores aleatorios tanto de distribución como de colores. Pero también permite indicarle todos los valores que queremos utilizar, para conseguir un aspecto más personalizado.

La librería solo cuenta con una función, Trianglify a la cual podemos pasarle distintos parámetros:

ParámetroDescripciónTipoValor por defecto
widthancho del patrónInteger600
heightalto del patrónInteger400
cell_sizeTamaño de la celdaInteger75
varianceAleatoriedad del patrón generadoDecimal, entre 0 y 10.75
seedSemilla del generador aleatorioNúmero o stringnull
x_colorsGradiente de color para el eje XString o array de coloresrandom
y_colorsGradiente de color para el eje yString o array de coloresrandom

 

Ejemplo de uso de Trianglify

Una vez que ya sabemos cómo funciona la librería, vamos a pasar a un ejemplo práctico de su utilización:

<!doctype html>
<html>
    <head>
        <title>Fondos coloridos</title>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/1.0.1/trianglify.min.js"></script>       
    </head>
    <body>
        <div id="fondo">
            <script>
            var pattern = Trianglify({
                height: 800,
                width: 600,
                cell_size: 35,
                variance: "0.50",
                seed: 45,
                x_colors: "YlOrBr"
                });
            var capaFondo = document.getElementById("fondo");
            capaFondo.appendChild(pattern.canvas());
            </script>
            <div style="position: absolute;padding: 50px;top:0px;">
                <h1>Lenguaje de programacion</h1>
                <p>Esta es una demostración</p>                
            </div>
        </div>      
    </body>
</html>

En este caso pedimos un fondo de 600px de ancho por 800 de alto, con un tamaño de celda pequeño (para conseguir efecto trama), y le aplicamos una paleta de colores.

El resultado que obtenemos es el siguiente:

Resultado de generar un fondo llamativo con trianglify

 

Esperamos que este artículo haya sido de vuestro agrado y si tenéis alguna duda o comentario, esperamos poderos ayudar si nos dejáis un comentario.

 

Saludos

The following two tabs change content below.

Jorge Durán

Entusiasta de la tecnología desde los 10 años, desarrollador y creador de varios proyectos de software y autodidacta por naturaleza. Ingeniero Informático por la USAL

Latest posts by Jorge Durán (see all)

Deja una Respuesta