¡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;
}
}
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
🔍 Analiza tu web con Inteligencia Artificial – Gratis y al instante
¿Tu sitio está optimizado? Con esta herramienta puedes descubrir en segundos cómo mejorar la UX de tu web gracias a la inteligencia artificial.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Checklist de UX para Desarrolladores
¿Cuántos errores de experiencia de usuario tiene tu web y aún no lo sabes? Este checklist UX te los revela todos.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Cómo enviar pedidos o reservas de WooCommerce a WhatsApp (con o sin API)
Pedidos de WooCommerce directamente en tu WhatsApp con dos métodos: un método simple sin programación y otro con la API de WhatsApp
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Integrar la Síntesis de Voz de ElevenLabs en tu Proyecto Web
Añade un Agente entrenado con reconocimiento de voz
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Canvas Web Component
Como desarrollador full stack, notarás que se aprovechan técnicas modernas (como shadow DOM, ResizeObserver y custom elements) para lograr un componente reutilizable y de alto rendimiento.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Cómo combinar el Widget HTML de Elementor con código personalizado
Este artículo proporciona una guía técnica detallada, ideal para desarrolladores que buscan aprovechar al máximo Elementor mediante la personalización avanzada.