LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

    
        
        
        Destiny Menu
        
        
    
    
        

CSS Recreation of the "Destiny" Item Menu
Pen by Sebastian Inman

Level

40

Light

249

Defense

1718

195

207

118

CSS
* {
  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%;
}
body .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;
}
body .cursor: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;
}
body .cursor .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);
  }
}
body .cursor.focus .spinner {
  opacity: 0.65;
}
body .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;
}
body .character: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;
}
body .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;
}
body .item-info {
  background: rgba(17, 12, 21, 0.95);
  height: 460px;
  position: absolute;
  transition: 0.2666666s;
  width: 350px;
  z-index: 10;
}
body .item-info#left {
  margin: -100px 0px 0px -380px;
}
body .item-info#right {
  margin: -100px 0px 0px -380px;
}
body .content {
  height: 80vh;
  position: absolute;
  left: 25vw;
  top: 10vh;
  width: 50vw;
  z-index: 2;
}
body .content .manager {
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
body .content .manager .items {
  height: 100%;
  position: absolute;
  top: 0px;
  width: 108px;
}
body .content .manager .items .sep {
  clear: both;
  display: block;
  float: left;
  height: 15px;
  width: 100%;
}
body .content .manager .items .info {
  position: absolute;
  height: 100%;
  top: 0px;
  width: auto;
}
body .content .manager .items .info .stat {
  opacity: 0.35;
  transition: 0.2666666s;
}
body .content .manager .items .info .stat:hover {
  opacity: 0.5;
}
body .content .manager .items .info h1, body .content .manager .items .info h2, body .content .manager .items .info h3, body .content .manager .items .info h4, body .content .manager .items .info h5, body .content .manager .items .info h6 {
  line-height: 1;
  margin: 0px;
  padding: 0px;
}
body .content .manager .items .info h1 {
  color: #FFF;
  font-size: 124px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 1px;
}
body .content .manager .items .info h2 {
  color: #FFF;
  font-size: 78px;
  font-weight: 500;
  margin-top: 1px;
}
body .content .manager .items .info h2.light {
  color: #FFD941;
}
body .content .manager .items .info h2.light:before {
  content: "";
}
body .content .manager .items .info h3 {
  color: #FFF;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}
body .content .manager .items .info h4 {
  color: #FFF;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 1px;
}
body .content .manager .items.right {
  right: 0px;
}
body .content .manager .items.right .stats {
  right: 130px;
  text-align: right;
}
body .content .manager .items.right .item {
  float: right;
}
body .content .manager .items.right .item-select {
  padding-left: 30px;
  right: -253px;
}
body .content .manager .items.right .item-select label {
  left: 30px;
  text-align: left;
}
body .content .manager .items.right .item-select .item {
  float: left;
  margin: 0px 8px 8px 0px;
}
body .content .manager .items.right .items-row:hover .item-select {
  transform: scale(1) translateX(112px) translateY(123px);
}
body .content .manager .items.left {
  left: 0px;
}
body .content .manager .items.left .info {
  left: 172px;
  text-align: left;
}
body .content .manager .items.left .item {
  float: left;
}
body .content .manager .items.left .item-select {
  left: -253px;
  padding-right: 30px;
}
body .content .manager .items.left .item-select label {
  right: 30px;
  text-align: right;
}
body .content .manager .items.left .item-select .item {
  float: right;
  margin: 0px 0px 8px 8px;
}
body .content .manager .items.left .items-row:hover .item-select {
  transform: scale(1) translateX(-112px) translateY(123px);
}
body .content .manager .items.left .items-row:hover .item-select.small {
  transform: scale(1) translateX(-112px) translateY(40px);
}
body .content .manager .items .items-row {
  clear: both;
  display: block;
  float: left;
  height: auto;
  margin: 0px 0px 30px 0px;
  padding: 0px;
  position: relative;
  width: 100%;
}
body .content .manager .items .items-row:last-child {
  margin: 0px;
}
body .content .manager .items .items-row .item {
  border: 4px solid #FFF;
  height: 88px;
  position: relative;
  transition: 0.2666666s;
  width: 88px;
}
body .content .manager .items .items-row .item.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;
}
body .content .manager .items .items-row .item.maxed {
  border-color: #f4da47;
}
body .content .manager .items .items-row .item:hover {
  transform: scale(1.07);
  box-shadow: 0px 0px 8px 3px rgba(255, 255, 255, 0.5);
}
body .content .manager .items .items-row .item:hover .item-info {
  opacity: 1 !important;
}
body .content .manager .items .items-row .item img {
  display: block;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}
body .content .manager .items .items-row#super .item {
  height: 130px;
  width: 130px;
}
body .content .manager .items .items-row .item-select {
  height: 350px;
  position: absolute;
  top: -123px;
  transform: scale(0.3);
  transition: 0.1333333s;
  width: 350px;
  z-index: 0;
}
body .content .manager .items .items-row .item-select 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;
}
body .content .manager .items .items-row .item-select .item {
  background: rgba(0, 0, 0, 0.05);
  border-color: transparent;
  display: inline-block;
  height: 88px !important;
  width: 88px !important;
}
body .content .manager .items .items-row .item-select .item img {
  opacity: 0;
  transition: 0.1333333s;
}
body .content .manager .items .items-row .item-select.small {
  height: 108px;
  top: -40px;
}
body .content .manager .items .items-row:hover .item-select {
  z-index: 1;
}
body .content .manager .items .items-row:hover .item-select label {
  opacity: 1;
}
body .content .manager .items .items-row:hover .item-select .item {
  background: #BBB;
  border-color: #FFF;
}
body .content .manager .items .items-row:hover .item-select .item.maxed {
  border-color: #f4da47;
}
body .content .manager .items .items-row:hover .item-select .item 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;
}
.settings .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;
}
JS
$(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);

	});

});

alsolike(
  "dPmKjM", "Dying Light Loading Animation", 
  "MYBzyG", "CSS Only Pokeball", 
  "qEozjR", "Article Loading Animation" 
)
Host Instantly Drag and Drop Website Builder

 

Description

! works best on larger screens !
Term
Mon, 11/27/2017 - 21:51

Related Codes

Pen ID
Pen ID
Pen ID