initial commit

README.md

@@ -0,0 +1,9 @@
+Ink Transition Effect
+=========
+An ink bleed transition effect, powered by CSS animations.
+
+[Article on CodyHouse](https://codyhouse.co/gem/ink-transition-effect/)
+
+[Demo](https://codyhouse.co/demo/ink-transition-effect/index.html)
+ 
+[Terms](https://codyhouse.co/terms/)

css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,325 @@
+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+*, *::after, *::before {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-size: 1.6rem;
+  font-family: "PT Sans", sans-serif;
+  color: #242322;
+  background-color: #ffffff;
+}
+
+a {
+  color: #a5c4bc;
+  text-decoration: none;
+}
+
+/* -------------------------------- 
+
+Patterns - reusable parts of our design
+
+-------------------------------- */
+.cd-btn {
+  display: inline-block;
+  padding: 1.6em 2.4em;
+  font-size: 1.4rem;
+  letter-spacing: .15em;
+  color: #ffffff;
+  font-weight: 700;
+  text-transform: uppercase;
+  background-color: #a5c4bc;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-transition: box-shadow 0.3s;
+  -moz-transition: box-shadow 0.3s;
+  transition: box-shadow 0.3s;
+}
+.no-touch .cd-btn:hover {
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
+}
+
+/* -------------------------------- 
+
+Typography
+
+-------------------------------- */
+h1 {
+  font-size: 2.6rem;
+  line-height: 1;
+  margin-bottom: 1em;
+  font-family: "IM Fell Double Pica", serif;
+  font-style: italic;
+}
+@media only screen and (min-width: 768px) {
+  h1 {
+    font-size: 5rem;
+  }
+}
+
+/* -------------------------------- 
+
+Main Content
+
+-------------------------------- */
+.cd-main-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100vh;
+  /* vertically align its content */
+  display: table;
+  background-color: #e4dcca;
+}
+.cd-main-content .center {
+  /* vertically align inside parent element */
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}
+
+/* -------------------------------- 
+
+Modal window 
+
+-------------------------------- */
+.cd-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 3;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background: #402f44 url(../img/modal-bg.jpg) no-repeat center center;
+  background-size: cover;
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
+  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
+  transition: opacity 0.3s 0s, visibility 0s 0.3s;
+}
+.cd-modal .modal-content {
+  height: 100%;
+  overflow-y: auto;
+  padding: 3em 5%;
+  color: #e4dcca;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.cd-modal h1 {
+  text-align: center;
+}
+.cd-modal h1::after {
+  /* ink/brush separation */
+  content: '';
+  display: block;
+  width: 130px;
+  height: 18px;
+  background: url(../img/ink-separation.svg) no-repeat center center;
+  margin: .2em auto 0;
+}
+.cd-modal p {
+  line-height: 1.6;
+  margin: 2em auto;
+  max-width: 800px;
+}
+.cd-modal .modal-close {
+  /* 'X' icon */
+  position: absolute;
+  z-index: 1;
+  top: 20px;
+  right: 5%;
+  height: 45px;
+  width: 45px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.3) url(../img/cd-icon-close.svg) no-repeat center center;
+  /* image replacement */
+  overflow: hidden;
+  text-indent: 100%;
+  white-space: nowrap;
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transform: scale(0);
+  -moz-transform: scale(0);
+  -ms-transform: scale(0);
+  -o-transform: scale(0);
+  transform: scale(0);
+  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
+  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
+  transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
+}
+.no-touch .cd-modal .modal-close:hover {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.cd-modal.visible {
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: opacity 0.7s, visibility 0s;
+  -moz-transition: opacity 0.7s, visibility 0s;
+  transition: opacity 0.7s, visibility 0s;
+}
+.cd-modal.visible .modal-content {
+  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
+  -webkit-overflow-scrolling: touch;
+}
+.cd-modal.visible .modal-close {
+  visibility: visible;
+  opacity: 1;
+  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
+  -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
+  transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+@media only screen and (min-width: 1100px) {
+  .cd-modal .modal-content {
+    padding: 6em 5%;
+  }
+  .cd-modal .modal-close {
+    height: 60px;
+    width: 60px;
+  }
+  .cd-modal p {
+    font-size: 2rem;
+  }
+}
+
+/* -------------------------------- 
+
+Transition Layer 
+
+-------------------------------- */
+.cd-transition-layer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+}
+.cd-transition-layer .bg-layer {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translateY(-50%) translateX(-2%);
+  -moz-transform: translateY(-50%) translateX(-2%);
+  -ms-transform: translateY(-50%) translateX(-2%);
+  -o-transform: translateY(-50%) translateX(-2%);
+  transform: translateY(-50%) translateX(-2%);
+  /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
+  height: 100%;
+  /* our sprite is composed of 25 frames */
+  width: 2500%;
+  background: url(../img/ink.png) no-repeat 0 0;
+  background-size: 100% 100%;
+}
+.cd-transition-layer.visible {
+  opacity: 1;
+  visibility: visible;
+}
+.cd-transition-layer.opening .bg-layer {
+  -webkit-animation: cd-sequence 0.8s steps(24);
+  -moz-animation: cd-sequence 0.8s steps(24);
+  animation: cd-sequence 0.8s steps(24);
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+.cd-transition-layer.closing .bg-layer {
+  -webkit-animation: cd-sequence-reverse 0.8s steps(24);
+  -moz-animation: cd-sequence-reverse 0.8s steps(24);
+  animation: cd-sequence-reverse 0.8s steps(24);
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+}
+.no-cssanimations .cd-transition-layer {
+  display: none;
+}
+
+@-webkit-keyframes cd-sequence {
+  0% {
+    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
+    -webkit-transform: translateY(-50%) translateX(-2%);
+  }
+  100% {
+    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
+    -webkit-transform: translateY(-50%) translateX(-98%);
+  }
+}
+@-moz-keyframes cd-sequence {
+  0% {
+    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
+    -moz-transform: translateY(-50%) translateX(-2%);
+  }
+  100% {
+    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
+    -moz-transform: translateY(-50%) translateX(-98%);
+  }
+}
+@keyframes cd-sequence {
+  0% {
+    /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
+    -webkit-transform: translateY(-50%) translateX(-2%);
+    -moz-transform: translateY(-50%) translateX(-2%);
+    -ms-transform: translateY(-50%) translateX(-2%);
+    -o-transform: translateY(-50%) translateX(-2%);
+    transform: translateY(-50%) translateX(-2%);
+  }
+  100% {
+    /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
+    -webkit-transform: translateY(-50%) translateX(-98%);
+    -moz-transform: translateY(-50%) translateX(-98%);
+    -ms-transform: translateY(-50%) translateX(-98%);
+    -o-transform: translateY(-50%) translateX(-98%);
+    transform: translateY(-50%) translateX(-98%);
+  }
+}
+@-webkit-keyframes cd-sequence-reverse {
+  0% {
+    -webkit-transform: translateY(-50%) translateX(-98%);
+  }
+  100% {
+    -webkit-transform: translateY(-50%) translateX(-2%);
+  }
+}
+@-moz-keyframes cd-sequence-reverse {
+  0% {
+    -moz-transform: translateY(-50%) translateX(-98%);
+  }
+  100% {
+    -moz-transform: translateY(-50%) translateX(-2%);
+  }
+}
+@keyframes cd-sequence-reverse {
+  0% {
+    -webkit-transform: translateY(-50%) translateX(-98%);
+    -moz-transform: translateY(-50%) translateX(-98%);
+    -ms-transform: translateY(-50%) translateX(-98%);
+    -o-transform: translateY(-50%) translateX(-98%);
+    transform: translateY(-50%) translateX(-98%);
+  }
+  100% {
+    -webkit-transform: translateY(-50%) translateX(-2%);
+    -moz-transform: translateY(-50%) translateX(-2%);
+    -ms-transform: translateY(-50%) translateX(-2%);
+    -o-transform: translateY(-50%) translateX(-2%);
+    transform: translateY(-50%) translateX(-2%);
+  }
+}

img/cd-icon-close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24"><g  transform="translate(0, 0)">
+<path fill="#e4dcca" d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3&#10;&#9;c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3&#10;&#9;c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"/>
+</g></svg>

img/ink-separation.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="130px" height="18px" viewBox="0 0 130 18" style="enable-background:new 0 0 130 18;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E4DCC9;}
+</style>
+<path class="st0" d="M113.5,2.7c-0.4,0-0.7-0.1-1.1-0.1c0.2,0,0.4,0.1,0.5,0.2C113.2,2.9,113.3,2.8,113.5,2.7z"/>
+<path class="st0" d="M111.4,2.5c-0.1,0-0.1,0-0.2,0c-0.1,0-0.1,0-0.2,0L111.4,2.5z"/>
+<path class="st0" d="M109.6,2.6c0.3,0,0.7,0,1,0C110.2,2.6,109.9,2.5,109.6,2.6z"/>
+<path class="st0" d="M111.1,2.8c-0.1-0.1-0.2-0.2,0-0.2c0,0,0,0,0,0c-0.2,0-0.4,0-0.6,0.1C110.7,2.7,110.9,2.7,111.1,2.8z"/>
+<path class="st0" d="M111.1,2.8c0.1,0.1,0.3,0.2,0.3,0.2C111.3,2.9,111.2,2.9,111.1,2.8z"/>
+<path class="st0" d="M110.5,4.8c-0.2,0.1-0.1-0.5-0.5-0.4c-0.9,0.1-1.6,0.4-2.5,0.4c-0.4,0.1-0.9-0.5-1.3-0.4
+	c-0.9,0.1-3.1,0.9-1.8,0.9c2-0.1,3.3-0.2,5.1-0.2c1.5-0.2,2.9-0.4,4.3-0.6c0.4,0,0.8,0.1,1.2,0.1c-0.5-0.1-1-0.2-1.6-0.3
+	C112.6,4,111.7,4.7,110.5,4.8z"/>
+<path class="st0" d="M105.6,3c-2.5,0-4.9-0.1-7.1-0.1c-0.2,0.1-0.3,0.2-0.5,0.2C97.7,3,97.5,3,97.3,2.9c-0.3,0-0.7,0-1,0
+	c-0.1,0-0.2,0-0.4,0.1l0,0c-0.2,0.1-0.1,0.2,0,0.2c0.1,0.1,0.3,0.1,0.4,0.2c-0.1,0-0.2-0.1-0.4-0.2c-0.2-0.1-0.3-0.1-0.5-0.2
+	c-0.3,0-0.6,0.1-1,0c0.4-0.1,0.7-0.1,1,0C95.6,3,95.8,3,96,3c0.1,0,0.1,0,0.2-0.1c-0.8,0-1.5,0-2.3,0c-0.2,0-0.3,0-0.5,0.1
+	c-0.6,0.1-1.1,0.2-1.4-0.1c-0.1,0-0.3,0-0.4,0l0.1,0.1c-0.1,0-0.1,0-0.2-0.1c-0.6,0-1.2,0-1.7,0c-0.4,0.1-0.8,0.3-1.1,0.4
+	c0,0-0.3-0.2-0.4-0.3C88,3,87.8,3.1,87.5,3.2c0.3,0.2,0.6,0.3,0.9,0.5c0.4,0.3,0.8-0.6,1.3-0.1c-0.5-0.5-0.9,0.4-1.3,0.1
+	c-0.3-0.1-0.6-0.3-0.9-0.5c-0.5,0.1-1.3,0-1.8-0.2c0.7-0.3,1.3-0.1,1.8,0.2C87.8,3.1,88,3,88.2,2.9c0.1,0.1,0.4,0.3,0.4,0.3
+	c0.4-0.1,0.8-0.2,1.1-0.4c-1.1,0-2.3,0-3.4,0c-7.5,0-14.5,0.5-22.3,1C59.8,4,55.7,4.3,51.7,4.5c-4,0.2-7.8,0.9-11.6,1.5
+	c-3.8,0.6-7.6,1.3-11.8,1.6c-0.8,0.1-1.7,0.2-2.8,0.5c-1,0.3-2.1,0.5-3.2,0.9c-2.2,0.7-4.3,1.6-5.7,2.3c-1.8,1.3-1.8,2.3-1.4,3
+	c0.4,0.7,1.2,1,1.3,1c1.5,0.4,2.6,0.3,3.9-0.1c0.7-0.2,1.4-0.4,2.3-0.6c0.9-0.2,1.9-0.4,3.2-0.4c-1.7,0.1-1.2-0.4,0.1-0.8
+	c0.7-0.2,1.6-0.5,2.5-0.6c0.9-0.1,1.9-0.1,2.8,0c2.5,0.5,5.2,0.1,8-0.6c2.8-0.6,5.8-1.5,8.6-1.6c1.4-0.1,2.9-0.4,4.6-0.6
+	c8.8-0.4,16.8-2.2,26-2.6c2.4-0.2,4.6-0.8,6.6-1.2c1.5-0.2,3.1,0.1,4.3,0c1.9-0.1,3.6-0.3,5.2-0.6c-1.8,0.1-3.1,0.3-5,0.5
+	c-1.3,0.1,0.9-0.8,1.8-1c0.4-0.1,1,0.5,1.3,0.3c0.8,0,1.6-0.3,2.4-0.5c0.4-0.1,0.3,0.4,0.5,0.4c1.2-0.1,2.1-0.9,2.9-0.7
+	c0.6,0.1,1.1,0.2,1.6,0.3c0.3,0,0.6,0.1,1,0c0.2,0,0.4-0.1,0.6-0.1c-0.2-0.2-0.2-0.4-0.3-0.6c0.3,0,0.8,0.2,1.1,0.2
+	c-0.3,0-0.8-0.2-1.1-0.2c0.1,0.2,0.1,0.4,0.3,0.6c1.6-0.3,3.4-0.6,5.1-0.8c0,0,0,0,0-0.1c-1,0-1.9,0-3-0.4c0.4,0.1,0.4,0.3-0.1,0.3
+	c-0.1-0.1-0.3-0.2-0.4-0.3c0.9-0.2,1.8-0.3,2.6,0.1c0,0,0.4-0.1,0.6-0.2c0.3,0.1,0.3,0.3,0.3,0.4c0.2,0,0.4,0,0.6,0
+	C106.8,3.4,105.6,3,105.6,3z"/>
+<path class="st0" d="M95.4,3c0.1,0,0.3,0,0.5-0.1c-0.6,0-1.3,0-1.9,0C94.3,3.2,94.8,3.1,95.4,3z"/>
+</svg>

index.html

@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en" class="no-js">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	
+	<link href='https://fonts.googleapis.com/css?family=PT+Sans:400,700|IM+Fell+Double+Pica:400italic' rel='stylesheet' type='text/css'>
+	
+	<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
+	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
+	<script src="js/modernizr.js"></script> <!-- Modernizr -->
+  	
+	<title>Ink Transition Effect | CodyHouse</title>
+</head>
+<body>
+<main class="cd-main-content">
+	<div class="center">
+		<h1>Ink Transition Effect</h1>
+		<a href="#0" class="cd-btn cd-modal-trigger">Start Effect</a>
+	</div>
+</main> <!-- .cd-main-content -->
+
+<div class="cd-modal">
+	<div class="modal-content">
+		<h1>My Modal Content</h1>
+		
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! A rerum pariatur neque laborum earum, illum voluptatibus eum voluptatem fugiat, porro animi tempora? Sit harum nulla, nesciunt molestias, iusto aliquam aperiam est qui possimus reprehenderit ipsam ea aut assumenda inventore iste! Animi quaerat facere repudiandae earum quisquam accusamus tempora, delectus nesciunt, provident quae aliquam, voluptatum beatae quis similique in maiores repellat eligendi voluptas veniam optio illum vero! Eius, dignissimos esse eligendi veniam.
+		</p>
+
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis saepe amet sit fugit rerum, corporis minus vitae officia quaerat incidunt voluptate, blanditiis ea est quibusdam voluptas animi quasi totam magni, commodi praesentium. Possimus quam illo ipsam iste unde totam cupiditate deleniti, impedit assumenda hic eligendi natus tempora dolores quod mollitia ab non sunt eaque adipisci, suscipit quas aliquid officiis beatae. Necessitatibus voluptatibus, perferendis tenetur perspiciatis adipisci nesciunt eum ex fuga commodi iure numquam enim rem ullam labore nisi magni sint voluptatem quos! Eum iure exercitationem voluptates repellendus culpa doloremque laborum animi illum, sint fugit soluta possimus a fuga veritatis molestias corporis placeat illo pariatur dolor reiciendis earum, sapiente omnis. Placeat maiores omnis, porro officia, laborum eos. Fugiat mollitia inventore consequuntur odit eaque, rerum recusandae, eum sint molestiae consequatur culpa deserunt quae aliquid dolor tempora tenetur architecto repellendus enim quasi atque, odio voluptas. Tenetur repellendus explicabo ipsum inventore quia aut eos expedita necessitatibus asperiores blanditiis! Delectus nisi laudantium ipsum! Quasi blanditiis corrupti dicta maiores placeat laboriosam delectus ipsum facere voluptas, magnam voluptatibus, perferendis alias ullam saepe, perspiciatis recusandae voluptates, dolores praesentium?
+		</p>
+	</div> <!-- .modal-content -->
+
+	<a href="#0" class="modal-close">Close</a>
+</div> <!-- .cd-modal -->
+
+<div class="cd-transition-layer"> 
+	<div class="bg-layer"></div>
+</div> <!-- .cd-transition-layer -->
+	
+<script src="js/jquery-2.1.4.js"></script>
+<script src="js/main.js"></script> <!-- Resource jQuery -->
+</body>
+</html>

js/main.js

@@ -0,0 +1,62 @@
+jQuery(document).ready(function($){
+	//cache some jQuery objects
+	var modalTrigger = $('.cd-modal-trigger'),
+		transitionLayer = $('.cd-transition-layer'),
+		transitionBackground = transitionLayer.children(),
+		modalWindow = $('.cd-modal');
+
+	var frameProportion = 1.78, //png frame aspect ratio
+		frames = 25, //number of png frames
+		resize = false;
+
+	//set transitionBackground dimentions
+	setLayerDimensions();
+	$(window).on('resize', function(){
+		if( !resize ) {
+			resize = true;
+			(!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300) : window.requestAnimationFrame(setLayerDimensions);
+		}
+	});
+
+	//open modal window
+	modalTrigger.on('click', function(event){	
+		event.preventDefault();
+		transitionLayer.addClass('visible opening');
+		var delay = ( $('.no-cssanimations').length > 0 ) ? 0 : 600;
+		setTimeout(function(){
+			modalWindow.addClass('visible');
+		}, delay);
+	});
+
+	//close modal window
+	modalWindow.on('click', '.modal-close', function(event){
+		event.preventDefault();
+		transitionLayer.addClass('closing');
+		modalWindow.removeClass('visible');
+		transitionBackground.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
+			transitionLayer.removeClass('closing opening visible');
+			transitionBackground.off('webkitAnimationEnd oanimationend msAnimationEnd animationend');
+		});
+	});
+
+	function setLayerDimensions() {
+		var windowWidth = $(window).width(),
+			windowHeight = $(window).height(),
+			layerHeight, layerWidth;
+
+		if( windowWidth/windowHeight > frameProportion ) {
+			layerWidth = windowWidth;
+			layerHeight = layerWidth/frameProportion;
+		} else {
+			layerHeight = windowHeight*1.2;
+			layerWidth = layerHeight*frameProportion;
+		}
+
+		transitionBackground.css({
+			'width': layerWidth*frames+'px',
+			'height': layerHeight+'px',
+		});
+
+		resize = false;
+	}
+});

