A Pen by zakariamouhid

Thumbnail
This awesome code was written by zakariamouhid, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright zakariamouhid ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  zakariamouhid</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  	<div id="project_section">
		<div id="scroll_container">
			<div id="light_line">
				<div id="scroll_tool"></div>
			</div>
			<div id="num_sign">
				<div id="right_signs">
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right main"><span>1</span></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right main"><span>2</span></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right main"><span>3</span></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right"></div>
					<div class="sign right main" style="margin: 0px;"><span>4</span></div>
				</div>
				<div id="left_signs">
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left main"><span>1</span></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left main"><span>2</span></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left main"><span>3</span></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left"></div>
					<div class="sign left main" style="margin: 0px;"><span>4</span></div>
				</div>
			</div>
		</div>
		<div id="top_line">
			<div id="top_line_left"></div>
			<label id="resistor_num">0 Ohms</label>
			<div id="resistor"></div>
			<div id="top_line_right"></div>
		</div>
		<div id="left_line">
			<div id="left_line_top"></div>
			<label id="battery_num">4 V</label>
			<div id="battery">
				<div id="battery_head"></div>
				<div id="battery_body">
					<div id="battery_body_content"></div>
				</div>
				
			</div>
			<div id="left_line_bottom"></div>
		</div>
		<div id="bottom_line">
			<div id="bottom_line_left"></div>
			<label id="switch_status">OFF</label>
			<div id="switch">
				<div id="switch_button"></div>
			</div>
			<div id="bottom_line_right"></div>
		</div>
		<div id="right_line">
			<div id="right_line_top"></div>
			<div id="lamp"></div>
			<div id="right_line_bottom"></div>
		</div>
	</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/zakariamouhid/a-pen-by-zakariamouhid-YNbYBJ */
