Oxygenados La comunidad hispana
post oxygen builder
Logo Oxygenados

Switcher

¿Cómo puedes hacerlo?

En esta ocasión vamos a realizar un switcher con unas pocas líneas de código en JS, HTML y CSS. El código solo lo tendrás que copiar y pegar siguiendo las instrucciones.
Primeros pasos:
  1. Crear dos divs a los que se les cambiará el id, a uno se le pondrá como id mensual y al otro anual.
  2. Dentro de esos divs pondrás toda la información que desees y puedes darle todos los formatos que quieras, lo único que tienes que respetar es que tengan los ids mencionados.
  3. Crear un Block Code y situarlo encima de los dos divs anteriores, copiar y pegar los códigos que abajo se ponen en su correspondiente sección del Block Code creado.
PHP / HTML
<div class="cambiador">
  <input type="checkbox" id="interruptor" class="check">
  <b class="b interruptor"></b>
</div>
Click para Copiar
Copiado
CSS

.visible{
  visibility: visible;
}

.hide {
  display: none;
}

.cambiador {
  position: relative;
  width: 80px;
  height: 35px;
  /*border: 1px solid #000;	*/
  border-radius: 100px;
  /*Color Inicial fondo interruptor que se puede cambiar*/
  background-color: #aaaaaa;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}

.cambio_fondo{
	/*Color secundario fondo interruptor que se puede cambiar*/
    background-color:#000;
}

.check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}

.check:checked ~ .interruptor {
  right: 2px;
  left: 57.5%;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: .08s, 0s;
  /*Color secundario boton  interruptor que se puede cambiar*/
  background-color: #ffa900;
}

.interruptor {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 57.5%;
  /*Color inicial fondo interruptor que se puede cambiar*/
  background-color:#4353ff;
  border-radius: 36px;
  z-index: 1;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: 0s, .08s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
Click para Copiar
Copiado
JavaScript
document.addEventListener("DOMContentLoaded", function () {

    var interruptor = document.getElementById("interruptor");
    var TiMensual = document.getElementById("mensual");
    var TiAnual = document.getElementById("anual");	
	var TiFondo = document.getElementsByClassName("cambiador")[0];
 
        TiMensual.classList.add("hide");
		TiMensual.style.visibility = "visible";

   		interruptor.addEventListener("click", function () {
             TiMensual.classList.toggle("hide");
             TiAnual.classList.toggle("hide");
			 TiFondo.classList.toggle("cambio_fondo");
    })
});
Click para Copiar
Copiado
  1. Seleccionamos el div al que le habiamos dado el id de "mensual" y en el panel de herramientas de la derecha vamos a Advanced → Layout → Visibility → Y la establecemos en hidden

    Nota: Se puede retocar el CSS del código del Bock Code, pero sin cambiar los nombres a las clases actuales.
0 0 votos
Article Rating
Suscribir
Notificar de
guest
0 Comments
Comentarios en línea
Ver todos los comentarios

OTROS TIPS

Burbuja que sigue al cursor

Un efecto de seguimiento del cursor con solo código.

Leer más
Botón para copiar

Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.

Leer más
Año Copyright dinámico

Hacer que el año del copyright, generalmente colocado en el footer, se actualize de manera automática. Mostramos tres maneras de hacerlo.

Leer más
LISTADO TIPS