Hover Effect on Header with Clip-Path

hover-effect-on-header-with-clip-path.markdown

Hover Effect on Header with Clip-Path

Hovering on the different menu items (sets a specific class on the body element and) gives this "spotlight"-like slanted background, which comes from embedded SVG background-image(s) on the parent-element of the original H1-title. The partially black/white text on hover, is done with clip-path using the same SVG shape as the background-image, but showing only the clipped part of the H1 text in white, and the - with javaScript cloned - H1 text in black underneath (partially invisible because of the SVG background-image, which sits on top of it). SVG-implementation of clipPath has the widest browser support, and is still needed for Firefox (which has css-clip-path currently - sept 2016 - behind a flag http://caniuse.com/#feat=css-clip-path).

A Pen by Bram de Haan on CodePen.

License.

index.html

    <svg width="0" height="0" class="visuallyhidden">
      <defs>

        <clipPath id="clipPolygon1" clipPathUnits="objectBoundingBox">
          <polygon points="0 0, 0.6 0, 0.8 1, 0 1" />
        </clipPath>

        <clipPath id="clipPolygon2" clipPathUnits="objectBoundingBox">
          <polygon points="0 0, 0.8 0, 1 1, 0 1" />
        </clipPath>

        <clipPath id="clipPolygon3" clipPathUnits="objectBoundingBox">
          <polygon points="0.2 0, 0.8 0, 1 1, 0 1" />
        </clipPath>

        <clipPath id="clipPolygon4" clipPathUnits="objectBoundingBox">
          <polygon points="0.4 0, 1 0, 1 1, 0.2 1" />
        </clipPath>

        <clipPath id="clipPolygon5" clipPathUnits="objectBoundingBox">
          <polygon points="0.6 0, 1 0, 1 1, 0.4 1" />
        </clipPath>

      </defs>
    </svg>

    <div class="container">
      <div class="content" id="content">
        <header class="fronttext" id="fronttext"><h1>Hover Effect on Header with Clip-Path</h1></header>
        <nav class="nav">
          <ul class="nav_items">
            <li class="nav_item nav_item1"><a href="#0"><span>Home</span></a></li>
            <li class="nav_item nav_item2"><a href="#0"><span>About</span></a></li>
            <li class="nav_item nav_item3"><a href="#0"><span>Blog</span></a></li>
            <li class="nav_item nav_item4"><a href="#0"><span>News</span></a></li>
            <li class="nav_item nav_item5"><a href="#0"><span>Contact</span></a></li>
          </ul>
        </nav>
      </div>
    </div>

script.js

$(document).ready(function() {

  var body = $('body');
  var fronttextclone = $('#fronttext').clone().addClass('fronttextclone').attr('id', '').insertBefore($('#fronttext'));

  $('.nav_item1 a').on( "mouseenter", function() {
    body.addClass('has-nav_item1-active');
  });
  $('.nav_item1 a').on( "mouseleave", function() {
    body.removeClass('has-nav_item1-active');
  });

  $('.nav_item2 a').on( "mouseenter", function() {
    body.addClass('has-nav_item2-active');
  });
  $('.nav_item2 a').on( "mouseleave", function() {
    body.removeClass('has-nav_item2-active');
  });

  $('.nav_item3 a').on( "mouseenter", function() {
    body.addClass('has-nav_item3-active');
  });
  $('.nav_item3 a').on( "mouseleave", function() {
    body.removeClass('has-nav_item3-active');
  });

  $('.nav_item4 a').on( "mouseenter", function() {
    body.addClass('has-nav_item4-active');
  });
  $('.nav_item4 a').on( "mouseleave", function() {
    body.removeClass('has-nav_item4-active');
  });

  $('.nav_item5 a').on( "mouseenter", function() {
    body.addClass('has-nav_item5-active');
  });
  $('.nav_item5 a').on( "mouseleave", function() {
    body.removeClass('has-nav_item5-active');
  });

});
WebFontConfig = {
    google: { 
     families: [ 'Oswald:700:latin' ],
     text: ['HoverEfctHadwihClp-PhmAbuBgNsnc']
    }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

$color1: hsl(98, 40%, 50%);
$color2: hsl(350, 68%, 36%);
$color3: hsl(200, 50%, 50%);
$color4: hsl(240,40%,50%);
$color5: hsl(142, 60%, 40%);
$transp: hsla(0, 0%, 0%, 0);
$slategray: hsl(210, 38%, 35%);

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  background: hsla(0,0%,0%,.5)
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100%;
}

.wf-active body {
  font-family: 'Oswald', sans-serif; 
}

.content,
.fronttext,
.fronttext h1 {
  width: 100vw;
  height: 100vw;
}

.content {
  overflow: hidden;
  position: relative;
  z-index: 0;
}
 
.fronttext {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  text-align: center;

  h1 {
    color: black;
    margin: 0;
    font-size: 12vh;
    padding: 0 5vw;
    transition: color .3s;

    @media (orientation: portrait) {
      font-size: 13vw;
    }

  }
}

.wf-active h1 {
 font-weight: normal;
}

[id="fronttext"] {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'%3E%3Cpolygon fill='rgb(55,89,123)' points='0.2 0, 0.8 0, 1 1, 0 1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top center;
}

.has-nav_item1-active [id="fronttext"] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'%3E%3Cpolygon  fill='rgb(114,179,77)' points='0 0, 0.6 0, 0.8 1, 0 1'/%3E%3C/svg%3E");
}