*{
			margin: 0px;
		}
		#project_section{
			position: absolute;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			float: left;
			width: 400px;
			height: 300px;
		}
		#scroll_container{
			position: relative;
			transform: translate(-50%, -50%);
			top: 50%;
			left: 50%;
			float: left;
		}
		#light_line{
			width: 2px;
			background-color: silver;
			transform: translate(-50%, 0);
			left: 50%;
			float: left;
			position: absolute;
			height: 100%;
			z-index: 999;
		}
		#scroll_tool{
			width: 25px;
			height: 10px;
			background-image: -webkit-linear-gradient(#999, #ccc);
			background-image: -moz-linear-gradient(#999, #ccc);
			background-image: -o-linear-gradient(#999, #ccc);
			background-image: -ms-linear-gradient(#999, #ccc);
			position: absolute;
			transform: translate(50%, 0);
			right: 50%;
			border-radius: 2px;
			box-shadow:0px 2px 7px -1px #000;
			cursor: -webkit-grab;
			cursor: -moz-grab;
			cursor: -o-grab;
			cursor: -ms-grab;
			top: -10px;
		}
		#scroll_tool:hover{
			background-image: -webkit-linear-gradient(#ccc, #999);
			background-image: -moz-linear-gradient(#ccc, #999);
			background-image: -o-linear-gradient(#ccc, #999);
			background-image: -ms-linear-gradient(#ccc, #999);
		}
		#num_sign{
			width: 36px;
			position: relative;
			float: right;
		}
		#right_signs{
			width: 16px;
			position: relative;
			margin-right: -10px;
			float: right;
		}
		#left_signs{
			width: 16px;
			position: relative;
			margin-left: -10px;
			float: left;
		}
		.sign{
			width: 10px;
			height: 1px;
			background-color: #000;
			margin-bottom: 10px;
			left: 50%;
			position: relative;
			transform: translate(-50%, 0);
		}
		.main{
			width: 15px;
			height: 2px;
			position: relative;
		}
		#top_line{
			width: 100%;
			height: 0.06cm;
			position: relative;
		}
		#top_line_left{
			width: calc(50% - 27px);
			height: 100%;
			background-image: -webkit-linear-gradient(#999, #ccc);
			background-image: -moz-linear-gradient(#999, #ccc);
			background-image: -o-linear-gradient(#999, #ccc);
			background-image: -ms-linear-gradient(#999, #ccc);
			position: absolute;
			left: 0px;
		}
		#resistor{
			width: 50px;
			height: 10px;
			border: 2px solid #000;
			background-color: transparent;
			position: relative;
			top: 50%;
			right: 50%;
			transform: translate(50%, -50%);
			float: right;
		}
		#top_line_right{
			width: calc(50% - 27px);
			height: 100%;
			background-image: -webkit-linear-gradient(#999, #ccc);
			background-image: -moz-linear-gradient(#999, #ccc);
			background-image: -o-linear-gradient(#999, #ccc);
			background-image: -ms-linear-gradient(#999, #ccc);
			position: absolute;
			right: 0px;
		}
		#resistor_num{
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0px);
			top: -30px;
		}
		#left_line{
			width: 0.06cm;
			height: 100%;
			position: absolute;
			left: 0px;
		}
		#left_line_top{
			width: 100%;
			height: calc(50% - 40px);
			position: absolute;
			top: 0px;
			background-image: -webkit-linear-gradient(left, #999, #ccc);
			background-image: -moz-linear-gradient(left, #999, #ccc);
			background-image: -o-linear-gradient(left, #999, #ccc);
			background-image: -ms-linear-gradient(left, #999, #ccc);
		}
		#battery{
			width: 50px;
			height: 80px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#battery_head{
			position: relative;
			width: 20px;
			height: 10px;
			left: 50%;
			transform: translate(-50%, 0px);
			background-color: #000;
			float: left;
		}
		#battery_body{
			width: calc(100% - 4px);
			height: calc(100% - 14px);
			border: 2px solid #000;
			position: relative;
			top: 10px;
		}
		#battery_body_content{
			width: 90%;
			height: 90%;
			background-color: #000;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#battery_num{
			position: absolute;
			top: 50%;
			right: 40px;
			white-space: nowrap;
			transform: translate(0, -50%);
		}
		#left_line_bottom{
			width: 100%;
			height: calc(50% - 40px);
			position: absolute;
			bottom: 0px;
			background-image: -webkit-linear-gradient(left, #999, #ccc);
			background-image: -moz-linear-gradient(left, #999, #ccc);
			background-image: -o-linear-gradient(left, #999, #ccc);
			background-image: -ms-linear-gradient(left, #999, #ccc);
		}
		#switch{
			position: absolute;
			width: 100px;
			height: 50px;
			background-color: #aaa;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			cursor: pointer;
		}
		#switch_button{
			width: 40px;
			height: 40px;
			background-color: #fff;
			position: relative;
			top: 50%;
			transform: translate(0, -50%);
			left: 5px;
			transition: all 0.15s linear;
			-ms-transition: all 0.15s linear;
			-o-transition: all 0.15s linear;
			-moz-transition: all 0.15s linear;
			-webkit-transition: all 0.15s linear;
		}
		#bottom_line{
			width: 100%;
			height: 0.06cm;
			position: absolute;
			bottom: -0.06cm;
		}
		#switch_status{
			position: absolute;
			left: 50%;
			transform: translate(-50%, 0px);
			top: 50px;
		}
		#bottom_line_left{
			height: 100%;
			width: calc(50% - 50px);
			background-image: -webkit-linear-gradient(#999, #ccc);
			background-image: -moz-linear-gradient(#999, #ccc);
			background-image: -o-linear-gradient(#999, #ccc);
			background-image: -ms-linear-gradient(#999, #ccc);
			position: absolute;
			left: 0px;
		}
		#bottom_line_right{
			height: 100%;
			width: calc(50% - 50px);
			background-image: -webkit-linear-gradient(#999, #ccc);
			background-image: -moz-linear-gradient(#999, #ccc);
			background-image: -o-linear-gradient(#999, #ccc);
			background-image: -ms-linear-gradient(#999, #ccc);
			position: absolute;
			right: 0px;
		}
		#right_line{
			position: relative;
			width: 0.06cm;
			height: 100%;
			position: absolute;
			right: 0px;
		}
		#right_line_top{
			position: absolute;
			height: calc(50% - 40px);
			width: 100%;
			background-image: -webkit-linear-gradient(left, #999, #ccc);
			background-image: -moz-linear-gradient(left, #999, #ccc);
			background-image: -o-linear-gradient(left, #999, #ccc);
			background-image: -ms-linear-gradient(left, #999, #ccc);
			top: 0px;
		}
		#lamp{
			width: 20px;
			height: 70px;
			position: absolute;
			background-color: #dadada;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		#lamp:before{
			content: "";
			position: absolute;
			top: -5px;
			width: 20px;
			height: 5px;
			border-radius: 28%;
			background-color: #aaa;
		}
		#lamp:after{
			content: "";
			position: absolute;
			bottom: -5px;
			width: 20px;
			height: 5px;
			border-radius: 28%;
			background-color: #aaa;
		}
		#right_line_bottom{
			position: absolute;
			height: calc(50% - 40px);
			width: 100%;
			background-image: -webkit-linear-gradient(left, #999, #ccc);
			background-image: -moz-linear-gradient(left, #999, #ccc);
			background-image: -o-linear-gradient(left, #999, #ccc);
			background-image: -ms-linear-gradient(left, #999, #ccc);
			bottom: 0px;
		}
		#right_signs .main span{
			position: relative;
			right: -20px;
			top: -10px;
		}
		#left_signs .main span{
			position: relative;
			left: -20px;
			top: -10px;
		}

/*Downloaded from https://www.codeseek.co/zakariamouhid/a-pen-by-zakariamouhid-YNbYBJ */
var switchElement = document.getElementById("switch"),
		switchTool = document.getElementById("switch_button"),
		switchLabel = document.getElementById("switch_status"),
		switched = false,
		scrollTool = document.getElementById("scroll_tool"),
		scrollBar = document.getElementById("scroll_container"),
		isClicked = false,
    firstY = 0,
    buttonTop = 0,
		clientPositionY;
		switchElement.onclick = function(){
			if(switched == false){
				switchTool.style.left = "calc(100% - 45px)";
				switchElement.style.backgroundColor = "#000";
				switchLabel.innerText = "ON";
				switched = true;
			}
			else{
				switchTool.style.left = "5px";
				switchElement.style.backgroundColor = "#aaa";
				switchLabel.innerText = "OFF";
				switched = false;
			}
		}
		scrollTool.onmousedown = function(e){
				isClicked = true;
        firstY = e.pageY;
        e.preventDefault();
		}
		window.onmouseup = function(){
			isClicked = false;
      buttonTop = +scrollTool.style.top.slice(0, -2);
		}
		window.onmousemove = function(e){
			if(isClicked == true){
        e.preventDefault();
				scrollTool.style.top = buttonTop + e.pageY - firstY + "px";
			}
		}

Comments