STAR WARS LIGHTSABER

Developer
Francois Coron
Size
4,420 Kb
Views
10,120
  1. STAR WARS LIGHTSABER Previews
  2. STAR WARS LIGHTSABER HTML Codes
  3. STAR WARS LIGHTSABER CSS Codes
  4. STAR WARS LIGHTSABER JS Codes

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 Previews
IQ Test

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();
});
STAR WARS LIGHTSABER - Script Codes
STAR WARS LIGHTSABER - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 4,420 Kb
Views 10,120
Do you need developer help for STAR WARS LIGHTSABER?

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!

Francois Coron (francoiscoron) Script Codes
Name
Close SVG
Hover img
Light card transition on scroll
Starter CP
UI Quotes
Reveal footer
Buttons
SVG CREAM
Typographie
Responsive Nav
Create amazing sales emails 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!