Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<body id="galaxy">

	
	<section id="fight-your-page">
    <a href="https://scotch.io/demos/star-wars-attack-of-the-dom" class="fade-color" target="_top">Full Screen Demo is better</a>
		<a class="meh" href="https://scotch.io/apps/star-wars-attack-of-the-dom" class="fade-color" target="_top">Fight your Web Page</a>
	</section>

	<section id="huuuge-dom"></section>

	<section id="intro">
		<div id="long-long-time-ago">
			<h1>A long time ago, in a galaxy<br>far, far away....</h1>
		</div>
		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="logo" x="0px" y="0px" viewBox="0 0 693.615 419.375" enable-background="new 0 0 693.615 419.375" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
			<g id="Layer_2">
				<g>
					<path fill="#FFE81F" d="M148.718,221.207l8.67,25.461c4.691,13.768,8.879,24.779,9.425,24.779c0.009,0,0.017-0.004,0.024-0.01    c0.6-0.53,17.57-49.811,17.57-49.811h32.89l-39.68,115.619h-22.86c0,0-24.4-70.471-24.3-70.739l-25.47,69.851h-22.63    l-39.18-115.15l32.73,0.021c0,0,17.929,50.821,18.168,50.821c0.001,0,0.001-0.001,0.002-0.002l17.89-50.841H148.718 M32.003,213.2    l3.601,10.584l39.18,115.149l1.845,5.424h5.729h22.63h5.598l1.918-5.26l17.685-48.5c1.524,4.434,3.171,9.213,4.818,13.988    c6.089,17.655,12.191,35.277,12.191,35.277l1.864,5.383h5.696h22.86h5.712l1.854-5.403l39.68-115.618l3.637-10.598h-11.204h-32.89    h-5.706l-1.858,5.396c-2.974,8.635-6.921,20.031-10.296,29.676c-0.509-1.463-1.039-3.001-1.587-4.611l-8.669-25.46l-1.846-5.421    h-5.727h-36.75h-5.666l-1.881,5.345l-10.453,29.706c-3.453-9.706-7.456-21.017-10.516-29.691l-1.882-5.334l-5.657-0.004    l-32.73-0.021L32.003,213.2L32.003,213.2z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M655.258,220.758l-0.075,30.305c0,0-32.643-0.109-49.239-0.109c-5.521,0-9.266,0.013-9.444,0.045    c-2.86,0.521-4.681,6.602-3.87,9.271c0.399,1.35,3.391,5.76,6.63,9.81c3.229,4.051,8.54,10.681,11.78,14.729    c8.319,10.381,9.46,12.43,10.229,18.391c1.25,9.681-3.329,20.16-11.829,27.07c-8.518,6.93-8.145,6.979-71.383,6.979    c-0.916,0-1.835,0-2.777,0c-38.46-0.01-58.8-0.329-61.761-0.989c-5.26-1.19-13.64-8.03-35.79-29.28    c-7.967-7.636-15.309-14.322-15.686-14.324c-0.01,0-0.015,0.006-0.015,0.016l-0.261,44.579l-35.899-0.159l-0.221-114.98h45.271    h34.79c24.13,0.871,40.46,24.91,37.21,40.24c-0.74,3.479-2.62,8.521-4.181,11.2c-3.21,5.5-11.38,12.56-18.011,15.591    c-2.449,1.108-4.449,2.398-4.449,2.858c0,1.71,8.061,9.649,11.08,10.91c2.579,1.079,10.09,1.319,43.21,1.319    c3.882,0,7.408,0.002,10.608,0.002c33.293,0,31.618-0.24,34.19-5.741c1.801-3.83,0.431-6.12-12.239-20.39    c-16.051-15.971-14.37-23.621-14.48-29.271c-0.229-6.77,5.102-28.069,32.812-28.069L655.258,220.758 M440.188,273.878    c15.37,0,18.49-0.239,21.761-1.66c11.04-4.8,11.63-18.979,1.04-25.271c-2.319-1.381-5.3-1.609-21.96-1.7l-19.279-0.101    c0.159,0.15-0.061,27.57-0.061,27.57S426.518,273.878,440.188,273.878 M663.277,212.758h-8.021h-73.8    c-16.032,0-25.515,6.328-30.646,11.637c-8.347,8.633-10.313,19.504-10.162,24.629c0.008,0.427,0.003,0.865-0.002,1.322    c-0.073,8.329,1.154,17.758,16.659,33.246c3.065,3.452,8.193,9.239,10.131,12.115c-4.238,0.521-14.98,0.521-26.262,0.521h-4.792    l-5.816-0.002c-19.904,0-36.688-0.057-40.128-0.736c-0.481-0.314-1.156-0.854-1.898-1.498c6.877-4.235,13.83-10.799,17.104-16.412    c1.987-3.413,4.178-9.243,5.098-13.568c2.04-9.625-1.325-21.236-9.001-31.068c-8.956-11.471-21.985-18.334-35.746-18.83    l-0.145-0.006h-0.145h-34.79h-45.271h-8.016l0.016,8.017l0.221,114.979l0.016,7.949l7.949,0.035l35.899,0.159l7.988,0.035    l0.047-7.988l0.155-26.706c0.733,0.696,1.491,1.419,2.269,2.165c24.227,23.24,32.359,29.679,39.562,31.308    c1.979,0.441,5.253,1.172,63.523,1.188h2.779c31.546,0,47.38,0,56.799-0.91c10.789-1.043,14.259-3.49,19.461-7.725l0.173-0.141    c10.685-8.687,16.323-21.83,14.715-34.3c-1.048-8.11-3.194-11.479-11.922-22.368l-2.594-3.24    c-3.04-3.799-6.713-8.387-9.175-11.475c-1.986-2.484-3.546-4.689-4.487-6.133c1.236-0.003,2.841-0.005,4.918-0.005    c16.395,0,48.887,0.108,49.213,0.11l8.008,0.026l0.02-8.008l0.075-30.306L663.277,212.758L663.277,212.758z M429.739,265.586    c0.013-2.021,0.025-4.287,0.038-6.557c0.01-2,0.019-4.004,0.022-5.84l11.187,0.058c6.429,0.035,16.103,0.088,17.989,0.623    c2.407,1.461,3.75,3.72,3.604,6.06c-0.08,1.264-0.682,3.588-3.821,4.951c-1.75,0.76-4.54,0.997-18.57,0.997    C435.738,265.878,432.305,265.749,429.739,265.586L429.739,265.586z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M312.908,220.287l40.29,115.92l-32.83,0.15l-5.45-17.41l-58.7-0.471l-5.18,17.431l-32.5-0.341    l39.78-115.229L312.908,220.287 M286.507,237.283c-0.083,0.333-5.144,14.219-10.222,28.104c-5.12,14-10.257,28-10.328,28.109    c0,0.001-0.001,0.001,0,0.001l0,0c0,0,0,0,0-0.001c0.136-0.04,18.316-0.08,29.968-0.08c5.453,0,9.475,0.009,9.55,0.029    c0.001,0.004,0.001,0.005,0.001,0.005s0-0.001,0-0.003c0,0,0,0-0.001-0.002C305.271,292.916,286.566,237.959,286.507,237.283    c0.001-0.004,0.001-0.006,0.001-0.006l0,0C286.507,237.277,286.507,237.279,286.507,237.283 M318.595,212.282l-5.693,0.005    l-54.59,0.051l-5.696,0.005l-1.859,5.386l-39.78,115.229l-3.623,10.494l11.102,0.115l32.5,0.341l6.033,0.063l1.719-5.782    l3.466-11.662l46.854,0.375l3.708,11.848l1.765,5.638l5.907-0.026l32.829-0.15l11.195-0.052l-3.676-10.574l-40.29-115.92    L318.595,212.282L318.595,212.282z M277.472,285.424c1.515-4.129,3.556-9.71,6.327-17.289c0.869-2.376,1.664-4.551,2.393-6.545    c0.663,1.956,1.385,4.084,2.169,6.398c0.646,1.906,3.485,10.27,5.92,17.428C287.041,285.416,281.591,285.417,277.472,285.424    L277.472,285.424z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M326.488,81.928v28.6h-57.28v87.47h-34.15v-87.54l-66.86,0.19c-8.06,0-9.14,6.42-9.14,8.88    c0,3.02,1.97,6.04,12.79,19.74c7.02,8.9,13.47,17.78,14.32,19.72c4.64,10.68-1.36,27.32-12.29,34.08    c-7.79,4.813-6.459,4.931-64.308,4.931c-2.974,0-6.096,0-9.392,0h-62.27v-32.13h97.9l2.89-2.01c1.95-1.36,3.08-3.23,3.51-5.79    c0.6-3.68,0.29-4.16-11.8-17.78c-14.29-16.1-15.8-19.04-15.06-29.32c0.84-11.73,11.3-28.77,29.58-28.77L326.488,81.928     M334.488,73.916l-8.013,0.012l-181.56,0.27c-10.458,0-20.171,4.518-27.342,12.722c-5.814,6.652-9.63,15.429-10.206,23.477    c-0.973,13.511,2.137,18.393,17.056,35.202c4.33,4.877,8.447,9.516,9.821,11.486c-0.022,0.079-0.042,0.13-0.054,0.159    c-0.015,0.012-0.038,0.03-0.07,0.052l-0.822,0.572H37.908h-8v8v32.13v8h8h62.27h4.937h4.455c28.522,0,42.6-0.027,50.894-0.635    c9.49-0.695,12.518-2.323,17.054-5.14l0.566-0.351c14.262-8.821,21.612-29.827,15.422-44.074    c-1.91-4.358-14.003-19.746-15.376-21.486c-3.796-4.807-10.062-12.74-11.054-15.036c0.024-0.193,0.071-0.393,0.121-0.532    c0.165-0.042,0.481-0.098,1.001-0.098l58.86-0.167v79.517v8h8h34.15h8v-8v-79.47h49.28h8v-8v-28.6V73.916L334.488,73.916z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M419.548,82.857l40.18,116.22l-32.77-0.18l-5.32-17.41l-58.439-0.26l-5.221,16.77h-33.369l39.739-115.14    H419.548 M372.737,156.478l39.801-0.05c0.001,0,0.001,0.001,0.001,0.001c0.136,0-19.342-57.201-19.472-57.241l0,0    C392.925,99.183,372.288,156.478,372.737,156.478 M425.247,74.857h-5.699h-55.2h-5.701l-1.86,5.39l-39.74,115.141l-3.662,10.61    h11.225h33.37h5.889l1.75-5.623l3.461-11.121l46.632,0.207l3.599,11.774l1.721,5.629l5.887,0.033l32.77,0.18l11.297,0.062    l-3.691-10.676l-40.18-116.22L425.247,74.857L425.247,74.857z M383.851,148.464c2.468-7.027,5.904-16.657,9.014-25.312    c2.948,8.644,6.209,18.245,8.588,25.29L383.851,148.464L383.851,148.464z"/>
				</g>
				<g>
					<path fill="#FFE81F" d="M532.396,82.857c25.921,0,43.91,0.37,47.37,0.97c8,1.39,15.23,5.66,20.65,12.22    c5.67,6.86,6.97,10.14,7.71,19.54c1.061,13.27-5.25,24.72-17.7,32.15c-3.63,2.17-7.359,4.28-8.29,4.7    c-1.43,0.65-1.239,1.27,1.32,4.27c1.649,1.93,4.51,4.68,6.35,6.11l3.36,2.61l62.08,0.89l0.609,31.68h-38.061    c-29.439,0-38.86-0.27-41.62-1.2c-4.13-1.4-14.069-9.82-34.271-29.04l-14.42-13.72l0.152,43.96h-37.043V82.857H532.396     M526.938,134.627h19.671c19.141,0,19.739-0.06,22.47-2.11c4.881-3.66,6.609-7.43,6.091-13.22c-0.53-5.97-2.83-9.08-8.601-11.58    c-3.25-1.42-6.381-1.65-21.721-1.65h-17.91V134.627 M532.396,74.857h-41.8h-8v8v115.14v8h8h37.043h8.028l-0.028-8.028    l-0.088-25.216l0.84,0.799c24.986,23.773,32.356,29.173,37.218,30.821c3.733,1.259,9.982,1.624,44.188,1.624h38.061h8.154    l-0.156-8.154l-0.609-31.68l-0.148-7.734l-7.734-0.111l-59.402-0.851l-1.245-0.967c-0.396-0.309-0.876-0.717-1.389-1.179    c0.446-0.264,0.854-0.507,1.207-0.717c15.003-8.953,22.866-23.407,21.569-39.653c-0.863-10.959-2.82-15.896-9.52-24    c-6.584-7.969-15.621-13.298-25.447-15.005C575.678,74.999,548.257,74.857,532.396,74.857L532.396,74.857z M534.938,114.067h9.91    c14.027,0,16.806,0.233,18.518,0.981c3.25,1.408,3.58,2.091,3.835,4.957c0.256,2.848-0.097,3.994-2.922,6.112    c-0.093,0.069-0.164,0.123-0.223,0.166c-1.865,0.345-8.786,0.345-17.447,0.345h-11.67L534.938,114.067L534.938,114.067z"/>
				</g>
			</g>
		</svg>
		<div id="welcome-text">
			<div id="scroll-text">
				<p class="center">Episode HTML5</p>
				<h1 class="center">ATTACK OF THE DOM</h1>
				<p>Not long ago, we guys at <a href="https://scotch.io">scotch.io</a> made some Pure CSS3 lightsabers for fun. They were pretty cool, but we wanted to take it a little further... for more fun.</p>
				<p>You can now grab the lightsaber and fight your webpages. Enjoy this demo, and make sure you click the link at the top to battle your webpage!</p>
				<p>We also added a Mickey Mouse lightsaber and a Darth Maul one. Mickey's is the weakest lightsaber, Yoda's is the strongest, and everyone else is in between. Enjoy!</p>
					<section id="social-stuff-inline" class="box-sizing clearfix">
					<iframe src="http://ghbtns.com/github-btn.html?user=scotch-io&repo=stencil&type=watch"
					  allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe>
					<a href="https://twitter.com/share" class="twitter-share-button" data-via="scotch_io">Tweet</a>
					<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
							<iframe src="https://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fscotch.io&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;font&amp;colorscheme=dark&amp;action=like&amp;height=80&amp;appId=1383840388498157" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
						</section>
				<h2 class="center">Begin!</h2>
			</div>
		</div>
	</section>

	<h1 id="character-name"></h1>
	<a href="#" id="begin-wars" class="box-sizing">Click to Fight!</a>

	<section id="lightsabers-box">
		<!-- OBI WAN KENOBI -->
		<div class="lightsaber" id="obi" title="Obi Wan Kenobi">
			<label for="obi-wan-example"></label>
			<input type="checkbox" id="obi-wan-example">
			<div class="switch"></div>
			<div class="plasma obi-wan"></div>
		</div>

		<!-- DARTH VADER -->
		<div class="lightsaber" id="vader" title="Darth Vader">
			<label for="vader-example"></label>
			<input type="checkbox" id="vader-example">
			<div class="switch"></div>
			<div class="plasma vader"></div>
		</div>

		<!-- MACE WINDU -->
		<div class="lightsaber" id="windu" title="Mace Windu">
			<label for="windu-example"></label>
			<input type="checkbox" id="windu-example">
			<div class="switch"></div>
			<div class="plasma windu"></div>
		</div>

		<!-- MICKEY MOUSE -->
		<div class="lightsaber" id="mickey" title="Mickey Mouse">
			<label for="mickey-example"></label>
			<input type="checkbox" id="mickey-example">
			<div class="switch"></div>
			<div class="plasma mickey mickey5"></div>
			<div class="plasma mickey mickey4"></div>
			<div class="plasma mickey mickey3"></div>
			<div class="plasma mickey mickey2"></div>
			<div class="plasma mickey mickey1"></div>
		</div>

		<!-- YODA -->
		<div class="lightsaber" id="yoda" title="Yoda">
			<label for="yoda-example"></label>
			<input type="checkbox" id="yoda-example">
			<div class="switch"></div>
			<div class="plasma yoda"></div>

        <img src="https://scotch.io/images/yoda.png">
		</div>

		<!-- DARTH MAUL -->
		<div id="maul-container">
			<div class="lightsaber" id="maul" title="Darth Maul">
				<label for="maul-example"></label>
				<input type="checkbox" id="maul-example">
				<div class="switch"></div>
				<div class="plasma vader"></div>
				<div class="plasma vader maul"></div>
			</div>
		</div>
	</section>

	<section id="the-enemies">
		<div id="checkboxes" class="input-cluster clearfix"></div>
		<div id="radio-buttons" class="input-cluster clearfix"></div>
	</section>
	<section id="form-guys">
		<h1>Heading 1</h1>
		<label>Label 1</label>
		<input type="text" class="enemy">
		<label>Label 2</label>
		<input type="text" class="enemy">
		<input type="submit" class="enemy">
	</section>

