<html lang="english">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Destiny Menu</title>
<meta name="description" content="Online resources and tutorials for amateur web developers">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="settings">
<input class="parallax" id="lax" type="checkbox" checked />
<label for="lax">Toggle parallax effect</label>
</div>
<p class="thanks">
CSS Recreation of the "Destiny" Item Menu<br>
Pen by Sebastian Inman
</p>
<main>
<div class="content plx">
<div class="manager">
<div class="items left">
<div class="info level">
<div class="stat">
<h3>Level</h3>
<h1>40</h1>
</div>
</div>
<div class="items-row" id="super">
<div class="item maxed equipped" data-type="super" data-title="Defender" data-category="Titan Subclass" data-description="The wall against which the Darkness breaks.">
<img src="https://www.bungie.net/common/destiny_content/icons/70c0ac0b590646bd50ba4a6f5c6f5631.jpg">
</div>
<div class="item-select small">
<label>Subclass</label>
<div class="item maxed">
<img src="https://www.bungie.net/common/destiny_content/icons/70c0ac0b590646bd50ba4a6f5c6f5631.jpg">
</div>
</div>
</div>
<div class="items-row" id="primary">
<div class="item equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/08a1d508524118c07c97bdb185241a8b.png">
</div>
<div class="item-select">
<label>Primary Weapons</label>
<div class="item maxed">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/fcda56480990decdc1b401826cac55e3.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/51af389e548fb49e12d4a012456074e6.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/9e709c5f62cded2e721eb2bb2ca972ed.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/781b003ced00037c0c238f0a33dc30e0.png">
</div>
</div>
</div>
<div class="items-row" id="secondary">
<div class="item equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/e7fd8787b399ebe230f4211c2a03c397.png">
</div>
<div class="item-select">
<label>Special Weapons</label>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/e08200e05cde923c15d31c785d3bf62c.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/ae2c0ae7fb58fed10552c1b29fdbd392.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/c1bc7a09b4042a26e0bbfe36fab78842.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/44306eeda0a62c62bc91462d9787d261.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/6d4cba80f55c23f675a0a3343d2e73cb.png">
</div>
</div>
</div>
<div class="items-row" id="heavy">
<div class="item equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/8df2a0fe0c782cc48951c0939f390cfc.png">
</div>
<div class="item-select">
<label>Heavy Weapons</label>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/74f1d0df8d5aba2f95140c13650970af.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/e4babb644dc0d8d5b237df6f5bdde051.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/241f4ca98645b111fd39902ef7338009.png">
</div>
</div>
</div>
<div class="items-row" id="more">
<div class="item more">
</div>
</div>
</div>
<div class="items right">
<div class="info stats">
<div class="stat">
<h3>Light</h3>
<h2 class="light">249</h2>
</div>
<div class="sep"></div>
<div class="stat">
<h3>Defense</h3>
<h2>1718</h2>
</div>
<div class="sep"></div>
<div class="stat">
<img class="icon" src="http://104.236.129.44/destiny-menu/assets/images/intellect.png">
<h4>195</h4>
</div>
<div class="sep"></div>
<div class="stat">
<img class="icon" src="http://104.236.129.44/destiny-menu/assets/images/discipline.png">
<h4>207</h4>
</div>
<div class="sep"></div>
<div class="stat">
<img class="icon" src="http://104.236.129.44/destiny-menu/assets/images/strength.png">
<h4>118</h4>
</div>
</div>
<div class="items-row" id="head">
<div class="item maxed equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/d599cf6261b9d0da45f6659d1d7e5305.png">
</div>
<div class="item-select">
<label>Helmet</label>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/418802000db78ef63ebb1807fa122bdd.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/0052c612808a85b3022008d628be0e31.png">
</div>
</div>
</div>
<div class="items-row" id="arms">
<div class="item equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/794720c9b2d95fc03639500d3fc28518.png">
</div>
<div class="item-select">
<label>Gauntlets</label>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/17cec4e81a0950293884a63efe9a11ba.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/e3d3bfd78dec43960f52f6d6bcde5cf8.png">
</div>
</div>
</div>
<div class="items-row" id="chest">
<div class="item equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/f3183ef877750636f0e45d9e310e8e4e.png">
</div>
<div class="item-select">
<label>Chest Armor</label>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/04a247ca25cb937a461f868aa137e212.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/c733edebd8fa38d21e1da9e2881cd1c9.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/af2b3c9cf05ed286fd2e03f9cec97d46.png">
</div>
</div>
</div>
<div class="items-row" id="legs">
<div class="item equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/5f45583a420fe0a97fe72257c57e3e67.png">
</div>
<div class="item-select">
<label>Leg Armor</label>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/4d44d6d0331f782910ac653881fd5805.png">
</div>
</div>
</div>
<div class="items-row" id="vanity">
<div class="item equipped">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/a471e0f329b1f34383c84883fda441e9.png">
</div>
<div class="item-select">
<label>Class Armor</label>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/cf7bdf178ff8ebf8fe0313dd85727edf.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/96ec1aff060b2e65242ad1bb257b5816.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/0a2b7a5be69b1443146fc33c75f5ce86.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/c2d3df44788cc220cc728202b5320e96.png">
</div>
<div class="item">
<img src="https://titles.trackercdn.com/destiny/common/destiny2_content/icons/e8a871beb2b596f8e36321659c3931ad.png">
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class='cursor'>
<div class='spinner'></div>
</div>
<div class="character"></div>
<div class="lines"></div>
</body>
</html>
* {
cursor: none;
}
body {
background: #CCC url(https://www.bungie.net/img/theme/destiny/bgs/gradient_green.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Roboto", sans-serif;
height: 100%;
margin: 0px;
overflow: hidden;
padding: 0px;
position: absolute;
width: 100%;
.cursor {
background: transparent;
border: 1px solid rgba(255,255,255,0.5);
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.15);
border-radius: 50%;
height: 102px;
left: 0px;
margin: -51px 0px 0px -51px;
overflow: hidden;
position: absolute;
pointer-events: none;
top: 0px;
width: 102px;
z-index: 20;
&:before {
content: "";
background: rgba(29,70,115,0.25);
border-radius: 50%;
box-shadow: 0px 0px 30px 1px #FFF,
inset 0px 0px 0px 1px #FFF;
position: absolute;
left: 50%;
margin: -35px 0px 0px -35px;
height: 70px;
top: 50%;
width: 70px;
}
.spinner {
-webkit-animation:spinner 1.5s linear infinite;
animation:spinner 1.5s linear infinite;
background: url(http://104.236.129.44/destiny-menu/assets/images/spinner.png) center center no-repeat;
height:54px;
width: 54px;
border-radius: 50%;
opacity: 0;
left: 24px;
position: absolute;
top: 24px;
}
@-webkit-keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(90deg); }
}
&.focus {
.spinner {
opacity: 0.65;
}
}
}
.character {
background: url(http://104.236.129.44/destiny-menu/assets/images/character.png) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 856px;
left: calc(50% - 153px);
margin: 350px 0px 0px 60px;
position: absolute;
top: calc(50% - 428px);
width: 306px;
z-index: 1;
&:before {
background: url(http://104.236.129.44/destiny-menu/assets/images/fake_shadow.png) center center no-repeat;
bottom: -25px;
content: "";
height: 78px;
position: absolute;
left: calc(50% - 315px);
width: 630px;
}
}
.lines {
background: url(http://104.236.129.44/destiny-menu/assets/images/lines.svg) center center no-repeat;
height: 100%;
left: 0px;
opacity: 0.5;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.item-info {
background: rgba(17,12,21,0.95);
height: 460px;
position: absolute;
transition: 0.2666666s;
width: 350px;
z-index: 10;
&#left {
margin: -100px 0px 0px -380px;
}
&#right {
margin: -100px 0px 0px -380px;
}
}
.content {
height: 80vh;
position: absolute;
left: 25vw;
top: 10vh;
width: 50vw;
z-index: 2;
.manager {
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
.items {
height: 100%;
position: absolute;
top: 0px;
width: 108px;
.sep {
clear: both;
display: block;
float: left;
height: 15px;
width: 100%;
}
.info {
position: absolute;
height: 100%;
top: 0px;
width: auto;
.stat {
opacity: 0.35;
transition: 0.2666666s;
&:hover {
opacity: 0.5;
}
}
h1, h2, h3, h4, h5, h6 {
line-height: 1;
margin: 0px;
padding: 0px;
}
h1 {
color: #FFF;
font-size: 124px;
font-weight: 600;
letter-spacing: 1px;
margin-top: 1px;
}
h2 {
color: #FFF;
font-size: 78px;
font-weight: 500;
margin-top: 1px;
&.light {
color: #FFD941;
&:before {
content: "";
}
}
}
h3 {
color: #FFF;
font-size: 30px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
}
h4 {
color: #FFF;
font-size: 26px;
font-weight: 400;
letter-spacing: 1px;
}
}
&.right {
right: 0px;
.stats {
right: 130px;
text-align: right;
}
.item {
float: right;
}
.item-select {
padding-left: 30px;
right: -253px;
label {
left: 30px;
text-align: left;
}
.item {
float : left;
margin: 0px 8px 8px 0px;
}
}
.items-row:hover {
.item-select {
transform: scale(1) translateX(112px) translateY(123px);
}
}
}
&.left {
left: 0px;
.info {
left: 172px;
text-align: left;
}
.item {
float: left;
}
.item-select {
left: -253px;
padding-right: 30px;
label {
right: 30px;
text-align: right;
}
.item {
float : right;
margin: 0px 0px 8px 8px;
}
}
.items-row:hover {
.item-select {
transform: scale(1) translateX(-112px) translateY(123px);
&.small {
transform: scale(1) translateX(-112px) translateY(40px);
}
}
}
}
.items-row {
clear: both;
display: block;
float: left;
height: auto;
margin: 0px 0px 30px 0px;
padding: 0px;
position: relative;
width: 100%;
&:last-child {
margin: 0px;
}
.item {
border: 4px solid #FFF;
height: 88px;
position: relative;
transition: 0.2666666s;
width: 88px;
&.more {
background: url(http://104.236.129.44/destiny-menu/assets/images/more.png) center center no-repeat rgba(0,0,0,0.2);
border: 2px solid #FFF;
}
&.maxed {
border-color: #f4da47;
}
&:hover {
transform: scale(1.07);
box-shadow: 0px 0px 8px 3px rgba(255,255,255,0.5);
.item-info {
opacity: 1 !important;
}
}
img {
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
}
&#super {
.item {
height: 130px;
width: 130px;
}
}
.item-select {
height: 350px;
position: absolute;
top: -123px;
transform: scale(0.3);
transition: 0.1333333s;
width: 350px;
z-index: 0;
label {
color: rgba(0,0,0,0.25);
border-top: 3px solid rgba(0,0,0,0.25);
position: absolute;
top: -48px;
opacity: 0;
padding: 8px 0px 12px 0px;
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.1333333s;
width: 304px;
}
.item {
background: rgba(0,0,0,0.05);
border-color: transparent;
display: inline-block;
height: 88px !important;
width: 88px !important;
img {
opacity: 0;
transition: 0.1333333s;
}
}
&.small {
height: 108px;
top: -40px;
}
}
&:hover {
.item-select {
z-index: 1;
label {
opacity: 1;
}
.item {
background: #BBB;
border-color: #FFF;
&.maxed {
border-color: #f4da47;
}
img {
opacity: 1;
}
}
}
}
}
}
}
}
}
.settings {
color:#fff;
font-size:13px;
font-weight:400;
letter-spacing:1px;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
position: absolute;
top: 30px;
left: 30px;
z-index: 1;
.parallax {
cursor: pointer !important;
}
}
.thanks {
color:#fff;
font-size:13px;
font-weight:400;
left:30px;
letter-spacing:1px;
line-height:28px;
position:absolute;
text-transform:uppercase;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
bottom:30px;
z-index:1;
}
View Compiled
$(document).ready(function(event){
parallaxEnabled = true;
var mouseX = event.pageX;
var mouseY = event.pageY;
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$("#lax").on("change", function(){
var checked = $(this).prop("checked");
if( checked == true ){
parallaxEnabled = true;
$(".character").css("margin-top", "350px");
}else{
parallaxEnabled = false;
$(".content, .character").css({
"-webkit-transform": "translateX(0%) translateY(0%)",
"-moz-transform": "translateX(0%) translateY(0%)",
"transform": "translateX(0%) translateY(0%)",
});
$(".character").css("margin-top", "0px");
}
});
$(this).on("mousemove", function(event){
speed = 30;
mouseX = event.pageX;
mouseY = event.pageY;
percentX = ((mouseX/windowWidth) * speed) - (speed/0.75);
percentY = ((mouseY/windowHeight) * speed) - (speed/0.6);
stringX = (0-percentX-speed) + "%";
stringY = (0-percentY-speed) + "%";
percentCX = ((mouseX/windowWidth) * speed) - (speed/30);
percentCY = ((mouseY/windowHeight) * speed) - (speed/90);
stringCX = (0-percentCX-speed) + "%";
stringCY = (0-percentCY-speed) + "%";
$(".cursor").css({
"-webkit-transform": "translateX(" + mouseX + "px) translateY(" + mouseY + "px)",
"-moz-transform": "translateX(" + mouseX + "px) translateY(" + mouseY + "px)",
"transform": "translateX(" + mouseX + "px) translateY(" + mouseY + "px)",
});
if(parallaxEnabled == true){
$(".content").css({
"-webkit-transform": "translateX(" + stringX + ") translateY(" + stringY + ")",
"-moz-transform": "translateX(" + stringX + ") translateY(" + stringY + ")",
"transform": "translateX(" + stringX + ") translateY(" + stringY + ")",
});
$(".character").css({
"-webkit-transform": "translateX(" + stringCX + ") translateY(" + stringCY + ")",
"-moz-transform": "translateX(" + stringCX + ") translateY(" + stringCY + ")",
"transform": "translateX(" + stringCX + ") translateY(" + stringCY + ")",
});
}
});
$(".item-select").each(function(){
$(this).find(".item").each(function(i){
$(this).attr("data-item", i);
});
});
$(".items-row, .stat").on("mouseover", function(){
$(".cursor").addClass("focus");
}).on("mouseout", function(){
$(".cursor").removeClass("focus");
});
$(".item-select .item").click(function(){
var current = $(this).parent().parent().find(".equipped").html();
var item = $(this).html();
$(".item-info").remove();
$(this).parent().parent().find(".equipped").html(item);
$(this).html(current);
});
});
