<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/BurlyOctopus/pen/WwqezP?limit=all&page=4&q=ui" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<style class="cp-pen-styles">body {
background-color: #eeeeee;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.elementWrapper {
overflow:hidden;
position:relative;
border-radius: 4px;
background: #dd6b8c;
padding: 0px;
width: 400px;
height:600px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.44);
display: flex;
}
.elementArrowWrapper{
width: 100%;
position: absolute;
bottom: 17%;
height: 21.5%;
text-align: center;
z-index: 5;
}
.elementArrow{
width: 150px;
height: 150px;
background: #000;
position: absolute;
transform-origin: center;
transition: all .7s ease;
opacity:1;
}
.arrowLeft{
transform: translate(-73%) rotate(45deg);
}
.arrowLeft svg{
transform: rotate(-45deg) translate(79%,125%);
}
.arrowRight svg{
transform: rotate(-45deg) translate(-307%,125%);
}
.arrowRight{
right:0;
transform: translate(73%) rotate(45deg);
}
.elementBackgroundWrapper{
width: 100%;
position: absolute;
bottom: 55%;
height: 22%;
text-align: center;
z-index: 1;
pointer-events: none;
}
.elementBackground{
width: 400px;
position: absolute;
z-index:-1;
opacity:.4;
height: 400px;
background-color: #fff;
transform: rotate(45deg);
}
.backgroundLeft{
transform: translate(-65%) rotate(45deg);
}
.backgroundRight{
right:0;
transform: translate(65%) rotate(45deg);
}
.elementItemWrapper{
width: 100%;
position: absolute;
bottom: 40%;
height: 40%;
text-align: center;
z-index:2;
}
.elementItem {
width: 150px;
height: 150px;
background: #fff;
position: absolute;
transform: translate(83.5%,0%) rotate(45deg);
transform-origin: center;
transition: all .4s ease;
opacity:1;
}
.elementItem img{
transform: rotate(-45deg);
max-width: 150px;
padding: 10px;
}
.elementContentWrapper {
width: 60%;
margin: 0 auto;
position: absolute;
transform: translate(34%,0);
opacity:1;
transition:all .4s ease;
}
.elementContentWrapper.left{ transform: translate(-40%,100%); opacity:0;}
.elementContentWrapper.right{transform: translate(104%,100%); opacity:0;}
.elementItem.left {
transform: translate(0%,82%) rotate(45deg);
opacity:.75;
}
.elementItem.right {
transform: translate(167%,82%) rotate(45deg);
opacity:.75;
}
.elementItem.farRight {
transform: translate(250%,0%) rotate(45deg);
opacity:.75;
}
.elementItem.superfarRight {
transform: translate(341%,-82%) rotate(45deg);
opacity:.0;
}
.elementItem.farLeft {
transform: translate(-82%,0%) rotate(45deg);
opacity:.75;
}
.elementItem.superfarLeft {
transform: translate(-164%,-82%) rotate(45deg);
opacity:.0;
}
.elementContent {
width: 100%;
position: absolute;
bottom: 0;
height: 33.6%;
text-align: center;
z-index:2;
}
.elementContent:before {
content: '';
width: 400px;
position: absolute;
z-index:-1;
left: 0;
height: 400px;
background-color: #fff;
transform: rotate(45deg);
}
.elementContent:after {
content: '';
width: 400px;
position: absolute;
z-index: -17;
top: -122%;
left: 0;
height: 400px;
border: 1px solid #fff;
/* background-color: #E91E63; */
transform: rotate(45deg);
}
img{width:100%;}
.loadPage{
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
display: flex;
left: 0;
top: 0;
justify-content: center;
align-items: center;
background: rgb(251, 173, 196);
pointer-events:none;
}
.loadPage{
transition:all .5s ease;
}
.loadPage img{
max-width:200px;
}</style></head><body>
<!-- insperation https://dribbble.com/shots/2575761-Webshop-UI-UX-experiments -->
<div class="loadPage shown">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/orange-01.svg" />
</div>
<div class="elementWrapper">
<div class="elementItemWrapper">
<div class="elementItem superfarLeft"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/Strawberry-01.svg
" /></div>
<div class="elementItem farLeft">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/pineapple-01.svg
" />
</div>
<div class="elementItem left">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/Pancakes-01.svg
" />
</div>
<div class="elementItem active">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/orange-01.svg" />
</div>
<div class="elementItem right"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/grape-green-01.svg
" /></div>
<div class="elementItem farRight"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/Berry_red-01.svg
" /></div>
<div class="elementItem superfarRight">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/276996/chocolate_2-01.svg
" /></div>
</div>
<div class="elementArrowWrapper">
<div class="elementArrow arrowLeft">
<svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path
d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194 L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587 C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z"
fill="#fff"/></svg>
</div>
<div class="elementArrow arrowRight">
<svg enable-background="new 0 0 32 32" height="32px" id="Layer_1" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path
d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194 L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587 c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z"
fill="#fff"/></svg>
</div>
</div>
<div class="elementBackgroundWrapper">
<div class="elementBackground backgroundLeft">
</div>
<div class="elementBackground backgroundRight">
</div>
</div>
<div class="elementContent">
<div class="elementContentWrapper left">
<p>subtitle</p>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum a vobis bonum voluptas dicitur.</p>
</div>
<div class="elementContentWrapper active">
<p>subtitle</p>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum a vobis bonum voluptas dicitur.</p>
</div>
<div class="elementContentWrapper right">
<p>subtitle</p>
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Summum a vobis bonum voluptas dicitur.</p>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script >$('.arrowRight').click(function(){
var elsuperfarLeft = $('.elementItem.superfarLeft');
var elfarLeft = $('.elementItem.farLeft');
var elLeft = $('.elementItem.left');
var elMiddle = $('.elementItem.active');
var elRight = $('.elementItem.right');
var elfarRight = $('.elementItem.farRight');
var elsuperfarRight = $('.elementItem.superfarRight');
var eltextMiddle = $('.elementContentWrapper.active');
var eltextLeft = $('.elementContentWrapper.left');
var eltextRight = $('.elementContentWrapper.right');
elMiddle.removeClass('active').addClass('right');
elLeft.removeClass('left').addClass('active');
elfarLeft.removeClass('farLeft').addClass('left');
elRight.removeClass('right').addClass('farRight');
elfarRight.removeClass('farRight').addClass('superfarRight');
elsuperfarLeft.removeClass('superfarLeft').addClass('farLeft');
elsuperfarRight.removeClass('superfarRight').addClass('superfarLeft');
eltextMiddle.removeClass('active').addClass('right');
eltextLeft.removeClass('left').addClass('active');
eltextRight.removeClass('right').addClass('left');
});
$('.arrowLeft').click(function(){
var elsuperfarLeft = $('.elementItem.superfarLeft');
var elfarLeft = $('.elementItem.farLeft');
var elLeft = $('.elementItem.left');
var elMiddle = $('.elementItem.active');
var elRight = $('.elementItem.right');
var elfarRight = $('.elementItem.farRight');
var elsuperfarRight = $('.elementItem.superfarRight');
var eltextMiddle = $('.elementContentWrapper.active');
var eltextLeft = $('.elementContentWrapper.left');
var eltextRight = $('.elementContentWrapper.right');
elMiddle.removeClass('active').addClass('left');
elLeft.removeClass('left').addClass('farLeft');
elRight.removeClass('right').addClass('active');
elfarLeft.removeClass('farLeft').addClass('superfarLeft');
elfarRight.removeClass('farRight').addClass('right');
elsuperfarLeft.removeClass('superfarLeft').addClass('superfarRight');
elsuperfarRight.removeClass('superfarRight').addClass('farRight');
eltextMiddle.removeClass('active').addClass('left');
eltextLeft.removeClass('left').addClass('right');
eltextRight.removeClass('right').addClass('active');
});
var show = function(){
$('.loadPage.shown').fadeOut('slow');
};
setTimeout(show, 2000);
//# sourceURL=pen.js
</script>
</body></html>
