front-end

Transition Effect and Rotate Cube with CSS & jQuery

John Doe

500 Views

Sample code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src='https://code.jquery.com/jquery-1.9.1.js'></script>
<style>
* { box-sizing: border-box; margin: 0px; }

.scene {
	width: 100%;
	height: 100vh;
	perspective: 1000px;
}

.cube {
	width: 100%;
	height: 100vh;
	position: relative;
	transform-style: preserve-3d;
	transform: translateZ(-50vh);
	transition: transform 1s;
}

.cube.show-front  { transform: translateZ(-50vh) rotateY(   0deg); }
.cube.show-bottom { transform: translateZ(-50vh) rotateX(  90deg); }
.cube__face {
	position: absolute;
	width: 100%;
	height: 100vh;
	font-size: 40px;
	font-weight: bold;
	color: white;
	text-align: center;
}
.cube__face--front  { 
	background: hsla(  0, 100%, 50%, 0.7);
	transform: rotateY(  0deg) translateZ(50vh);
}
.cube__face--bottom { 
	background: hsla(300, 100%, 50%, 0.7);
	transform: rotateX(-90deg) translateZ(50vh);
}
#ajax-loading-screen {
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    z-index: 1000000000;
}
#ajax-loading-screen .mask-top {
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
}
#ajax-loading-screen .mask-right {
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
}
#ajax-loading-screen .mask-bottom {
    bottom: 0;
    right: 0;
    height: 50%;
    width: 100%;
}
#ajax-loading-screen .mask-left {
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
}
#ajax-loading-screen[data-effect="center_mask_reveal"] span {
    position: absolute;
    background: #fff;
    z-index: 100;
    -webkit-transition: 0.8s cubic-bezier(0.12,0.75,0.4,1);
    transition: 0.8s cubic-bezier(0.12,0.75,0.4,1);
}
#ajax-loading-screen.loaded .mask-top {
    -webkit-transform: translateY(-100%) translateZ(0);
    -ms-transform: translateY(-100%) translateZ(0);
    transform: translateY(-100%) translateZ(0);
}
#ajax-loading-screen.loaded .mask-right {
    -webkit-transform: translateX(100%) translateZ(0);
    -ms-transform: translateX(100%) translateZ(0);
    transform: translateX(100%) translateZ(0);
}
#ajax-loading-screen.loaded .mask-bottom {
    -webkit-transform: translateY(100%) translateZ(0);
    -ms-transform: translateY(100%) translateZ(0);
    transform: translateY(100%) translateZ(0);
}
#ajax-loading-screen.loaded .mask-left {
    -webkit-transform: translateX(-100%) translateZ(0);
    -ms-transform: translateX(-100%) translateZ(0);
    transform: translateX(-100%) translateZ(0);
}
</style>
</head>
<body>
<div id="ajax-loading-screen" data-effect="center_mask_reveal">
	<span class="mask-top"></span>
    <span class="mask-right"></span>
    <span class="mask-bottom"></span>
    <span class="mask-left"></span>
</div>
<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front">ORIEL</div>
    <div class="cube__face cube__face--bottom">INDIFFERENCE</div>
  </div>
</div>
<script>
var currentClass = '';
var cube = document.querySelector('.cube');
var showClass = '';

window.addEventListener('wheel', function(event) {
	if ( currentClass ) {
		cube.classList.remove( currentClass );
	}
	if (event.deltaY < 0) {
		showClass = 'show-front';
 	}
 	else if (event.deltaY > 0) {
 		showClass = 'show-bottom';
 	}
	cube.classList.add( showClass );
	currentClass = showClass;
});

$(function() {
	$("#ajax-loading-screen").addClass("loaded");
	setTimeout(function() {
		$("#ajax-loading-screen").hide();
	}, 800);
});
</script>
</body>
</html>

 

Result:

Close Start with a boilerplate: jQuery Vue React React + JSX Preact TypeScript CoffeeScript SCSS CSS Grid Bootstrap PostCSS Show boilerplate bar less often? Links: 馃憤馃徎 Roadmap (vote for features) 馃悶 Bug tracker 馃摍 Docs 馃帥 Service status Support JSFiddle and g

 

Ref.

https://codepen.io/desandro/pen/KRWjzm