Share
En el tutorial de hoy, te mostraré cómo manipular los colores con JavaScript. Así es, JavaScript. No CSS. Vamos a sumergirnos para ver de qué estoy hablando.!
Todos nos hemos acostumbrado a la idea de que CSS maneja los estilos, mientras que JavaScript se usa para el comportamiento, y las dos preocupaciones deben mantenerse separadas. Pero cuando no es posible definir estilos directamente a través de CSS, como cuando se configuran a través de la entrada del usuario, JavaScript hará todo el trabajo por ti..
Chroma.js es una pequeña biblioteca que puede ser de gran ayuda para manipular los colores, así que veamos cómo empezar a usarlo..
Chroma se puede extraer de su repositorio en Github o se puede vincular desde CDNJS a través de este enlace:
Eche un vistazo a la demostración rápida que he creado para mostrarle lo que es posible. Vamos a construir un generador de esquema de color que toma un valor de color ingresado y lo usa para generar un esquema monocromático.
Si quieres seguir adelante mientras reconstruyo la demo, toma el archivo start.html (que contiene todo menos el JavaScript que vamos a escribir) y ábrelo en un editor de código..
Esto es lo que estamos construyendo.Comience agregando el siguiente fragmento de código entre >
Accentsconagua
document.addEventListener ('DOMContentLoaded', function () var btnGenerateColorScheme = document.querySelector ('# genera-color-scheme'), btnGenerateColorScale = document.querySelector ('# generar-color-scale'), colorScheme = document.querySelector ('.color-scheme'), colorScale = document.querySelector ('. color-scale'), steps = 5, // es preferiblemente un número impar chromaColor, userColor, colorList, scaleColors, scaleCount, scaleList; btnGenerateColorScheme.addEventListener ( 'click', function () ); btnGenerateColorScale.addEventListener ('click', function () );); Esta es una gran parte, ¡pero es mucho menos intimidante de lo que puedes pensar al principio! Comienza con un oyente de eventos. DOMContentLoaded que espera hasta que se carga el documento antes de ejecutar cualquiera de las funciones que siguen.
A continuación, defino un grupo de variables que vamos a usar, comenzando con dos botones, luego el esquema de colores y colorescala contenedores, entonces pasos (un número que usaremos en breve).
Por último, hay dos escuchas de eventos de clic con (todavía) funciones vacías. Vamos a comenzar con la primera de ellas, la btnGenerateColorScheme, que es (como era de esperar) el botón que generará un esquema de color.
Dentro de la función vacía, entre las llaves, comenzaremos por establecer una matriz vacía llamada lista de colores:
// Reinicializar la lista de colores. colorList = [];
Cuando un usuario hace clic en el botón, lo primero que debemos hacer es obtener el color de la # usuario-color entrada.
// Obtener el valor del color. userColor = document.querySelector ('# user-color'). value;Entonces necesitamos restablecer los valores dentro de la lista de esquema de color. Esto se hace despojando la internalHTML del .esquema de colores elemento, que en nuestro caso es un
// Restablecer el contenido de la lista de colores. colorScheme.innerHTML = ";
¡Ahora viene la parte divertida! Inicializamos la librería chroma.js llamando a croma () Y pasando en un color:
// Inicializar Chroma. chromaColor = chroma (userColor);
Nuestro color es color de usuario, el valor que sacamos de la entrada anterior.
Vamos a crear un esquema de color monocromático basado en el color elegido. Haremos esto creando una matriz, gracias a lo siguiente para lazo:
// Crear un esquema de color monocromático. para (var i = 0; i < steps; i++) colorList[i] = chromaColor.darken(i);
Este bucle recorre el número de pasos definidos en la variable pasos (Lo establecimos en 5 anteriormente, ¿recuerdas?) Cada vez que iteramos, se agrega un tono ligeramente más oscuro a la colección..
Finalmente, necesitamos generar algunos elementos usando los cinco valores de nuestra matriz. Cada vez que creamos un elemento, dale un color de fondo De acuerdo con nuestro lista de colores, luego anexarlo a esquema de colores.
// Generar algunos elementos. para (var j = 0; j < colorList.length; j++) var newItem = document.createElement('li'); newItem.style.backgroundColor = colorList[j]; colorScheme.appendChild(newItem); Hemos construido con éxito un generador de esquema de color que genera una serie de bloques, comenzando con el color seleccionado y gradualmente oscureciendo.
Nuestro esquema de colorEs posible que desee mejorar esto colocando el color seleccionado en el centro de la gama con colores más claros a la izquierda y colores más oscuros a la derecha, en cuyo caso, mire el video y siga los pasos finales. También puede agregar detalles de color para cada bloque, como el valor hexadecimal; También explico esto en el screencast.
Por último, el screencast también incluye instrucciones para construir el generador de escala de color, así que entra y dime cómo te va.!
