A Pen by CJ Williams

Thumbnail
This awesome code was written by silencekillsdesign, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright silencekillsdesign ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  CJ Williams</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="overlay overlay-hugeinc">
  <button type="button" class="overlay-close">Close</button>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

<section>
  <p><button id="trigger-overlay" type="button">Open Overlay</button></p>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/silencekillsdesign/a-pen-by-cj-williams-XJpLgm */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);
.codrops-demos a, section button {
  display: inline-block;
  background: #a9a9a9;
  color: #fff;
  font-weight: 400;
  padding: 10px 20px;
  margin: 5px;
  text-transform: uppercase;
  border-radius: 2px;
  letter-spacing: 1px;
}

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: codropsicons;
  src: url("../fonts/codropsicons/codropsicons.eot?#iefix") format("embedded-opentype"), url("../fonts/codropsicons/codropsicons.woff") format("woff"), url("../fonts/codropsicons/codropsicons.ttf") format("truetype"), url("../fonts/codropsicons/codropsicons.svg#codropsicons") format("svg");
}
.clearfix:before {
  content: '';
  display: table;
}
.clearfix:after {
  content: '';
  display: table;
  clear: both;
}

body {
  background: #fff;
  color: #8a8c7e;
  font-size: 100%;
  line-height: 1.25;
  font-family: Lato, Avenir Next, Arial, sans-serif;
}

a {
  color: #99cc33;
  text-decoration: none;
  outline: none;
}
a:hover {
  color: #373e18;
}
a:focus {
  color: #373e18;
}

.codrops-header {
  margin: 0 auto;
  padding: 2em 0 0;
  text-align: center;
}
.codrops-header h1 {
  margin: 0;
  font-weight: 300;
  font-size: 2.5em;
}
.codrops-header h1 span {
  display: block;
  padding: 0 0 0.6em 0.1em;
  font-size: 0.6em;
  opacity: 0.7;
}

.codrops-top {
  width: 100%;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.69em;
  line-height: 2.2;
  background: #fff;
}
.codrops-top a {
  display: inline-block;
  padding: 0 1em;
  text-decoration: none;
}
.codrops-top span.right {
  float: right;
}
.codrops-top span.right a {
  display: block;
  float: left;
}

.codrops-demos {
  margin: 30px auto 0;
  padding: 30px 0;
}
.codrops-demos a:hover {
  background: #777;
}
.codrops-demos a:active {
  background: #777;
}
.codrops-demos a.current-demo {
  background: #777;
}

section {
  padding: 1em 2em 5em;
  text-align: center;
  font-size: 1.5em;
}
section button {
  border: none;
  padding: 15px 30px;
  outline: none;
  background: #85b91e;
}
section p {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px 0;
}

.related a:hover {
  border-color: #82b222;
  color: #82b222;
}
.related a img {
  max-width: 100%;
}
.related a h3 {
  margin: 0;
  padding: 0.5em 0 0.3em;
  max-width: 300px;
  text-align: left;
  font-size: 65%;
  font-weight: 400;
}
.related > a {
  border: 1px solid #99cc33;
  display: inline-block;
  text-align: center;
  margin: 20px 10px;
  padding: 25px;
  color: #99cc33;
  opacity: 0.8;
  transition: color 0.3s, border-color 0.3s;
}

@media screen and (max-width: 25em) {
  .codrops-icon span {
    display: none;
  }
}
.codrops-icon:before {
  margin: 0 4px;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: codropsicons;
  line-height: 1;
  speak: none;
}

.codrops-icon-drop:before {
  content: "\e001";
}

.codrops-icon-prev:before {
  content: "\e004";
}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(153, 204, 51, 0.9);
}
.overlay .overlay-close {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  border: none;
  background: url(../img/cross.png) no-repeat center center;
  text-indent: 200%;
  color: transparent;
  outline: none;
  z-index: 100;
}
.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  font-size: 54px;
  transform: translateY(-50%);
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}
.overlay ul li {
  display: block;
  height: calc(100% / 5);
  min-height: 54px;
}
.overlay ul li a {
  font-weight: 300;
  display: block;
  color: #fff;
  transition: color 0.2s;
}
.overlay ul li a:hover {
  color: #e3fcb1;
}
.overlay ul li a:focus {
  color: #e3fcb1;
}

.overlay-hugeinc {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s 0.5s;
}
.overlay-hugeinc.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s;
}
.overlay-hugeinc.open nav ul {
  opacity: 1;
  transform: rotateX(0deg);
}
.overlay-hugeinc nav {
  perspective: 1200px;
}
.overlay-hugeinc nav ul {
  opacity: 0.4;
  transform: translateY(-25%) rotateX(35deg);
  transition: transform 0.5s, opacity 0.5s;
}
.overlay-hugeinc.close nav ul {
  transform: translateY(25%) rotateX(-35deg);
}

@media screen and (max-height: 30.5em) {
  .overlay nav {
    height: 70%;
    font-size: 34px;
  }
  .overlay ul li {
    min-height: 34px;
  }
}


/*Downloaded from https://www.codeseek.co/silencekillsdesign/a-pen-by-cj-williams-XJpLgm */


/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );


(function() {
	var triggerBttn = document.getElementById( 'trigger-overlay' ),
		overlay = document.querySelector( 'div.overlay' ),
		closeBttn = overlay.querySelector( 'button.overlay-close' );
		transEndEventNames = {
			'WebkitTransition': 'webkitTransitionEnd',
			'MozTransition': 'transitionend',
			'OTransition': 'oTransitionEnd',
			'msTransition': 'MSTransitionEnd',
			'transition': 'transitionend'
		},
		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
		support = { transitions : Modernizr.csstransitions };

	function toggleOverlay() {
		if( classie.has( overlay, 'open' ) ) {
			classie.remove( overlay, 'open' );
			classie.add( overlay, 'close' );
			var onEndTransitionFn = function( ev ) {
				if( support.transitions ) {
					if( ev.propertyName !== 'visibility' ) return;
					this.removeEventListener( transEndEventName, onEndTransitionFn );
				}
				classie.remove( overlay, 'close' );
			};
			if( support.transitions ) {
				overlay.addEventListener( transEndEventName, onEndTransitionFn );
			}
			else {
				onEndTransitionFn();
			}
		}
		else if( !classie.has( overlay, 'close' ) ) {
			classie.add( overlay, 'open' );
		}
	}

	triggerBttn.addEventListener( 'click', toggleOverlay );
	closeBttn.addEventListener( 'click', toggleOverlay );
})();

Comments