</body>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@font-face {
	font-family: 'FranklinGothicBookRegular';
	src: url('https://scotch.io/files/fonts/frabk-webfont.eot');
	src: url('https://scotch.io/files/fonts/frabk-webfont.eot?#iefix') format('eot'),
	url('https://scotch.io/files/fonts/frabk-webfont.woff') format('woff'),
	url('https://scotch.io/files/fonts/frabk-webfont.ttf') format('truetype'),
	url('https://scotch.io/files/fonts/frabk-webfont.svg#webfontbRCxujAM') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ---------- Begin Reset ---------- */
html, body 	{ margin: 0; padding: 0; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

a 			{ text-decoration: none; }

body, div {
	-webkit-transform : translateZ(0);
	-o-transform : translateZ(0);
	-moz-transform : translateZ(0);
	-ms-transform : translateZ(0);
	transform : translateZ(0);
}

input[type=checkbox], input[type=radio] {
	-webkit-transform : translateZ(0) !important;
	-o-transform : translateZ(0) !important;
	-moz-transform : translateZ(0) !important;
	-ms-transform : translateZ(0) !important;
	transform : translateZ(0) !important;
}
/* ---------- End Reset ---------- */


/* ---------- Begin Base ---------- */
body { font-family: 'Open Sans', sans-serif; color: #FFF; }
a { color: #00B4FF; }
section { position: relative; }

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.box-sizing {
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.fade-color {
	-webkit-transition: color 100ms;
	-moz-transition: color: 100ms;
	-o-transition: color: 100ms;
	-ms-transition: color: 100ms;
	transition: color: 100ms; ;
}

h2 { font-size: 1.4em; }

.center { text-align: center !important; }
.caps { text-transform: uppercase !important; }
/* ---------- End Base ---------- */

/* ---------- Begin Nav ---------- */
#navbar { display: block; z-index: 99999; position: relative; background: #444; padding: 10px; width: 100%; min-width: 100%; font-size: 13px; border-bottom: 1px solid #00B4FF; }
#navbar a {
	color: #FFF; margin: 0 10px;
}
#navbar i 								{ color: #00B4FF; margin-right:5px; }
#navbar a:hover > i 					{ color: #FDE273; }
	#navbar #url-scotch:hover 			{ color: #F9D3C8; }
	#navbar #url-cssdeck:hover 			{ color: #B25452; }
	#navbar #url-codepen:hover 			{ color: #B25452; }
	#navbar #url-github:hover 			{ color: #B25452; }

#social-stuff {
	top: 50px;
	left: 15px;
	position: absolute;
	z-index: 99999;
}

#social-stuff-inline 					{ margin:0 auto; text-align:center; width:65%; }
#social-stuff-inline iframe 			{ display:block; float:left; text-align:center; }

#fight-your-page {
 
}

#fight-your-page a {
	background: #00B4FF;
	border: 1px solid #000;
	color: #FFF;
	font-size: 20px;
	right: 20px;
	padding: 10px 30px;
	position:absolute;
	top:20px;
	width: 20%;
	text-align:center;
	z-index:9999;
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
}

.meh {
  top: 100px !important;
}

#fight-your-page a:hover {
  background: orange;
}

