Unit.js

Developer
Ariana Lynn
Size
4,899 Kb
Views
26,312
  1. Unit.js Previews
  2. Unit.js HTML Codes
  3. Unit.js CSS Codes
  4. Unit.js JS Codes

How do I make an unit.js?

Construct rooms and shops with 3d views using this simple library. I've seen this in so many games that create 'virtual worlds' so I decided to build it in pure html/css/js with no jquery, no pre-processors and especially no flash.. What is a unit.js? How do you make a unit.js? This script and codes were developed by Ariana Lynn on 05 September 2022, Monday.

Unit.js Previews
IQ Test

Unit.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Unit.js</title> <link rel="stylesheet" href="http://codepen.io/arianalynn/pen/xZMWXY.css"/>
<style>
body,html{background:rgb(10,10,10);overflow:hidden}
/* UI */
.fa{padding:10px 14px 12px;font-size:20px}
.fa-plus, .fa-info{padding:13px 14px 11px;float:right}
.popup{position:fixed;width:650px;height:56vh;background:rgb(230,230,230);top:-100vh;left:calc(50vw - 325px);box-shadow:0 0 10px grey;font-family:monospace;padding:20px;box-sizing:border-box;line-height:1.5em;font-size:16px;transition:all 1s;overflow-Y:scroll}
.popup.down{top:21vh}
small{color:green}
.dress{width:100px;outline:1px solid green;cursor:pointer;background-position:bottom;background-size:100px;height:100px;display:inline-block;margin:0 10px}
.dress:hover{outline:1px solid black}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="h"> <div class="holder"> <div class="furn fo" x="5" y="3" f="1" id="man"> <img id="person" src="https://googledrive.com/host/0B3qlCdMqr2pXcVVFV2FhenlCdDA"></img> <img id="dress" src="https://googledrive.com/host/0B3qlCdMqr2pXMFh1djhfYXVfZ00"></img> </div> <img class="furn fo" x="5" y="0" f="1" src="https://googledrive.com/host/0B3qlCdMqr2pXUmlXQlJibm9XT0k"></img> <img class="furn fo" x="0" y="6" f="1" src="https://googledrive.com/host/0B3qlCdMqr2pXYzQzNVR4Yjlsemc"></img> <img class="furn ft" x="1" y="0" f="1" src="https://googledrive.com/host/0B3qlCdMqr2pXRWZWbTJ1cjJOZE0"></img> <div class="tile" x="0" y="0" style="background:tomato"></div> <div class="tile" x="0" y="1" style="background:indianred"></div> <div class="tile" x="0" y="2" style="background:salmon"></div> <div class="wpaperl" p="5" style="background:teal"></div> <div class="wpaperl" p="6" style="background:darkcyan"></div> <div class="wpaperl" p="7" style="background:teal"></div> <div class="wpaperl" p="8" style="background:darkcyan"></div> <div class="wpaperl" p="9" style="background:teal"></div> <div class="wpaperr" p="0" style="background:seagreen;"></div> <div class="wpaperr" p="1" style="background:green;"></div> <div class="wpaperr" p="2" style="background:seagreen;"></div> <div class="window" x="35" y="40" w="140" h="120" src="https://googledrive.com/host/0B3qlCdMqr2pXdDRGTm1wb29tTms/"></div> <div class="window wr frame" x="32" y="35" w="87" h="87" src="https://archive.org/services/img/image"></div> <div class="window wr frame" x="135" y="30" w="70" h="48" src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png"></div> <div class="door dr" x="350"></div> <!-- BASE --> <div class='base'></div> <div class='ba'></div> <!-- left side --> <div class='bb'></div> <!-- right side --> <div class='wa'></div> <!-- wall one --> <div class='wb'></div> <!-- wall two --> </div>
</div>
<!-- UI (as in this has nothing to do with the house) -->
<button class="button button_border fa fa-search-plus" data-button="green" onclick="f('h',0).classList.add('zoomin')"></button>
<button class="button button_border fa fa-search-minus" data-button="green" onclick="f('h',0).classList.remove('zoomin')"></button>
<button class="button button_border fa fa-shopping-bag" data-button="blue" onclick="document.getElementsByClassName('popup')[1].classList.toggle('down')"></button>
<button class="button button_border fa fa-info" data-button="grey" onclick="document.getElementsByClassName('popup')[0].classList.toggle('down')"></button>
<div class="popup">This is a library which can be used to create 3d virtual rooms without jquery or flash by including the following:<br/><small>&lt;link rel="stylesheet" href="https://codepen.io/arianalynn/pen/RaapGE.css"/&gt;<br/>&lt;script src="https://codepen.io/arianalynn/pen/RaapGE.js"&gt;&lt;/script&gt</small><br/><br/>And adding the code below to your html: (to add items such as wallpaper and tiles, refer to the code in the codepen editor - all elements can be added in the .holder div)<br/><small>&lt;div class=&quot;h&quot;&gt;<br />&nbsp; &lt;div class=&quot;holder&quot;&gt;<br />&nbsp; &nbsp; &lt;!-- BASE --&gt;<br />&nbsp; &nbsp; &lt;div class=&#39;base&#39;&gt;&lt;/div&gt;<br />&nbsp; &nbsp; &lt;div class=&#39;ba&#39;&gt;&lt;/div&gt; &nbsp; &nbsp;&lt;!-- left side --&gt;<br />&nbsp; &nbsp; &lt;div class=&#39;bb&#39;&gt;&lt;/div&gt; &nbsp; &nbsp;&lt;!-- right side --&gt;<br />&nbsp; &nbsp; &lt;div class=&#39;wa&#39;&gt;&lt;/div&gt; &nbsp; &nbsp;&lt;!-- wall one --&gt;<br />&nbsp; &nbsp; &lt;div class=&#39;wb&#39;&gt;&lt;/div&gt; &nbsp; &nbsp;&lt;!-- wall two --&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;/div&gt; </small>
</div>
<div class="popup">CLOSET<br/><br/> <div style="background-image:url('https://googledrive.com/host/0B3qlCdMqr2pXMFh1djhfYXVfZ00')" src="https://googledrive.com/host/0B3qlCdMqr2pXMFh1djhfYXVfZ00" class="dress" onclick="d(this)"></div> <div style="background-image:url('https://googledrive.com/host/0B3qlCdMqr2pXWktCUExlTHBDMXc')" src="https://googledrive.com/host/0B3qlCdMqr2pXWktCUExlTHBDMXc" class="dress" onclick="d(this)"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

