PRO slant ideation

Possible implementation in order to add slants to sections. Slant animates when scrolling pas slant as well.

by mzilverberg

HTML

<link rel="stylesheet" href="https://www.vi.nl/.resources/vinl-website-theme/css/vi.min~2018-01-18-09-32-08-000~cache.css">
<div class="o-outer-wrapper">

  <header class="c-header">
    <img src="https://dummyimage.com/1440x600/1f1f1f/333&text=image" class="" />
  </header>


  <div class="o-slant-wrapper o-slant-wrapper--overlap">
    <div class="o-slant"></div>
    
    <section class="c-intro">
      <div class="o-wrapper">
        <div class="o-layout o-layout--center">
          <div class="o-layout__item u-8/12@lg">
            Test
          </div>
        </div>
      </div>
    </section>
  </div>
  
  
  <div style="height: 800px">
    <!-- HERE FOR SCROLLING BEHAVIOR -->
  </div>
  
</div>

SCSS

/*
Slant
*/
@mixin slant($columns: 11, $color: #fff) {
  $slant-height: 72px;
  $skew: -17.5deg;
  $padding-correction: 24px;
  $total-columns: $columns + 1;
  
  position: relative;
  overflow: hidden;

  &--overlap {
    margin-top: -$slant-height;
  }
  
  & > .o-slant {
    position: relative;
    height: $slant-height;
    
    /* copy from .o-wrapper */
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    
    /* end copy */
    
    &::before,
    &::after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      background: $color;
      height: 100%;
    }
    &::before {
      right: ($columns + ($total-columns - ($total-columns - $columns)) - $total-columns - 1) * -1px;
      width: calc((#{$columns} / #{$total-columns} * 100%) - 24px);
      transform: skewX($skew);
      transition: width 1s ease-in-out;
    }
    &::after {
      width: 20em;
      left: calc(100% - #{$padding-correction});
    }
  }
  
  &.animating {
    & > .o-slant::before {
      width: 150%;
    }
  }
}

body {
  background: lightgrey;
  margin: auto;
}

.o-outer-wrapper {
  max-width: 1440px;
  margin: auto;
}

.c-intro {
  background: #fff;
  padding: 2em 0 4em;
}

/* Slant */
.o-slant-wrapper {
  @include slant();
}

/* Helpers */
.o-grid-helper {
  /* display: none; */
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  .o-layout,
  .o-layout__item {
    display: flex;
    align-items: stretch;
    align-content: stretch;
    height: 100%;
  }
  
  .o-layout__item span {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
  }
}

label {
  position: fixed;
  top: 10px;
  left: 10px;
}

JavaScript

(function($, window, document) {

	$(window).on("scroll", function() {
		
  	var y = $("html").scrollTop(),
    		$elem = $(".c-intro").closest(".o-slant-wrapper");
    		offset = $elem.offset().top - $elem.css("padding-top").replace(/[^-\d\.]/g, "") - 200;

		console.log(y, offset);
		if(y >= offset) {
    	$elem.addClass("animating");
    }

  });

})(this.jQuery, this, this.document);