Switch

Developer
Keyon
Size
2,390 Kb
Views
8,096
  1. Switch Previews
  2. Switch HTML Codes
  3. Switch CSS Codes
  4. Switch JS Codes

How do I make an switch?

What is a switch? How do you make a switch? This script and codes were developed by Keyon on 10 January 2023, Tuesday.

Switch Previews
IQ Test

Switch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Switch</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label class="switch left-switch"> <input id="left" type="checkbox"> <div class="slider round"></div>
</label>
<label class="switch right-switch"> <input id="right" type="checkbox" checked> <div class="slider round"></div>
</label>
<div class="screen"> <div class="glass"> <!-- That's quite an error, because IT'S A F**KING PLASTIC SCREEN THAT SCRATCHES ITSELF BY DOCKING IT! --></div> <div class="screen-on"></div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Switch - Script Codes CSS Codes

html { background: #EEEEEE; width: 100vw; height: 100vh;
}
body { margin: 0px;
}
.switch { position: fixed; display: inline-block; width: 95px; height: 33px;
}
.left-switch { transform: translate(calc(50vw - 217px), calc(50vh - 25px));
}
.right-switch { transform: translate(calc(50vw + 122px), calc(50vh - 25px));
}
.switch input {display:none;}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #EF5350; transition: 0.7s ease; transform: rotate(-90deg) scale(1.7);
}
.slider:before { position: absolute; content: ""; height: 19px; width: 19px; left: 4px; bottom: 7px; background-color: #212121; transform: translateX(4px); transition: 0.7s ease;
}
input:checked + .slider { background-color: #42A5F5;
}
input:focus + .slider { box-shadow: 0 0 1px #42A5F5;
}
input:checked + .slider:before { transform: translateX(64px);
}
/* Rounded sliders */
.slider.round { border-radius: 20px;
}
.slider.round:before { border-radius: 100%;
}
.screen { position: fixed; width: 280px; height: 165px; background: #191818; border-radius: 10px; transform: translate(calc(50vw - 140px),calc(50vh - 90px));
}
.glass { width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 5px; margin: 10px; background: rgba(255,255,255,0.2); opacity: 0.25; transition: all 0.7s ease;
}
.screen-on { background: linear-gradient(to bottom right, #2196F3, #F44336); opacity: 0; transition: opacity 0.7s ease;
}
.screen-on-really-on { opacity: 0.25 !important; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 5px; margin: 10px; position: fixed; top: 0;
}

Switch - Script Codes JS Codes

$('.screen').delay(1000).queue(function() { $('.screen-on').addClass('screen-on-really-on'); $('#left').prop('checked', true ); $('#right').prop('checked', false ).dequeue();
});
Switch - Script Codes
Switch - Script Codes
Home Page Home
Developer Keyon
Username Keyon
Uploaded January 10, 2023
Rating 4
Size 2,390 Kb
Views 8,096
Do you need developer help for Switch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keyon (Keyon) Script Codes
Name
MEMOREYES
Simple Login
Cloud OS
Play of the Game
Gooey mouse follow
Heart Beat
Materoid
Marco, the angry rectangle
Profile Box
Zelda Breath of the Wild Cartridge
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!