.has-nav_item2-active [id="fronttext"] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'%3E%3Cpolygon fill='rgb(154,29,50)' points='0 0, 0.8 0, 1 1, 0 1'/%3E%3C/svg%3E");
}

.has-nav_item3-active [id="fronttext"] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'%3E%3Cpolygon fill='rgb(64,149,191)' points='0.2 0, 0.8 0, 1 1, 0 1'/%3E%3C/svg%3E");
}

.has-nav_item4-active [id="fronttext"] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'%3E%3Cpolygon fill='rgb(77,77,179)' points='0.4 0, 1 0, 1 1, 0.2 1'/%3E%3C/svg%3E");
}

.has-nav_item5-active [id="fronttext"] {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1 1'%3E%3Cpolygon fill='rgb(41,163,86)' points='0.6 0, 1 0, 1 1, 0.4 1'/%3E%3C/svg%3E");
}

.has-nav_item1-active [id="fronttext"] h1 {
  -webkit-clip-path: polygon(0 0, 60% 0, 80% 100%, 0 100%);
  clip-path: polygon(0 0, 60% 0, 80% 100%, 0 100%);
  clip-path: url("#clipPolygon1");
}

.has-nav_item2-active [id="fronttext"] h1 {
  -webkit-clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%);
  clip-path: url("#clipPolygon2");
}

[id="fronttext"] h1, 
.has-nav_item3-active [id="fronttext"] h1 {
  -webkit-clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  clip-path: url("#clipPolygon3");
}

.has-nav_item4-active [id="fronttext"] h1 {
  -webkit-clip-path: polygon(40% 0, 100% 0, 100% 100%, 20% 100%);
  clip-path: polygon(40% 0, 100% 0, 100% 100%, 20% 100%);
  clip-path: url("#clipPolygon4");
}

.has-nav_item5-active [id="fronttext"] h1 {
  -webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
  clip-path: url("#clipPolygon5");
}

[class*="-active"] [id="fronttext"] h1 {
  color: white;
}

.nav {
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.nav_items {
  list-style: none;
  text-align: center;
  overflow: hidden;
}

.nav_item {
  float: left;
  width: 20%;
  height: 100vh;
  transition: all 0.3s;
  font-size: 3vw;

  & > a {
    display: block;
    width: 100%;
    position: relative;
    padding-top: 50vh;
    padding-bottom: 50vh;
    text-decoration: none;
    color: hsl(240,40%,60%);

    @media (orientation: portrait) {
      padding-top: 40vh;
      padding-bottom: 60vh;
    }

  }

}

.nav_item1 a:hover {
  color: darken($color1, 25%);
}

.nav_item2 a:hover {
  color: darken($color2, 15%);
}

.nav_item3 a:hover {
  color: darken($color3, 20%);
}

.nav_item4 a:hover {
  color: darken($color4, 20%);
}

.nav_item5 a:hover {
  color: darken($color5, 18%);
}

.container {
  position: relative;
}

.container:after {
  content: "";
  position: absolute;
  top:0;right:0;left:0;bottom:-100vw;
  margin-top: 100%;
  z-index: 0;
 background-color: $slategray;
}

.has-nav_item1-active .container:after {
  background-color: $color1;
}

.has-nav_item2-active .container:after {
  background-color: $color2;
}

.has-nav_item3-active .container:after {
  background-color: $color3;
}

.has-nav_item4-active .container:after {
  background-color: $color4;
}

.has-nav_item5-active .container:after {
  background-color: $color5;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}