/* ---------- End Nav ---------- */


/* ---------- Begin Galaxy ---------- */
#galaxy { background: #090909; overflow: hidden;}

.star {
	position: absolute;
	border-radius: 360px;
	z-index: -1;
	-webkit-animation-name: glow;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: glow;
	-moz-animation-iteration-count: infinite;
	-o-animation-name: glow;
	-o-animation-iteration-count: infinite;
	-ms-animation-name: glow;
	-ms-animation-iteration-count: infinite;
	animation-name: glow;
	animation-iteration-count: infinite;
}

.glow-slow {
	-webkit-animation-duration: 7s;
	-moz-animation-duration: 7s;
	-o-animation-duration: 7s;
	-ms-animation-duration: 7s;
	animation-duration: 7s;
}
.glow-medium {
	-webkit-animation-duration: 5s;
	-moz-animation-duration: 5s;
	-o-animation-duration: 5s;
	-ms-animation-duration: 5s;
	animation-duration: 5s;
}
.glow-fast {
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	-ms-animation-duration: 2s;
	animation-duration: 2s;
}


.distance-close {
	-moz-filter: blur(0.8px);
	-webkit-filter: blur(0.8px);
	-o-filter: blur(0.8px);
	-ms-filter: blur(0.8px);
	filter: blur(0.8px);
}
.distance-medium {
	-moz-filter: blur(1.5px);
	-webkit-filter: blur(1.5px);
	-o-filter: blur(1.5px);
	-ms-filter: blur(1.5px);
	filter: blur(1.5px);
}
.distance-far {
	-moz-filter: blur(4.5px);
	-webkit-filter: blur(4.5px);
	-o-filter: blur(4.5px);
	-ms-filter: blur(4.5px);
	filter: blur(4.5px);
}
/* ---------- End Galaxy ---------- */


/* ---------- Begin Intro ---------- */
#intro 						{ font-family: FranklinGothicBookRegular;}
#long-long-time-ago h1 		{
	width: 830px;
	display: none;
	margin: 0 auto;
	color: #56bfe3;
	font-size: 69px;
	margin-top: 300px;
}
#logo {
	display: none;
	width: 100%;
	margin: 0 auto;
	-webkit-animation: shrink 9s;
}
#welcome-text {
	position: absolute;
	display: none;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	text-align: justify;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;	-moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%;
	-webkit-transform: perspective(500px) rotateX(25deg); -moz-transform: perspective(500px) rotateX(25deg); -ms-transform: perspective(500px) rotateX(25deg); -o-transform: perspective(500px) rotateX(25deg); transform: perspective(500px) rotateX(25deg);
}

#scroll-text {
	font-family: FranklinGothicBookRegular;
	position: absolute;
	top: 100%;
	color: #ff6;
	animation-delay: 5s;
	-webkit-animation: scroll 75s linear 4s infinite;
	-moz-animation: scroll 75s linear 4s infinite;
	-ms-animation: scroll 75s linear 4s infinite;
	-o-animation: scroll 75s linear 4s infinite;
	animation: scroll 75s linear 4s infinite;
}
#scroll-text p {
	text-align: justify;
	margin: 0.8em 0;
}
/* ---------- End Intro ---------- */


