¡Mira este efecto “Black or White” con HTML, CSS y JavaScript!
Black or White
Este efecto permite alternar entre dos mitades de color (blanco y negro) y “rotar” la imagen al hacer clic en un toggle.
Sencillo de implementar:
- Un contenedor con la imagen dividida.
- Un checkbox que dispara una función JavaScript.
- Una suave transición de rotación con
transform: rotate().
¿Quieres añadir un giro creativo a tu web? ¡Este mini proyecto es la prueba de que el diseño y la interacción pueden ser simples pero impactantes!
#webDesign #HTML #CSS #JavaScript #ToggleEffect #FrontEnd
HTML + JS
<div class="container">
<img decoding="async" id="mask" src="https://drive.google.com/thumbnail?id=1WCdqGlJNcZVKgGg2JG_cke1yOI1K3CpY&sz=w2000" alt="Mask">
</div>
<div class="toggle-container">
<div class="toggle-switch">
<input type="checkbox" id="toggle" class="toggle-input" onclick="toggleRotation()">
<label for="toggle" class="toggle-label"></label>
</div>
<img decoding="async" class="arrow" src="https://drive.google.com/thumbnail?id=1np2fNEMsUl0LzuQjrNX9U-lCQONdZwLO&sz=w1000">
<span class="info">Click Aquí</span>
</div>
<div class="filter"></div>
<script>
let currentRotation = 0;
function rotateFilter(degrees) {
let filters = document.getElementsByClassName("filter");
for (let i = 0; i < filters.length; i++) {
filters[i].style.transition = "transform 1s ease-in-out"; // Smooth transition
filters[i].style.transform = `rotate(${degrees}deg)`;
}
}
function toggleRotation() {
currentRotation = currentRotation === 0 ? 180 : 0;
rotateFilter(currentRotation);
}
</script>
CSS
body {
align-items: center;
justify-content: center;
background: #000;
overflow-x: hidden;
}
.container {
position: relative;
background: white;
background-image: url(https://drive.google.com/thumbnail?id=1WgmFviu12pxFdyMIsswhQ2LFKithDEWX&sz=w2000);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
width: 100%;
height: 50%;
border-radius: 40px;
margin: 0px 24px;
}
.filter {
position: absolute;
filter: invert(1);
transition: left 0.5s ease-in-out, transform 0.5s ease-in-out;
top: -200%;
left: -150%;
width: 200%;
height: 500%;
background: #000;
mix-blend-mode: difference;
pointer-events: none;
transform-origin: 100% 50%;
}
#mask {
width: 100%;
height: 100%;
object-fit: contain;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.toggle-container {
display: flex;
align-items: start;
justify-content: center;
width: 100%;
height: 100px;
}
.toggle-switch {
position: relative;
width: 120px;
height: 40px;
margin-top: 20px;
filter: invert(1);
mix-blend-mode: difference;
}
.toggle-input {
display: none;
}
.toggle-label {
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 60px;
position: relative;
cursor: pointer;
transition: background 0.3s ease-in-out;
border: 5px solid black;
margin-left: 0px;
}
.toggle-label::after {
content: "";
position: absolute;
width: 28px;
height: 28px;
background: #000;
border-radius: 50%;
top: 50%;
left: 6px;
transform: translateY(-50%);
transition: all 0.3s ease-in-out;
}
.toggle-input:checked + .toggle-label::after {
left: 86px;
}
.arrow {
position: absolute;
width: 60px;
margin-left: 200px;
margin-top: 40px;
filter: invert(1);
}
.info {
position: absolute;
margin-left: 390px;
margin-top: 50px;
color: #f2f2f2;
font-size: 16px;
}
@media (max-width: 767px) {
body {
gap: 16px;
font-size: 1.5em;
}
.toggle-switch {
transform: scale(0.5);
}
.info {
position: absolute;
margin-left: 40px;
margin-top: 50px;
}
.toggle-switch {
position: relative;
width: 120px;
height: 40px;
margin-top: 5px;
margin-left: 45px;
filter: invert(1);
mix-blend-mode: difference;
}
}
ElSaltoWeb News
Un experimento visual con HTML y CSS inspirado en televisores CRT, señales analógicas, glitch y estética retro para presentar recursos,
MCP Builder IA: APK Android para generar conectores MCP con inteligencia artificial
MCP Builder IA es una APK Android para generar conectores MCP orientados a negocio. Permite crear proyectos Node.js, definir tools,