Unit.js - Script Codes CSS Codes

/* UNIT.CSS */
.holder{-webkit-transform-style:preserve-3d;-webkit-transform:rotateX(-20deg) rotateY(45deg) scale(1);top:calc(50vh + 150px);left:calc(50vw - 175px);position:absolute;pointer-events:auto;}
.h {transition:all 0.5s;-webkit-transform:scaleY(1) scaleZ(1) scaleX(1);width:100vw;height:100vh;pointer-events:none;position:absolute;top:0}
.h.zoomin{-webkit-transform:scaleY(1.35) scaleZ(1.35) scaleX(1.35)}
.holder div{position:absolute}
.base{width:500px;height:500px;background:linear-gradient(to top,rgba(169,186,192,1) 0%,rgba(89,106,114,1) 100%);-webkit-transform:rotateX(90deg) translateZ(250px);}
.ba{width:500px;height:20px;background:linear-gradient(to left,rgba(181,189,200,1) 0%,rgba(130,140,149,1) 36%,rgba(40,52,59,1) 100%);-webkit-transform:rotateY(-90deg) translateZ(250px)}
.bb{width:500px;height:20px;background:linear-gradient(to left,rgba(169,186,192,1) 0%,rgba(89,106,114,1) 100%);-webkit-transform:rotateY(180deg) translateZ(-250px)}
.wa{width:500px;height:200px;background:rgba(129,146,154,1);-webkit-transform:rotateY(-90deg) translateZ(-250px) translateY(-200px)}
.wb{width:500px;height:200px;background:rgba(119,136,144,1);-webkit-transform:rotateY(180deg) translateZ(250px) translateY(-200px)}
.tile{width:50px;height:50px;background:purple;top:-27.5px}
.tile2{background:none;cursor:pointer}
.tile2:hover{background:rgba(0,0,0,0.4)}
.wpaperl{width:50px;height:200px;background:purple;-webkit-transform:translateZ(-249px) translateY(-200px)}
.wpaperr{width:50px;height:200px;background:purple;right:-524px}
.window{background-size:cover;-webkit-transform:translateZ(-247.5px) translateY(-200px)}
.wr{-webkit-transform:translateZ(-200px) translateY(-200px) rotateY(90deg);left:448px!important}
.frame{box-sizing:border-box;border:3px solid rgba(0,0,0,0.4)}
.door{width:100px;height:140px;background:sienna;border-radius: 2px 2px 0 0;top: 60px;box-sizing: border-box;border: 5px solid rgba(70,10,10,0.6);border-bottom:0;cursor:pointer}
.door:hover{box-shadow:0 0 0 5px rgba(255,255,255,0.4)}
.dl{-webkit-transform:translateZ(-249px) translateY(-200px)}
.dr{left:448.5px}
.door:after{content:"";width:10px;height:10px;background:rgba(70,10,10,0.8);border-radius:50%;position:absolute;left:14px;top:72px}
.furn{position:absolute;bottom:0px;outline:1px solid transparent;pointer-events:none}
.fo {width:100px;height:200px}
.ft {width:150px;height:200px}
#man{transition:opacity 0.15s;opacity:1}
#man.blur{opacity:0}
#man img {width:100px;position:absolute}