partials/_layout.scss

@@ -0,0 +1,27 @@
+// breakpoints
+   
+$S:     480px;   
+$M:     768px;     
+$L:     1100px;     
+
+// media queries
+
+@mixin MQ($canvas) {
+  @if $canvas == S {
+   @media only screen and (min-width: $S) { @content; } 
+  }
+  @else if $canvas == M {
+   @media only screen and (min-width: $M) { @content; } 
+  }
+  @else if $canvas == L {
+   @media only screen and (min-width: $L) { @content; } 
+  }
+}
+
+// super light grid - it works with the .cd-container class inside style.scss
+
+@mixin column($percentage, $float-direction:left) {
+  width: 100% * $percentage;
+  float: $float-direction;
+}
+

partials/_mixins.scss

@@ -0,0 +1,34 @@
+// center vertically and/or horizontally an absolute positioned element
+
+@mixin center($xy:xy) {
+  @if $xy == xy {
+    left: 50%;
+    top: 50%;
+    bottom: auto;
+    right: auto;
+    @include transform(translateX(-50%) translateY(-50%));
+  }
+  @else if $xy == x {
+    left: 50%;
+    right: auto;
+    @include transform(translateX(-50%));
+  }
+  @else if $xy == y {
+    top: 50%;
+    bottom: auto;
+    @include transform(translateY(-50%));
+  }
+}
+
+// border radius
+
+@mixin border-radius($radius:.25em) {
+  border-radius: $radius;
+}
+
+// antialiasing mode font rendering
+
+@mixin font-smoothing {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

partials/_variables.scss

@@ -0,0 +1,12 @@
+// colors
+
+$color-1: #242322; // Tuatara
+$color-2: #a5c4bc; // Opal
+$color-3: #ffffff; // White
+$color-4: #402f44; // Blackcurrant
+$color-5: #e4dcca; // Pearl Bush
+
+// fonts 
+
+$primary-font: 'PT Sans', sans-serif;
+$secondary-font: 'IM Fell Double Pica', serif;

scss/style.scss

@@ -0,0 +1,278 @@
+@import 'bourbon'; // http://bourbon.io/
+
+@import '../partials/variables'; // colors, fonts etc...
+
+@import '../partials/mixins'; // custom mixins
+
+@import '../partials/layout'; // responsive grid and media queries
+
+/* -------------------------------- 
+
+Primary style
+
+-------------------------------- */
+
+*, *::after, *::before {
+	box-sizing: border-box;
+}
+
+html {
+	font-size: 62.5%;
+}
+
+body {
+	font: {
+		size: 1.6rem;
+		family: $primary-font; // variables inside partials > _variables.scss
+	}
+	color: $color-1;
+	background-color: $color-3;
+}
+
+a {
+	color: $color-2;
+	text-decoration: none;
+}
+
+/* -------------------------------- 
+
+Patterns - reusable parts of our design
+
+-------------------------------- */
+
+.cd-btn {
+	display: inline-block;
+	padding: 1.6em 2.4em;
+	font-size: 1.4rem;
+	letter-spacing: .15em;	
+	color: $color-3;
+	font-weight: 700;
+	text-transform: uppercase;
+	background-color: $color-2;
+	box-shadow: 0 2px 10px rgba(#000, .08);
+	@include font-smoothing;
+	@include transition(box-shadow .3s);
+
+	.no-touch &:hover {
+		box-shadow: 0 6px 20px rgba(#000, .1);
+	}
+}
+
+/* -------------------------------- 
+
+Typography
+
+-------------------------------- */
+
+h1 {
+	font-size: 2.6rem;
+	line-height: 1;
+	margin-bottom: 1em;
+	font-family: $secondary-font;
+	font-style: italic;
+
+	@include MQ(M) {
+		font-size: 5rem;
+	}
+}
+
+/* -------------------------------- 
+
+Main Content
+
+-------------------------------- */
+
+.cd-main-content {
+	position: relative;
+	z-index: 1;
+	width: 100%;
+	height: 100vh;
+	/* vertically align its content */
+	display: table;
+	background-color: $color-5;
+
+	.center {
+		/* vertically align inside parent element */
+		display: table-cell;
+		vertical-align: middle;
+		text-align: center;
+	}
+}
+
+/* -------------------------------- 
+
+Modal window 
+
+-------------------------------- */
+
+.cd-modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 3;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+	background: $color-4 url(../img/modal-bg.jpg) no-repeat center center;
+	background-size: cover;
+	opacity: 0;
+	visibility: hidden;
+	@include transition(opacity .3s 0s, visibility 0s .3s);
+
+	.modal-content {
+		height: 100%;
+		overflow-y: auto;
+		padding: 3em 5%;
+		color: $color-5;
+		@include font-smoothing;
+	}
+
+	h1 {
+		text-align: center;
+
+		&::after {
+			/* ink/brush separation */
+			content: '';
+			display: block;
+			width: 130px;
+			height: 18px;
+			background: url(../img/ink-separation.svg) no-repeat center center;
+			margin: .2em auto 0;
+		}
+	}
+
+	p {
+		line-height: 1.6;
+		margin: 2em auto;
+		max-width: 800px;
+	}
+
+	.modal-close {
+		/* 'X' icon */
+		position: absolute;
+		z-index: 1;
+		top: 20px;
+		right: 5%;
+		height: 45px;
+		width: 45px;
+		border-radius: 50%;
+		background: rgba(#000, .3) url(../img/cd-icon-close.svg) no-repeat center center;
+		
+		/* image replacement */
+		overflow: hidden;
+		text-indent: 100%;
+		white-space: nowrap;
+		
+		visibility: hidden;
+		opacity: 0;
+		@include transform(scale(0));
+		@include transition(transform .3s 0s, visibility 0s .3s, opacity .3s 0s);
+
+		.no-touch &:hover {
+			background-color: rgba(#000, .5);
+		}
+	}
+
+	&.visible {
+		opacity: 1;
+		visibility: visible;
+		@include transition(opacity .7s, visibility 0s);
+
+		.modal-content {
+			/* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
+			-webkit-overflow-scrolling: touch;
+		}
+
+		.modal-close {
+			visibility: visible;
+			opacity: 1;
+			@include transition(transform .3s 0s, visibility 0s 0s, opacity .3s 0s);
+			@include transform(scale(1));
+		}
+	}
+
+	@include MQ(L) {
+		.modal-content {
+			padding: 6em 5%;
+		}
+
+		.modal-close { 
+			height: 60px;
+			width: 60px;
+		}
+
+		p {
+			font-size: 2rem;
+		}
+	}
+}
+
+/* -------------------------------- 
+
+Transition Layer 
+
+-------------------------------- */
+
+.cd-transition-layer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 2;
+	height: 100%;
+	width: 100%;
+	opacity: 0;
+	visibility: hidden;
+	overflow: hidden;
+
+	.bg-layer {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		@include transform(translateY(-50%) translateX(-2%));
+		/* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
+		height: 100%;
+		/* our sprite is composed of 25 frames */ 
+		width: 2500%;
+		background: url(../img/ink.png) no-repeat 0 0;
+		background-size: 100% 100%;
+	}
+
+	&.visible {
+		opacity: 1;
+		visibility: visible;
+	}
+
+	&.opening .bg-layer {
+		@include animation(cd-sequence .8s steps(24));
+		@include animation-fill-mode(forwards);
+	}
+
+	&.closing .bg-layer {
+		@include animation(cd-sequence-reverse .8s steps(24));
+		@include animation-fill-mode(forwards);
+	}
+
+	.no-cssanimations & {
+		display: none;
+	}
+}
+
+@include keyframes(cd-sequence) {
+	0% {
+		/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
+		@include transform(translateY(-50%) translateX(-2%));
+	}
+	100% {
+		/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
+   		@include transform(translateY(-50%) translateX(-98%));
+	}
+}
+
+@include keyframes(cd-sequence-reverse) {
+	0% {
+		@include transform(translateY(-50%) translateX(-98%));
+	}
+	100% {
+   		@include transform(translateY(-50%) translateX(-2%));
+	}
+}