SOURCE

console 命令行工具 X clear

                    
>
console
$('.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);
<!-- 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="http://img.zcool.cn/community/01158657145eb632f8758c9b4f24c4.jpg" width="40"/>
    </div>
    <div class="elementItem left">
    <img src="
" />
    </div>
    <div class="elementItem active">
    <img src="" />
    </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>
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;
}