Unit.js - Script Codes JS Codes

function f(a, b) { return document.getElementsByClassName(a)[b]
}
function move(a) { document.getElementById('man').classList.add('blur'); setTimeout(function() { document.getElementById('man').style.webkitTransform = "translateX(" + (400 - a.getAttribute('x') * 50) + "px) translateZ(" + (a.getAttribute('y') * 50 - 200) + "px) rotateY(-45deg) scaleX(1)"; document.getElementById('man').classList.remove('blur'); }, 300)
}
function tile2() { var y = 0; for (var i = 0; i < 10; i++) { document.getElementsByClassName('holder')[0].innerHTML += '<div class="tile tile2" x="' + i + '" y="' + y + '" onclick="move(this)"></div>'; if (i == 9 && y < 9) { i = -1; y += 1; } }
}
tile2();
function s() { for (var i = 0; i < document.getElementsByClassName("wpaperr").length; i++) { f("wpaperr", i).style.webkitTransform = "translateZ(" + (f("wpaperr", i).getAttribute('p') * 50 - 224) + "px) translateY(-200px) rotateY(90deg)"; } for (var i = 0; i < document.getElementsByClassName("wpaperl").length; i++) { f("wpaperl", i).style.right = f("wpaperl", i).getAttribute('p') * 50 - 500 + "px"; } for (var i = 0; i < document.getElementsByClassName("tile").length; i++) { f("tile", i).style.webkitTransform = "rotateX(90deg) translateX(" + (445 - f("tile", i).getAttribute('x') * 50) + "px) translateY(" + (f("tile", i).getAttribute('y') * 50 - 220) + "px)"; } for (var i = 0; i < document.getElementsByClassName("window").length; i++) { f("window", i).style.left = f("window", i).getAttribute('x') + "px"; f("window", i).style.top = f("window", i).getAttribute('y') + "px"; f("window", i).style.backgroundImage = "url('" + f("window", i).getAttribute('src') + "')"; f("window", i).style.width = f("window", i).getAttribute('w') + "px"; f("window", i).style.height = f("window", i).getAttribute('h') + "px"; } for (var i = 0; i < document.getElementsByClassName("wr").length; i++) { f("wr", i).style.webkitTransform = "translateZ(" + (f("wr", i).getAttribute('x') - 200) + "px) translateY(-200px) rotateY(90deg)"; } for (var i = 0; i < document.getElementsByClassName("dl").length; i++) { f("dl", i).style.left = f("dl", i).getAttribute('x') + "px"; } for (var i = 0; i < document.getElementsByClassName("dr").length; i++) { f("dr", i).style.webkitTransform = "translateZ(" + (f("dr", i).getAttribute('x') - 200) + "px) translateY(-200px) rotateY(90deg)"; } for (var i = 0; i < document.getElementsByClassName("fo").length; i++) { f("fo", i).style.webkitTransform = "translateX(" + (400 - f("fo", i).getAttribute('x') * 50) + "px) translateZ(" + (f("fo", i).getAttribute('y') * 50 - 200) + "px) rotateY(-45deg) scaleX(" + f("fo", i).getAttribute('f') + ")"; } for (var i = 0; i < document.getElementsByClassName("ft").length; i++) { f("ft", i).style.webkitTransform = "translateX(" + (340 - f("ft", i).getAttribute('x') * 50) + "px) translateZ(" + (f("ft", i).getAttribute('y') * 50 - 190) + "px) rotateY(-45deg) scaleX(" + f("ft", i).getAttribute('f') + ")"; }
}
s();
function d(a) { document.getElementById('dress').src = a.getAttribute('src'); document.getElementsByClassName('popup')[1].classList.toggle('down')
}
Unit.js - Script Codes
Unit.js - Script Codes
Home Page Home
Developer Ariana Lynn
Username arianalynn
Uploaded September 05, 2022
Rating 4
Size 4,899 Kb
Views 26,312
Do you need developer help for Unit.js?

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!

Ariana Lynn (arianalynn) Script Codes
Name
Menu Animated Dropdown and Icon
404 Error Message
Live Chat
Chat Widget
Gooey Share Buttons
Canvas Cloth with Strings
Dots and Shapes
Loading Loop
Fireworks Show
Bubbles in the Sky
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!