STAR WARS LIGHTSABER
How do I make an star wars lightsaber?
Forked from Francois Coron's Pen gPYqBz.. What is a star wars lightsaber? How do you make a star wars lightsaber? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.
STAR WARS LIGHTSABER - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>STAR WARS LIGHTSABER</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--.sw-menu-->
<!--.sw-sky-->
<!--.sw-laser.sw-laser--2-->
<div class="sw-container"> <h1>Star Wars<span> Lightsaber</span></h1> <div class="laser sw-laser--obiwan"> <div class="sw-laser"></div> <p>Obi Wan Kenobi</p> <audio> </audio> </div> <div class="laser"> <div class="sw-laser sw-laser--vader"></div> <p>Darth Vader</p> </div> <div class="laser"> <div class="sw-laser sw-laser--yoda"></div> <p>Yoda</p> </div> <div class="laser"> <div class="sw-laser sw-laser--windu"></div> <p>Windu</p> </div> <div class="laser"> <div class="sw-laser-7"><span></span></div> <p>??? </p> </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>
STAR WARS LIGHTSABER - Script Codes CSS Codes
*,
*::before,
*::after { box-sizing: border-box;
}
body { font-family: "Open Sans", sans-serif; color: #333; background: #222;
}
a { color: #009688; text-decoration: none;
}
a:hover { text-decoration: underline;
}
.sw-container { width: 40rem; margin: 20px auto; padding: 10px;
}
.sw-container h1 { text-transform: uppercase; color: #FFF; font-weight: bold; font-style: italic; font-size: 32px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.sw-container h1 span { color: rgba(255, 255, 255, 0.2);
}
.laser { position: relative; margin: 40px 0;
}
.laser--1 { margin-top: 20px;
}
.laser p { text-transform: uppercase; color: #FFF; margin: 20px 0 40px; letter-spacing: 0.5em;
}
.sw-laser { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; height: 10px; width: 50px; cursor: pointer; background: #e2e2e2; border-radius: 4px 2px 2px 4px; border-right: 5px solid #898989; border-left: 5px solid #898989;
}
.sw-laser::after { content: ""; position: absolute; top: 1px; left: 40px; width: 0px; height: 8px; z-index: -1; background: #FFF; border-radius: 0 50px 50px 0; box-shadow: 10px 0 25px #5f9fdd, inset 0px 0 10px #5f9fdd; -webkit-transition: 150ms ease-in-out; transition: 150ms ease-in-out;
}
.sw-laser::before { content: ''; position: absolute; height: 3px; width: 5px; border-radius: 5px; background: #898989; top: -3px; left: 80%; z-index: 0;
}
.sw-laser.is-open::after { width: 240px;
}
.sw-laser.is-open::before { background-color: #5F9FDD; height: 2px; top: -2px;
}
.sw-laser--vader::after { box-shadow: 10px 0 25px #b62321, inset 0px 0 10px #b62321;
}
.sw-laser--vader.is-open::before { background-color: #B62321;
}
.sw-laser--yoda::after { box-shadow: 10px 0 25px #4aa942, inset 0px 0 10px #4aa942;
}
.sw-laser--yoda.is-open::before { background-color: #4AA942;
}
.sw-laser--windu::after { box-shadow: 10px 0 25px #ca74dd, inset 0px 0 10px #ca74dd;
}
.sw-laser--windu.is-open::before { background-color: #ca74dd;
}
.sw-laser-7 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative; height: 10px; width: 50px; cursor: pointer; background: #6f6f6f; border-radius: 4px 2px 2px 4px; border-right: 5px solid #565656; border-left: 5px solid #565656;
}
.sw-laser-7::after { content: ""; position: absolute; top: 1px; left: 40px; width: 0; height: 8px; z-index: -1; background: #FFF; border-radius: 0 50px 50px 0; box-shadow: 10px 0 25px #b62321, inset 0px 0 10px #b62321; -webkit-transition: 150ms ease-in-out; transition: 150ms ease-in-out;
}
.sw-laser-7::before { content: ''; position: absolute; height: 3px; width: 5px; border-radius: 5px; background: #898989; top: -3px; left: 80%; z-index: 0;
}
.sw-laser-7 span { right: -10px; top: -10px; position: absolute; height: 30px; width: 10px; cursor: pointer; background: #6f6f6f; border-radius: 4px; border-bottom: 3px solid #565656; border-top: 3px solid #565656;
}
.sw-laser-7 span::before, .sw-laser-7 span::after { content: ''; width: 6px; height: 20px; position: absolute; z-index: -1; background: #FFF; left: 2px; z-index: -1; -webkit-transition: 150ms ease-in-out; transition: 150ms ease-in-out; -webkit-transform: scale(0); transform: scale(0);
}
.sw-laser-7 span::before { top: -18px; border-radius: 8px 8px 0 0; box-shadow: 0 -5px 15px #b62321, inset 0px 0 10px rgba(182, 35, 33, 0.5); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;
}
.sw-laser-7 span::after { bottom: -19px; border-radius: 0 0 8px 8px; box-shadow: 0 5px 15px #b62321, inset 0px 0 10px rgba(182, 35, 33, 0.5); -webkit-transform-origin: 50% 0; transform-origin: 50% 0;
}
.sw-laser-7.is-open::after { width: 240px;
}
.sw-laser-7.is-open::before { background: #B62321; height: 2px; top: -2px;
}
.sw-laser-7.is-open span::before, .sw-laser-7.is-open span::after { -webkit-transform: scale(1); transform: scale(1);
}
STAR WARS LIGHTSABER - Script Codes JS Codes
var saberSound = new Audio('http://cdn.chimps-design.com/78685__joe93barlow__swing7.wav');
$('.sw-laser, .sw-laser-7').click(function(){ $(this).toggleClass('is-open'); saberSound.play();
});
Developer | Francois Coron |
Username | francoiscoron |
Uploaded | November 08, 2022 |
Rating | 3 |
Size | 4,420 Kb |
Views | 10,120 |
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!
Name | Size |
UI Quotes | 4,430 Kb |
Auto Height textarea | 2,464 Kb |
Simple Button Icons | 2,257 Kb |
Close SVG | 2,706 Kb |
Typographie | 2,407 Kb |
Light card transition on scroll | 3,814 Kb |
Starter jade | 2,008 Kb |
Responsive Nav | 3,721 Kb |
Hover img | 3,633 Kb |
SVG CREAM | 2,766 Kb |
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!
Name | Username | Size |
Portfolio Layout Flex | Lahvjal | 3,489 Kb |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Button fills | Zubfatal | 5,205 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
IE flex collapse bug fix | Rowno | 2,678 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
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!