/* ---------- Begin Lightsaber-Box ---------- */
.lightsaber {
	width: 15px;
	height: 310px;
	display: none;
	float: left;
	margin-left: 30px;
	z-index:9999;
}

.lightsaber img 			{ left:-150px; opacity:0; position:absolute; pointer-events:none; top:0; }

/* yoda */
#yoda 												{ height: 200px; margin-top: 110px; }
#yoda input[type=checkbox]:checked ~ div.plasma 	{ height: 150px; z-index:9999; }
#yoda input[type=checkbox]:checked ~ img 			{ opacity:0.2; }

/* maul */
#maul-container {
	height: 550px;
	width: 15px;
	float: left;
	display: none;
	margin-left: 30px;
}
#maul-container .lightsaber 						{ display: block; margin-left: 0; }
#maul-container .lightsaber 						{ float: none; }
.maul 												{ top: 300px; }

/* mickey */
#mickey 						{  }
#mickey label 					{ background: white; border-color: pink; }

.mickey 						{ filter: blur(0px) !important; -moz-filter: blur(0px) !important; -webkit-filter: blur(0px) !important; -o-filter: blur(0px) !important; -ms-filter: blur(0px) !important; }

.lightsaber input[type=checkbox]:checked ~ div.mickey5 {
	height: 250px;
	background: red;
	width: 6px;
	margin-left: 2px;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey4 {
	height: 200px;
	z-index: 20;
	background: orange;
	width: 8px;
	margin-left: 1px;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey3 {
	height: 150px;
	z-index: 30;
	background: yellow;
	width: 8px;
	margin-left: 1px;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey2 {
	height: 100px;
	z-index: 40;
	background: green;
}
.lightsaber input[type=checkbox]:checked ~ div.mickey1 {
	height: 50px;
	z-index: 50;
	background: blue;
	width: 12px;
	margin-left: -1px;
}

#lightsabers-box {
	height: 350px;
	top: 0;
	width: 300px;
	margin: 0 auto 0;
}
#character-name {
	font-size: 50px;
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 0;
	text-transform: uppercase;
}

#begin-wars {
	background:#444;
	border:1px solid #000;
	bottom: 20px;
	color:#FFF;
	display:none;
	font-size:35px;
	right: 20px;
	padding:10px 30px;
	position:absolute;
	text-align:center;
	width:30%;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  
}

