wzqRmb

index.html

<div class="hero">
  <div class="image-1 image-container">
    <div class="image"></div>
  </div>
  <div class="image-2 image-container">
    <div class="image"></div>
  </div>
  <h1><span class="demi">Demi</span><span class="hero">Hero</span></h1>
  <a class="btn">
    Learn More
    <div class="side top"></div>
    <div class="side bottom"></div>
    <div class="side left"></div>
    <div class="side right"></div>
  </a>
</div>
<div class="container">
  <p>Just a diagonally split hero banner. <br />Click <i class="fa fa-mouse-pointer"></i> anywhere to toggle on/off. <br />The button does nothing; deal with it.</p>
</div>

script.babel

window.onload= function(){
  
  setTimeout(()=>{
    $('.image, .btn, h1, .hero').toggleClass('active');
    $(window).click(function(){
      $('.image, .btn, h1, .hero').toggleClass('active')
    })
  }, 500)
  
  /*Make the left and right sides follow your mouse. This would look better if it can work with a fixed background image. */
  /*$('.hero').mousemove((e)=>{
     var mx = e.pageX,
         w = $(window).width();
     if(mx > (w/2)){
        let offset = mx - (w/2);
       $('.image-2').css({
         'margin-left': 0,
         'z-index': 2
        })
        $('.image-1').css({
          'margin-right': `-${offset}px`,
          'z-index': 3
        });
     }
     if(mx < (w/2)){
        let offset = (w/2) - mx;
       $('.image-1').css({
         'margin-right': 0,
         'z-index': 2
        })
        $('.image-2').css({
          'margin-left': `-${offset}px`,
          'z-index': 3
        });
     }
  })
  $('.hero').mouseleave((e)=>{
   
        $('.image-1').css({
         'margin-right': 0,
         'z-index': 2
        })
        $('.image-2').css({
          'margin-left': 0,
          'z-index': 3
        });
  })*/
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

$image1:url(http://ericbrewer.ca/images/stockImages/newYork.jpg);
$image2:url(http://ericbrewer.ca/images/stockImages/wheatField.jpg);
body{
  //background:#232224; 
  color:#444;
  font-size:18px;
}  
.hero{
  position:relative;
  width:100%;
  height:500px;
  //background:rgba(255,255,255,0.1);
  overflow:hidden;
}

.image-container{
  display:block;
  position:absolute;
  width:120%;
  height:100%;
  transform:skew(-20deg);
  overflow:hidden;
  
  &.image-1{
    display:block;
    right:50%;
    z-index:1;
    
    .image{
     background-image:$image1;
      transform:skew(20deg) translateY(-300px) translateX(200px);
    }
  }
    
  &.image-2{
    left:50%;
    z-index:2;
    
    .image{
      background-image:$image2;
      margin-left:-100px;
      transform:skew(20deg) translateY(300px) translateX(-200px);
    }
  }
}

.image{
  display:block;
  width:130%;
  height:100%;
  background:transparent no-repeat center center;
  background-size:cover;
  transform:skew(20deg);
  transition:all .3s ease-out;
  opacity:0;
  
  &.active{
    transform:skew(20deg)!important;
    opacity:1;
  }
}

.btn{
  display:block;
  position:absolute;
  top:60%;
  left:50%;
  width:200px;
  height:60px;
  line-height:60px;
  padding:0;
  text-align:center;
  font-size:20px;
  text-transform:uppercase;
  color:white;
  transform:translate(-50%, -50%);
  opacity:0;
  z-index:1000;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:hidden;
 
  &:after{
    display:block;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    content:"";
    background:white;
    width:10px;
    height:10px;
    border-radius:50%;
    opacity:0;
    z-index:-1;
    transition:all .4s ease-out;
  }
  
  &.active{
    opacity:1;
    transition:all .3s ease-out, opacity .2s .5s ease-out;
    
    &:hover {
      color:#62757f;
      &:after{
        opacity:1;
        width:300px;
        height:200px;
      }
    }
    
    .side{
      opacity:1;
    }
    
    .top, .bottom{
      width:100%!important;
    }
    .left, .right{
      height:100%!important;
    }
  }
  
  .side{
    display:block;
    position:absolute;
    background:white;
    content:"";
    transition:all .3s .5s ease-out;
    opacity:0;
    
    &.top{
      top:0;
      left:0;
      width:0%;
      height:2px;
    }
    &.bottom{
      bottom:0;
      right:0;
      width:0%;
      height:2px;
    }
    &.left{
      bottom:0;
      left:0;
      width:2px;
      height:0%;
    }
    
    &.right{
      top:0;
      right:0;
      width:2px;
      height:0%;
    }
  }
}

//Other stuff
h1{
  display:block;
  position:relative;
  top:25%;
  //text-align:center;
  text-transform:uppercase;
  z-index:101;
  color:white;
  font-size:60px;
  font-style:italic;
  width:100%;
  
  span{
    opacity:0;
  }
  &.active {
    span{
      opacity:1;
      transform:translateY(0px)!important;
      transition:all .3s .5s ease-out;
    }
  }
  
  .demi{
    position:absolute;
    right:50%;
    transform:translateY(100px) translateX(-40px);
  }
  .hero{
    position:absolute;
    left:50%;
    transform:translateY(-100px) translateX(40px);
  }
}
p{
  text-align:center;
  font-size:22px;
  line-height:30px;
  max-width:80%;
  margin:60px auto;
}
i{
  position:relative;
  font-size:16px!important;
  margin:0 10px;
  
  &:after{
    display:block;
    position:absolute;
    width:25px;
    height:25px;
    border:1px solid #444;
    content:"";
    top:-50%;
    left:-100%;
    border-radius:50%;
    border-top-color:transparent;
    border-bottom-color:transparent;
    animation:expand 1s ease-out infinite; 
  }
}

@keyframes expand{
  0%{
    opacity:0;
    transform:scale(0.5);
  }
  10%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:scale(1);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

wzqrmb.markdown

wzqRmb

A Pen by Ikonikre on CodePen.

License.