Device Switcher
How do I make an device switcher?
Animation for showcasing responsive layouts.. What is a device switcher? How do you make a device switcher? This script and codes were developed by Lloydwheeler on 26 January 2023, Thursday.
Device Switcher Previews
Device Switcher - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Device Switcher</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--<div class="timer-wrapper"> <div class="timer"></div>
</div>-->
<div class="device"> <div class="phone"> <div class="camera"></div> <div class="close"></div> <div class="minimise"></div> <div class="maximise"></div> <div class="speaker"></div> <div class="screen"> <div class="scrollbar"></div> <header> <div class="menu"> <div class="menu-bar"></div> <div class="menu-bar"></div> <div class="menu-bar"></div> </div> </header> <div class="image"></div> <div class="container"> <div class="main"> <div class="faux-text"></div> <div class="faux-text"></div> <div class="faux-text"></div> <div class="faux-text"></div> <div class="faux-text"></div> </div> <div class="sidebar"> <div class="faux-text"></div> <div class="faux-text"></div> <div class="faux-text"></div> </div> </div> </div> <div class="button"> <div class="inner-button"></div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Device Switcher - Script Codes CSS Codes
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1); -moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1); transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
.timer { -webkit-transition: 0s;
}
body { background: #1c1c1c; color: #fff; font-family: Arial; overflow-y: scroll;
}
p { margin: 20px 10px;
}
.container { width: 90%; margin: 20px auto 0 auto;
}
.timer-wrapper { background: #141414; border-radius: 7px; height: 14px; margin: 30px auto; position: relative; width: 300px;
}
.timer-wrapper .timer { border-radius: 7px; width: 0px; height: 14px; background: #333;
}
.device { cursor: pointer;
}
.tablet, .phone, .desktop { border: 6px solid #fff; border-radius: 15px; margin: 30px auto; position: relative;
}
.screen, .camera, .close, .speaker, .minimise, .maximise { border: 2px solid #fff;
}
.camera, .close { border-radius: 5px; height: 10px; width: 10px;
}
.camera { position: absolute; left: 50%; margin-left: -5px; margin-top: 11px;
}
.speaker { border-radius: 4px; position: absolute; left: 50%; height: 8px; margin-left: -20px; top: 25px; width: 40px;
}
.button { border: 2px solid #fff; border-radius: 30px; bottom: 20px; left: 50%; position: absolute;
}
.inner-button { border: 2px solid #fff;
}
.screen { overflow: hidden;
}
.image { width: 100%; height: 100px; background: #333;
}
.faux-text { background: #333; height: 5px; margin-bottom: 5px; width: 90%;
}
.faux-text:first-child { margin-top: 20px;
}
.faux-text:nth-child(even) { width: 75%;
}
.device .tablet { width: 400px; height: 500px;
}
.device .tablet .screen { height: 75%; margin: 40px auto 0 auto; width: 85%;
}
.device .tablet .screen .image { height: 200px;
}
.device .tablet .screen .faux-text { height: 8px; margin-bottom: 10px;
}
.device .tablet .screen header { width: 100%; height: 40px; background: #24c7a3;
}
.device .tablet .screen header .menu { background: #14a585; height: 40px; position: absolute; right: 32px; width: 40px;
}
.device .tablet .screen header .menu .menu-bar { background: #fff; height: 3px; margin-bottom: 3px; margin-left: auto; margin-right: auto; width: 22px;
}
.device .tablet .screen header .menu .menu-bar:first-child { margin-top: 12px;
}
.device .tablet .button { width: 40px; height: 40px; margin-left: -20px;
}
.device .tablet .button .inner-button { border-radius: 5px; height: 20px; margin-left: 8px; margin-top: 8px; width: 20px;
}
.device .tablet .speaker, .device .tablet .close, .device .tablet .minimise, .device .tablet .maximise { position: absolute; opacity: 0;
}
.device .tablet .camera { margin-top: 15px;
}
.device .phone { width: 210px; height: 350px;
}
.device .phone .screen { height: 67%; margin: 45px auto 0 auto; width: 80%;
}
.device .phone .screen header { width: 100%; height: 30px; background: #24c7a3;
}
.device .phone .screen header .menu { background: #14a585; height: 30px; position: absolute; right: 22px; width: 30px;
}
.device .phone .screen header .menu .menu-bar { background: #fff; height: 3px; margin-bottom: 3px; margin-left: auto; margin-right: auto; width: 18px;
}
.device .phone .screen header .menu .menu-bar:first-child { margin-top: 7px;
}
.device .phone .button { width: 30px; height: 30px; border-radius: 20px; margin-left: -16px;
}
.device .phone .button .inner-button { border-radius: 5px; height: 16px; margin-left: 5px; margin-top: 5px; width: 16px;
}
.device .phone .close, .device .phone .minimise, .device .phone .maximise { position: absolute; opacity: 0;
}
.device .desktop { width: 800px; height: 600px;
}
.device .desktop .screen { height: 500px; margin: 40px auto 0 auto; width: 100%; border-bottom: transparent; border-left: transparent; border-right: transparent;
}
.device .desktop .screen header { width: 50px; height: 175px; left: 50px; background: #24c7a3; position: absolute;
}
.device .desktop .screen header .menu { background: #fff; width: 400px; height: 10px; margin-left: 300px; margin-top: 25px;
}
.device .desktop .screen .image { height: 300px;
}
.device .desktop .screen .main, .device .desktop .screen .sidebar { float: left; display: block;
}
.device .desktop .screen .main .faux-text, .device .desktop .screen .sidebar .faux-text { height: 8px; margin-bottom: 10px;
}
.device .desktop .screen .main { width: 66%;
}
.device .desktop .screen .sidebar { width: 25%;
}
.device .desktop .screen .scrollbar { background: #fff; border-radius: 5px; height: 120px; position: absolute; right: 10px; top: 150px; width: 7px;
}
.device .desktop .button, .device .desktop .speaker, .device .desktop .camera { opacity: 0;
}
.device .desktop .close, .device .desktop .minimise, .device .desktop .maximise { border-radius: 8px; height: 15px; left: 0; margin-left: 20px; margin-top: 13px; position: absolute; width: 15px;
}
.device .desktop .minimise { margin-left: 40px;
}
.device .desktop .maximise { margin-left: 60px;
}
Device Switcher - Script Codes JS Codes
var devices = ["phone", "tablet", "desktop"];
var device = 0;
var interval = 2000;
var ticker = setInterval(animate, interval);
$('.device').click(function() { animate(); clearInterval(ticker); ticker = setInterval(animate, interval);
});
function animate() { $('.device').children().toggleClass(devices[device]).toggleClass(devices[(device+1)%devices.length]); device = (device+1)%devices.length;
}
| Developer | Lloydwheeler |
| Username | lloydwheeler |
| Uploaded | January 26, 2023 |
| Rating | 4.5 |
| Size | 4,297 Kb |
| Views | 6,072 |
Do you need developer help for Device Switcher?
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!
Lloydwheeler (lloydwheeler) Script Codes
| Name | Size |
| Damping | 3,852 Kb |
| SVG Loading Animation | 2,786 Kb |
| 3D Button | 2,896 Kb |
| Weather Icon | 3,352 Kb |
| Mix Blend Mode | 2,391 Kb |
| Path Animation | 1,831 Kb |
| Particle Emitter | 2,320 Kb |
| Personal Logo Animation | 3,795 Kb |
| Loading Icon 2 | 2,803 Kb |
| Console Input | 2,173 Kb |
Create amazing art & images 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!
Similar Scripts & Codes
| Name | Username | Size |
| Electric worm | Jeffibacache | 2,377 Kb |
| Login-ng-modal | Heedoo | 3,566 Kb |
| Blank Starter | Mhartington | 2,171 Kb |
| Twitch TV | Natester13 | 4,488 Kb |
| Heartbeat | Apetrov | 2,079 Kb |
| Simple Buttons | Haydenmills | 1,750 Kb |
| CSS3 iPad | Vikvarg | 1,766 Kb |
| CSS Chat Bubbles | Boylett | 2,094 Kb |
| Sticky menu on scroll | Senff | 2,869 Kb |
| Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!