En este proyecto, vamos a cambiar el color de fondo con la ayuda del Selector de color.
Vistazo del Proyecto:
Acercarse:
- Cree un archivo HTML en el que vamos a agregar el texto y un selector de color que ayuda a cambiar el color de fondo de nuestra página web.
- Cree un estilo CSS para dar algunos efectos de animación a los elementos de la página web.
- Cree un archivo JavaScript para agregar detectores de eventos que puedan detectar el movimiento del mouse.
Ejemplo:
HTML:
- En primer lugar, cree un archivo HTML (index.html).
- Luego vinculamos el archivo CSS (style.css) que proporciona todo el efecto de animaciones a nuestra página HTML. Esto también se coloca entre la etiqueta <head>.
- Agregamos un enlace de Google Fonts para usar un tipo diferente de familia de fuentes en nuestro proyecto.
- ¡Luego tenemos que agregar una etiqueta de entrada para que podamos usar un selector de color!
- Al final de la etiqueta del cuerpo, debemos agregar 2 etiquetas <script>. Uno para nuestro archivo index.js y otro para el icono que hemos usado en nuestra página web.
index.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <script src="index.js"></script> <script src= "https://kit.fontawesome.com/704ff50790.js" crossorigin="anonymous"> </script> </head> <body> <h1 class="head"> Choose the color from the selector to change the bg-color <i class="fas fa-arrow-right"> </i> </h1> <input type="color" id="clr"> </body> </html>
CSS: El siguiente es el código para el archivo «style.css» utilizado anteriormente en el código HTML. CSS se utiliza para dar diferentes tipos de animaciones y efectos a nuestra página HTML para que parezca interactiva para todos los usuarios.
- Restaura todos los efectos del navegador.
- Utilice clases e identificadores para dar efectos a los elementos HTML.
- Uso de :hover para usar efectos de desplazamiento.
- Uso de @keyframes para usar animaciones en nuestra página web.
style.css
/* restoring all the default
properties of the browser */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* all similar effects of the web page
so we applied them to the body */
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
/* css effects for the color picker */
input{
margin: 2em;
width: 3em;
height: 3em;
border: .4em solid black;
border-radius: 20%;
outline: none;
cursor: pointer;
box-shadow: 0 0 .5em #111;
}
/* for the icon that we have added */
.fas{
margin: 1em;
}
/* hover effects on color picker */
input:hover{
animation: round 2s infinite;
}
/* animation for our color picker */
@keyframes round{
0%{
transform: rotate(0deg);
}
10%{
transform: rotate(60deg);
}
20%{
transform: rotate(120deg);
}
40%{
transform: rotate(180deg);
}
60%{
transform: rotate(240deg);
}
80%{
transform: rotate(300deg);
}
100%{
transform: rotate(360deg);
}
}
JavaScript: en esto, escribimos código para la detección del movimiento del mouse para cambiar el color de fondo.
Devuelve el primer elemento que coincide con el selector CSS especificado:
document.querySelector(‘css_selector’) =>Devuelve todos los elementos que coinciden con el ID de HTML especificado:
document.getElementbyId(‘html_id’) =>
index.js
// Selection of id's and classes from html document
const bgclr = document.getElementById("clr");
const headingg = document.querySelector(".head");
// Here we are adding event listener which
// is used to detect the mouse movement
bgclr.addEventListener("input", () => {
// This updates the background color which is
// picked by the user from the picker
document.body.style.backgroundColor = bgclr.value;
// This is the conditional statement that is used
// to change the text color from BLACK to WHITE
// when the background color changes to dark!
if (
bgclr.value.includes("00") ||
bgclr.value.includes("0a") ||
bgclr.value.includes("0b") ||
bgclr.value.includes("0c") ||
bgclr.value.includes("0d") ||
bgclr.value.includes("0e") ||
bgclr.value.includes("0f")
) {
headingg.style.color = "#fff";
} else {
headingg.style.color = "#000";
}
});
Producción:
Publicación traducida automáticamente
Artículo escrito por rahulmahajann y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA