Hero side canvas

by cintia_rodrigues

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="hero hero-side-canvas" id="hero-slider">
  <!-- Carousel -->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active image-one"></div>
      <div class="item image-two"></div>
      <div class="item image-three"></div>
    </div>

    <div class="side-canvas"></div>
    <div class="container ontop">
      <div class="row">
        <div class="col-sm-6 content" id="slider-content">
          <h1>Lorem Ipsum</h1>
          <p>
            Aenean a lacus vehicula, interdum leo suscipit, blandit augue. Quisque scelerisque massa vel nibh vestibulum euismod eu sagittis felis. Quisque tempor ante porta egestas commodo. Sed finibus ligula quis magna imperdiet, et fringilla libero finibus. Nulla
            ex leo, rutrum tincidunt lorem et, ultrices rutrum odio.
          </p>
          <div class="btn btn-primary btn-lg btn-round">
            Call to Action
          </div>
          <!-- Controls -->
          <div class="slider-controls">
            <div class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </div>
            <div class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.hero {
	.carousel {
		height: 100%;
		
		.carousel-inner {
			height: 100%;
			
			.item {
				height: 100%;
				background-size: cover;
				background-repeat: no-repeat;
        background-position: center; 
			}
		}
		
		.slider-controls {			
			margin-top: 10px;
		}
		
		.carousel-control {
		  width: 50px;
			height: 50px;
			display: inline-block;
			border-radius: 50%;
			padding: 10px;
			border: 2px solid #fff;
			position: static;
			cursor: pointer;
		  z-index: 2;
			
			&.left {
				background-image: none;
				margin-right: 5px;
      }
			
			&.right {
				background-image: none;
      }
		
			.glyphicon  {
				position: static;
			}
		}
	}	
}

.hero-side-canvas {
	 height: auto;
   position: relative; 
   
   .side-canvas {
    position: absolute;
    top: 0;
    width: 58%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-shape-outside: polygon(0 0,100% 0,85% 100%,0 100%);
     shape-outside: polygon(0 0,100% 0,85% 100%,0 100%);
     -webkit-clip-path: polygon(0 0,100% 0,85% 100%,0 100%);
    z-index: 1;
  }
  
  .content {
    padding: 60px 30px;
		z-index: 1;
		color: #fff;
  }
	
		.image-one {
		background: url(http://stuckincustoms.smugmug.com/Portfolio/i-JSxf5Nm/0/X3/Burning-Man-Day-6%20%28202%20of%201606%29-X3.jpg);
	}
	
	.image-two {
		background: url(http://stuckincustoms.smugmug.com/Portfolio/i-KMjVHRd/0/X3/Andramada-X3.jpg);
	}
	
	.image-three {
		background: url(http://stuckincustoms.smugmug.com/Burning-Man/i-dd9xmfn/0/X3/The%20Steamy%20Car-X3.jpg);
	}
}

.ontop {
	  position: absolute;
		top: 0;
    right: 0;
    left: 0;
}

.btn-round {
  border-radius: 50px;
}



/*MEDIA QUERIE*/

@media all and (max-width:768px) {

   .hero-side-canvas .side-canvas {
    width: 100%;
    height: 100%;
    -webkit-shape-outside: polygon(0 0,100% 0,100% 100%,0 100%);
     shape-outside: polygon(0 0,100% 0,100% 100%,0 100%);
     -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  }
}

JavaScript

//Make slider responsive
var heroSlider = $('#hero-slider');
var sliderHeight = $('#slider-content').outerHeight();
heroSlider.height(sliderHeight);

//Make slider responsive on resize
$(window).resize(function() {
  var heroSlider = $('#hero-slider');
  var sliderHeight = $('#slider-content').outerHeight();
  heroSlider.height(sliderHeight);
});