¡Mira este efecto “Black or White” con HTML, CSS y JavaScript!

Black or White

Click Aquí

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;
}
	
}

COMPARTIR EN:

Explorando la Sexualidad a Partir de los 30: Impacto en Hombres y Mujeres

COMPARTIR EN:

Atención Dental a Domicilio: La Solución Ideal en Santiago de Chile

COMPARTIR EN:

Dominando Laravel Eloquent: El ORM que Revoluciona el Desarrollo Web

COMPARTIR EN:

Domina el Web Scraping con Python: Una Guía Práctica

COMPARTIR EN:

Layout Explorations with Gsap

Mi formación no vino de una academia tradicional, sino del compromiso constante con el aprendizaje práctico. Cursos, documentación, errores y muchas líneas de código me llevaron a entender no solo cómo funciona la web, sino cómo hacer que funcione mejor.

COMPARTIR EN:

¡Mira este efecto “Black or White” con HTML, CSS y JavaScript!

Black or White

HTML + JS

CSS

Explorando la Sexualidad a Partir de los 30: Impacto en Hombres y Mujeres

Atención Dental a Domicilio: La Solución Ideal en Santiago de Chile

Dominando Laravel Eloquent: El ORM que Revoluciona el Desarrollo Web

Domina el Web Scraping con Python: Una Guía Práctica

Layout Explorations with Gsap

El Futuro del SEO: Cómo la IA Transformará las Estrategias en 2025