#begin-wars:hover 		{ background: #00B4FF; }


/* ---------- End Lightsaber-Box ---------- */




/* ---------- Begin Enemies ---------- */

.enemy { display: block; position: absolute; top: 0; left: 0;}

h1.enemy { width: 200px; height: 43px; }
h2.enemy { width: 145px; height: 35px; }
h3.enemy { width: 110px; height: 30px; }
h3.enemy { width: 90px; height: 25px; }
input[type=radio].enemy { width: 15px; height: 15px; }
input[type=checkbox].enemy { width: 15px; height: 15px; }
input[type=text].enemy { height: 25px; width: 200px; background: white; border: grey 2px solid; }
ul.enemy, ol.enemy { width: 190px; height: 70px; }

#the-enemies {
	position: absolute;
	top: 0;
	left: 100px;
	display: none;
}

#input-cluster {
	width: 150px;
}

#input-cluster .input {
	float: left;
}

#form-guys {
	position: absolute;
	right: 200px;
	bottom: 300px;
	display: none;
}

#form-guys input {
	position: relative !important;
}

/* ---------- End Enemies ---------- */







/* ---------- Begin Keyframes  ---------- */
@-webkit-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@-o-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@-moz-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@-ms-keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}
@keyframes glow {
	from { -webkit-box-shadow: 0 0 5px #333; }
	50% { -webkit-box-shadow: 0 0 8px #fff; }
	to { -webkit-box-shadow: 0 0 5px #333; }
}

@-webkit-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@-o-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@-moz-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@-ms-keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}
@keyframes shrink
{
	0% { width: 70%; }
	100% { width: 0%; }
}

@-webkit-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@-moz-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@-o-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@-ms-keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
/* ---------- End Keyframes  ---------- */
              
            
!

JS

              
                // Initializers
var introFinished;

$(document).ready(function() {
	var bigHeight = $(window).height();
	$('body').height(bigHeight);

  // If you want to see the Intro, uncomment these and then
	/*startIntro();
	playIntroMusic();
	createStars(50);*/
	
  // Comment this line out out
  showLightsabers();
  
  // Or just go checkout the full demo link

	$('#begin-wars').click(function() {
		$('#huuuge-dom').remove();
		startBattle();
		createEnemies(5000);
		return false;
	});
});

// Create Space
function createStars(starCount) {

	var huuugeDom     = $('#huuuge-dom');

	// arrays to create random stars
	var starColors    = new Array('#eaeaea', '#ddf7dd', '#c7cbe8', '#e8c7c7', '#fff', '#fff', '#fff', '#fcfcfc');
	var starDistances = new Array('distance-close', 'distance-medium', 'distance-far');
	var glowSpeeds    = new Array('glow-slow', 'glow-medium', 'glow-fast');

	for (var i = 0; i < starCount; i++)	{
		var starId = 'star' + i;

		// randomly select star size, position, and other properties
		var size      = Math.floor((Math.random() * 10) + 1);
		var positionX = (Math.random() * ($(document).width() - size)).toFixed();
		var positionY = (Math.random() * ($(document).height() - size)).toFixed();
		var color     = starColors[Math.floor(Math.random() * starColors.length)];
		var distance  = starDistances[Math.floor(Math.random() * starDistances.length)];
		var glowSpeed = glowSpeeds[Math.floor(Math.random() * glowSpeeds.length)];
		var speed     = Math.floor(Math.floor(Math.random() * (700000) - 650000 + 1) + 650000);

		// append the star to the dom
		huuugeDom.append('<div id="' + starId + '"></div>');

		// add styles to the star
		$('#' + starId)
			.addClass('star move-stars ' + distance + ' ' + glowSpeed)
			.css({
				'width'		: size + 'px',
				'height' 	: size + 'px',
				'left' 		: positionX + 'px',
				'top' 		: positionY + 'px',
				'background': color
		});

		// move the star constantly
		moveStar(starId, ($(document).width()), speed);
	}
}

function moveStar(starId, distance, speed) {
	if (speed < 40000)
		speed = 40000;

	$('#' + starId).animate({
			left: distance + 20
		},
		speed,
		'linear',
		function() {
			$(this).css("left", "-10px");
			moveStar(starId, $(document).width(), speed);
		}
	);
}

// Enter Logo
function startIntro() {
	var longTime    = $('#long-long-time-ago h1');
	var logo        = $('#logo');
	var welcomeText = $('#welcome-text');
	var beginButton = $('#welcome-text h2');

	longTime.fadeIn(2000);
	setTimeout(function() {longTime.fadeOut(2000);}, 5000);

	setTimeout(function() {
		longTime.remove();
		logo.css('display', 'block');
	}, 7500);

	setTimeout(function() {
		welcomeText.css('display', 'block');
	}, 7000);

	setTimeout(function() {
		logo.css('visibility', 'hidden');
	}, 16300);

	setTimeout(function() {
		longTime.remove();
		logo.remove();
		welcomeText.remove();
		if (introFinished != 1) {
			introFinished = 1;
			moveGalaxyDown();
		}
	}, 40000);

	beginButton.click(function() {
		longTime.fadeOut(1500);
		logo.fadeOut(1500);
		welcomeText.fadeOut(1500);
		setTimeout(function() {
			longTime.remove();
			logo.remove();
			welcomeText.remove();

			if (introFinished != 1) {
				introFinished = 1;
				moveGalaxyDown();
			}
		}, 1500);
	});
}

function moveGalaxyDown() {
	$('#huuuge-dom').animate({
			'top': -110
		},
		1500,
		'linear',
		function() {showLightsabers();}
	);
}


function showLightsabers() {
	// hide the characters
	$('.lightsaber img').hide();

	$('#obi').fadeIn(100,function() {
		playLightsaberNoise();
		$(this).find('input:first').prop('checked', true);

		$('#vader').fadeIn(100, function() {
			playLightsaberNoise();
			$(this).find('input:first').prop('checked', true);

			$('#windu').fadeIn(100, function() {
				playLightsaberNoise();
				$(this).find('input:first').prop('checked', true);

				$('#mickey').fadeIn(100, function() {
					playLightsaberNoise();
					$(this).find('input:first').prop('checked', true);

					$('#yoda').fadeIn(100, function() {
						playLightsaberNoise();
						$(this).find('input:first').prop('checked', true);

						$('#maul-container').fadeIn(100, function() {
							playLightsaberNoise();
							$(this).find('input:first').prop('checked', true);

							setTimeout(function() {
								$('.lightsaber').find('input:first').prop('checked', false);
								$('#begin-wars').fadeIn();

								$('.lightsaber img').show();
							}, 1000);
						});

					});
				});
			});
		});
	});

	saberHover();
}

// Handle Lightsaber Hover
function saberHover() {
	var sabersBox 	= $('#lightsabers-box');
	var sabers 		= $('#lightsabers-box .lightsaber');

	sabers.hover(function() {
		// change the name
		var name = $(this).attr('title');
		$('#character-name').stop().hide().html(name).fadeIn();
	},
	function() {
		// hide the name
		$('#character-name').stop().fadeOut();
	});
}


function startBattle() {

	$('#begin-wars').fadeOut();

	// hide the characters
	$('.lightsaber img').remove();

	$('#yoda').box2d({
		'y-velocity': 0.5,
		'density': 2000
	});
	$('#windu').box2d({
		'density': 400
	});
	$('#vader').box2d({
		'density': 1500
	});
	$('#obi').box2d({
		'density': 500
	});
	$('#maul-container').box2d({
		'density': 900
	});
	$('#mickey').box2d({
		'density': 10
	});

	setTimeout(function() {
		$('.lightsaber').find('input:first').prop('checked', true);
		$('#maul-container').find('input:first').prop('checked', true);
	}, 1500);


	for (var i = 0; i < 5; i++)
	{
		$('#checkboxes').append('<input type="checkbox" checked="checked" class="enemy">');
		$('#radio-buttons').append('<input type="radio" checked="checked" class="enemy">');
	}

	$('#the-enemies').fadeIn();
	$('#form-guys').fadeIn();

	$('#the-enemies input').box2d({
		density: 150,
		restitution: 0.9
	});

	$('#form-guys input').box2d({
		density: 500
	});

	$('#form-guys label, #form-guys h1').box2d({
		density: 500
	});
}

function createEnemies(interval) {
	var iteration = 0;

	window.setInterval(function () {
		var size = Math.floor((Math.random() * 10) + 1);
		var x    = (Math.random() * ($(document).width() - size)).toFixed();
		var y    = 0;

		$('body').append(getNewEnemy('enemy-' + iteration, x, y));

		$('#enemy-' + iteration).box2d({
			'density': Math.random() * (500 - 100) + 100
		});

		iteration = iteration + 1;
	}, interval);
}

function getNewEnemy(id, x, y) {
	var elements = [];
		elements.push('<input type="checkbox" style="left: '+x+'px; top: '+y+'px;" class="enemy" checked="checked" id="'+id+'">');
		elements.push('<input type="text" style="left: '+x+'px; top: '+y+'px;" class="enemy" value="Text input field" id="'+id+'">');
		elements.push('<input type="radio" checked="checked" style="left: '+x+'px; top: '+y+'px;" class="enemy" id="'+id+'">');
		elements.push('<h1 id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy">Heading 1</h1>');
		elements.push('<h2 id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy">Heading 2</h2>');
		elements.push('<ul id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy"><li>List Item</li><li>List Item</li></ul>');
		elements.push('<ol id="'+id+'" style="left: '+x+'px; top: '+y+'px;" class="enemy"><li>List Item</li><li>List Item</li></ol>');

		return elements[Math.floor(Math.random()*elements.length)];
}

function playIntroMusic() {
	setTimeout(function() {
		var audioElement = document.createElement('audio');
		audioElement.setAttribute('src', 'https://scotch.io/files/starwars.wav');
		audioElement.play();
	}, 7200);
}

// Lightsaber noise
$(function() {
	$('label').click(function() {
	    var input = $(this).parent().find('input');

	    if (!input.is(':checked')) {
	    	var audioElement = document.createElement('audio');
				audioElement.setAttribute('src', 'https://scotch.io/files/lightsaber.wav');
				audioElement.play();
	    }
	});
});

function playLightsaberNoise() {
	var audioElement = document.createElement('audio');
		audioElement.setAttribute('src', 'https://scotch.io/files/lightsaber.wav');
		audioElement.play();
}
              
            
!
999px

Console