add example from codedrops

css/common.css

@@ -0,0 +1,600 @@
+*,
+*::after,
+*::before {
+	box-sizing: border-box;
+}
+
+body {
+	font-family: 'Playfair Display', serif;
+	color: #3f3f45;
+	background: #f0f0f3;
+	transition: background-color 0.8s;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+a {
+	color: #777785;
+	outline: none;
+	display: inline-block;
+	position: relative;
+	text-decoration: none;
+	-webkit-transition: color 0.2s;
+	transition: color 0.2s;
+}
+
+a.link::after {
+	content: '';
+	position: absolute;
+	top: 105%;
+	width: 100%;
+	border-bottom: 2px solid;
+	left: 0;
+	-webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
+	transition: opacity 0.2s, -webkit-transform 0.2s;
+}
+
+a.link:hover::after {
+	opacity: 0;
+	-webkit-transform: translate3d(0,3px,0);
+	transform: translate3d(0,3px,0);
+}
+
+a:hover,
+a:focus {
+	text-decoration: none;
+	color: #3f3f45;
+}
+
+main {
+	position: relative;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	overflow-x: hidden;
+	width: 100vw;
+	height: 100vh;
+}
+
+.hidden {
+	position: absolute;
+	overflow: hidden;
+	width: 0;
+	height: 0;
+	pointer-events: none;
+}
+
+
+/* Icons */
+
+.icon {
+	display: block;
+	width: 1.5em;
+	height: 1.5em;
+	margin: 0 auto;
+	fill: currentColor;
+}
+
+
+/* Header */
+
+.codrops-header {
+	position: relative;
+	z-index: 1000;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-flex-direction: row;
+	-ms-flex-direction: row;
+	flex-direction: row;
+	-webkit-flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
+	-webkit-justify-content: space-between;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+	-webkit-align-items: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-flex: none;
+	-ms-flex: none;
+	flex: none;
+	width: 100%;
+	padding: 0.5em 1.25em 0.5em 0.75em;
+	background: #fff;
+}
+
+.codrops-header__main {
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-flex-direction: row;
+	-ms-flex-direction: row;
+	flex-direction: row;
+	-webkit-flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
+	-webkit-align-items: center;
+	-ms-flex-align: center;
+	align-items: center;
+}
+
+.codrops-header__title {
+	font-size: 1.5em;
+	font-weight: 700;
+	margin: 0;
+	line-height: 0.8;
+	padding: 0 0 0.1em 0;
+}
+
+.codrops-header__tagline {
+	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
+	padding: 0 0.5em 0 5vw;
+	margin: 0 auto 0 0;
+}
+
+/* Top Navigation Style */
+
+.codrops-links {
+	position: relative;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-justify-content: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	text-align: center;
+	white-space: nowrap;
+}
+
+.codrops-links::after {
+	content: '';
+	position: absolute;
+	top: 15%;
+	left: 50%;
+	width: 2px;
+	height: 70%;
+	opacity: 0.7;
+	background: rgba(0, 0, 0, 0.25);
+	-webkit-transform: rotate3d(0, 0, 1, 22.5deg);
+	transform: rotate3d(0, 0, 1, 22.5deg);
+}
+
+.codrops-icon {
+	display: inline-block;
+	margin: 0.5em;
+	padding: 0.5em;
+}
+
+/* Demo links */
+
+.codrops-demos {
+	margin: 0.25em 0;
+	padding: 0 1em;
+	font-weight: bold;
+}
+
+.codrops-demos a {
+	display: inline-block;
+	margin: 0 0.5em 0 0;
+}
+
+.codrops-demos a.current-demo {
+	color: #333;
+}
+
+.codrops-demos a.current-demo::after {
+	display: none;
+}
+
+
+/* Calendar */
+
+.calendar-wrap {
+	position: relative;
+}
+
+.js .calendar-wrap {
+	-webkit-flex: 1;
+	-ms-flex: 1;
+	flex: 1;
+}
+
+.calendar {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	margin: 0 auto;
+	overflow: hidden;
+	/* we always want 7 boxes in a row */
+	padding: 3em calc((100vw - (7 * (7vw + 1vw)))/2);
+}
+
+.js .calendar {
+	position: absolute;
+	-webkit-perspective: 1000px;
+	perspective: 1000px;
+	padding: 0 calc((100vw - (7 * (7vw + 1vw)))/2) 5em;
+}
+
+.no-js .calendar {
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
+	-webkit-align-content: center;
+	-ms-flex-line-pack: center;
+	align-content: center;
+	-webkit-align-items: center;
+	-ms-flex-align: center;
+	align-items: center;
+}
+
+
+/* Cubes container */
+
+.cubes {
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	flex-wrap: wrap;
+	-webkit-align-content: center;
+	-ms-flex-line-pack: center;
+	align-content: center;
+	-webkit-align-items: center;
+	-ms-flex-align: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+
+
+/* Single cube */
+
+.cube {
+	position: relative;
+	display: block;
+	-webkit-flex: none;
+	-ms-flex: none;
+	flex: none;
+	width: 7vw;
+	height: 7vw;
+	margin: 0.5vw;
+}
+
+.js .cube {
+	-webkit-flex: auto;
+	-ms-flex: auto;
+	flex: auto;
+	-webkit-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+}
+
+
+/* push to the right weekday (we have to push 3 boxes) */
+
+.js .cube:first-child {
+	margin-left: calc(((7vw + 1vw) * 3) + 0.5vw);
+}
+
+.js .cube:not(.cube--inactive) {
+	cursor: pointer;
+}
+
+
+/* cube sides and rotations */
+
+.cube__side {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: inherit;
+	height: inherit;
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+}
+
+.cube__side--front {
+	position: relative;
+	-webkit-transform: translateZ(3.5vw);
+	transform: translateZ(3.5vw);
+}
+
+.cube__side--back {
+	-webkit-transform: rotateY(180deg) translateZ(3.5vw);
+	transform: rotateY(180deg) translateZ(3.5vw);
+}
+
+.cube__side--right {
+	-webkit-transform: rotateY(90deg) translateZ(3.5vw);
+	transform: rotateY(90deg) translateZ(3.5vw);
+}
+
+.cube__side--left {
+	-webkit-transform: rotateY(-90deg) translateZ(3.5vw);
+	transform: rotateY(-90deg) translateZ(3.5vw);
+}
+
+.cube__side--top {
+	-webkit-transform: rotateX(90deg) translateZ(3.5vw);
+	transform: rotateX(90deg) translateZ(3.5vw);
+}
+
+.cube__side--bottom {
+	-webkit-transform: rotateX(-90deg) translateZ(3.5vw);
+	transform: rotateX(-90deg) translateZ(3.5vw);
+}
+
+
+/* Cube counters and numbers */
+
+
+/* Without JS we want an auto counter */
+
+.no-js .calendar {
+	counter-reset: boxes-counter;
+}
+
+.no-js .cube {
+	counter-increment: boxes-counter;
+}
+
+.no-js .cube::after {
+	content: counter(boxes-counter);
+}
+
+.cube__number,
+.no-js .cube::after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+}
+
+
+/* canvas for snow */
+
+.background {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	min-height: 100vh;
+	transition: background-color 0.8s;
+}
+
+
+/* title that appears on hover */
+
+.title {
+	font-size: 3.25vw;
+	font-weight: 700;
+	position: absolute;
+	right: 3vw;
+	bottom: 3vw;
+	margin: 0;
+	white-space: nowrap;
+	pointer-events: none;
+	opacity: 0;
+}
+
+
+/* number before title */
+
+.title::before {
+	content: attr(data-number);
+	display: inline-block;
+	margin-right: 0.5em;
+	color: white;
+}
+
+
+/* letter span for animations */
+
+[class*='letter'] {
+	position: relative;
+	display: inline-block;
+	white-space: pre;
+}
+
+[class*='letter']:blank {
+	padding-right: 10em;
+}
+
+
+/* content wrap */
+
+.content {
+	position: relative;
+}
+
+.js .content {
+	position: absolute;
+	top: 0;
+	left: 0;
+	overflow: hidden;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+
+/* individual content block */
+
+.content__block {
+	padding: 10vh 5vw;
+}
+
+.js .content__block {
+	padding: 20vh 5vw;
+	position: absolute;
+	z-index: 100;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	-webkit-flex-direction: column;
+	-ms-flex-direction: column;
+	flex-direction: column;
+	-webkit-justify-content: center;
+	-ms-flex-pack: center;
+	justify-content: center;
+	width: 85%;
+	height: 100%;
+	padding: 3em 0 6em 7vw;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	-webkit-touch-callout: none;
+	-khtml-user-select: none;
+}
+
+.content__title {
+	font-size: 7vw;
+	line-height: 0.85;
+	margin: 0;
+}
+
+.content__description {
+	font-size: 2.25vw;
+	margin: 1em 0;
+	padding: 0 0 0 5vw;
+}
+
+.content__meta {
+	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
+	margin: 0;
+	padding: 0 0 0 2vw;
+}
+
+.content__meta::before {
+	content: '\2014';
+}
+
+.content__number {
+	position: absolute;
+}
+
+.btn-back {
+	font-size: 2em;
+	line-height: 2;
+	position: absolute;
+	z-index: 100;
+	right: 0;
+	bottom: 0;
+	width: 2em;
+	margin: 0;
+	margin: 1em;
+	padding: 0;
+	pointer-events: auto;
+	color: currentColor;
+	border: 0;
+	border: 2px solid;
+	background: none;
+}
+
+.btn-back:focus {
+	outline: none;
+}
+
+.no-js .content__number,
+.no-js .btn-back {
+	display: none;
+}
+
+.js .content__block,
+.js .content__description,
+.js .content__meta,
+.js .content__number,
+.js .btn-back {
+	opacity: 0;
+}
+
+.js .content__block--current {
+	pointer-events: auto;
+	opacity: 1;
+}
+
+@media screen and (max-width: 50.75em) {
+	.calendar {
+		padding: 3em calc((100vw - (7 * (14vw + 1vw)))/2);
+	}
+	.js .calendar {
+		padding: 0 calc((100vw - (7 * (12vw + 1vw)))/2) 5em;
+	}
+	.cube {
+		width: 12vw;
+		height: 12vw;
+	}
+	/* push to the right weekday if in big view (we have to push 3 boxes) */
+	.js .cube:first-child {
+		margin-left: calc(((12vw + 1vw) * 3) + 0.5vw);
+	}
+	.cube__side--front {
+		-webkit-transform: translateZ(6vw);
+		transform: translateZ(6vw);
+	}
+	.cube__side--back {
+		-webkit-transform: rotateY(180deg) translateZ(6vw);
+		transform: rotateY(180deg) translateZ(6vw);
+	}
+	.cube__side--right {
+		-webkit-transform: rotateY(90deg) translateZ(6vw);
+		transform: rotateY(90deg) translateZ(6vw);
+	}
+	.cube__side--left {
+		-webkit-transform: rotateY(-90deg) translateZ(6vw);
+		transform: rotateY(-90deg) translateZ(6vw);
+	}
+	.cube__side--top {
+		-webkit-transform: rotateX(90deg) translateZ(6vw);
+		transform: rotateX(90deg) translateZ(6vw);
+	}
+	.cube__side--bottom {
+		-webkit-transform: rotateX(-90deg) translateZ(6vw);
+		transform: rotateX(-90deg) translateZ(6vw);
+	}
+	.title {
+		font-size: 5vw;
+	}
+	.content__description {
+		font-size: 1.15em;
+		padding: 0 0 0 0.5em;
+	}
+	.js .content__block {
+		padding: 2em;
+		width: 100%;
+	}
+	.btn-back {
+		font-size: 1.25em;
+		bottom: auto;
+		top: 0;
+		margin: 0.5em;
+	}
+}
+
+@media screen and (max-width: 26em) {
+	.codrops-header {
+		font-size: 0.75em;
+	}
+	.codrops-header__tagline {
+		display: none;
+	}
+	.codrops-header__title {
+		font-size: 1.5em;
+	}
+	.codrops-demos {
+		width: 100%;
+		margin: 0;
+		padding: 0.5em 1em;
+	}
+}

css/pater.css

@@ -0,0 +1,168 @@
+
+.pater {
+	position: fixed;
+	width: 320px;
+	height: auto;
+	bottom: 0;
+	left: 0;
+	padding: 1em 2em 2em 2em;
+	font-family: 'Helvetica', Arial, sans-serif;
+	color: #000;
+	font-size: 0.85em;
+	pointer-events: none;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	z-index: 10000;
+}
+
+.pater:hover {
+	pointer-events: auto;
+}
+
+.pater__title {
+	line-height: 1;
+	position: relative;
+	z-index: 10;
+	padding: 10px 0 8px 52px;
+	cursor: default;
+	color: #262628;
+	background: url(../img/sponsor/webydo-logo.png) no-repeat 0% 50%;
+	-webkit-transform: translateY(40px);
+	transform: translateY(40px);
+	opacity: 0;
+	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
+	transition: transform 0.3s, opacity 0.3s;
+}
+
+.pater:hover .pater__title {
+	opacity: 1;
+	-webkit-transform: translateY(0);
+	transform: translateY(0);
+}
+
+.pater__hidden {
+	position: relative;
+	z-index: 100;
+	opacity: 0;
+	-webkit-transition: opacity 0.3s;
+	transition: opacity 0.3s;
+}
+
+.pater:hover .pater__hidden {
+	opacity: 1;
+}
+
+.pater__description {
+	line-height: 1.2;
+	color: #747474;
+	cursor: default;
+}
+
+.pater__sponsor {
+	font-size: 0.875em;
+	position: relative;
+	display: block;
+	z-index: 10;
+	cursor: default;
+	color: #262628;
+	-webkit-transform: translate3d(139px,0px,0);
+	transform: translate3d(139px,0px,0);
+	-webkit-transition: -webkit-transform 0.3s, color 0.3s;
+	transition: transform 0.3s, color 0.3s;
+}
+
+.pater:hover .pater__sponsor {
+	color: #262628;
+	-webkit-transform: translate3d(0,0,0);
+	transform: translate3d(0,0,0);
+}
+
+.pater__button {
+	background: #fec841;
+	color: #262628;
+	cursor: pointer;
+	padding: 0.65em 1.25em;
+	border-radius: 1.5em;
+	display: inline-block;
+	position: absolute;
+	right: 0;
+	top: 100%;
+	margin: 0.5em 0 0;
+	z-index: 100;
+	line-height: 1;
+	-webkit-transition: background-color 0.2s, color 0.2s;
+	transition: background-color 0.2s, color 0.2s;
+}
+
+.pater__button:hover {
+	background: #000;
+	color: #fff;
+}
+
+.pater__effect {
+	position: absolute;
+	pointer-events: auto;
+	width: 260px;
+	top: -4.5em;
+	left: 0;
+	-webkit-transform: rotate(-22.5deg);
+	transform: rotate(-22.5deg);
+}
+
+.pater__effect img {
+	display: block;
+	float: left;
+	position: relative;
+	-webkit-transition: -webkit-transform 0.3s;
+	transition: transform 0.3s;
+}
+
+.pater__effect img:nth-child(2) {
+	margin: 4em 0 0 -3em;
+}
+
+.pater__effect img:nth-child(3) {
+	margin: -7em 0 0 0.5em;
+}
+
+.pater:hover .pater__effect img:nth-child(1) {
+	-webkit-transform: translate3d(0,-110px,0);
+	transform:  translate3d(0,-110px,0);
+}
+
+.pater:hover .pater__effect img:nth-child(2) {
+	-webkit-transform: translate3d(0,-130px,0);
+	transform: translate3d(0,-130px,0);
+}
+
+.pater:hover .pater__effect img:nth-child(3) {
+	-webkit-transform: translateY(55px);
+	transform: translateY(55px);
+}
+
+.pater-responsive {
+	position: fixed;
+	display: none;
+	bottom: 0;
+	width: 100%;
+	left: 0;
+	z-index: 1000;
+	font-size: 0.85em;
+	padding: 1.5em 1em 1.5em 5em;
+	color: #000;
+	font-family: 'Helvetica Neue', Arial, sans-serif;
+	background: #fff url(../img/sponsor/webydo-logo.png) no-repeat 0.75em 50%;
+}
+
+@media screen and (max-width: 50.75em) {
+	.pater {
+		display: none;
+	}
+	.pater-responsive {
+		display: block;
+	}
+}

css/style1.css

@@ -0,0 +1,70 @@
+.cube__side,
+.no-js .cube {
+	border: 0.75vw solid #fff;
+	outline: 1px solid #fff;
+	background: #f0f0f0 url(../img/mandala.png) no-repeat center center;
+}
+
+.cube:not(.cube--inactive):nth-child(2n) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(2n) {
+	background-image: url(../img/mandala2.png);
+}
+
+.cube:not(.cube--inactive):nth-child(3n) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(3n) {
+	background-image: url(../img/mandala3.png);
+}
+
+.cube--inactive .cube__side,
+.no-js .cube--inactive {
+	background: #e1e0e0;
+}
+
+
+/* With JS we insert a number span into the cube */
+
+.cube__number,
+.no-js .cube::after {
+	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
+	font-weight: 700;
+	line-height: 2.5;
+	width: 2em;
+	height: 2em;
+	padding: 0 0 0 0.25em;
+	text-align: center;
+	letter-spacing: -0.05em;
+	color: #fff;
+	border-radius: 100% 0 0 0;
+	background: #f8af8d;
+}
+
+.cube:nth-child(2n):not(.cube--inactive) .cube__number,
+.no-js .cube:nth-child(2n):not(.cube--inactive)::after {
+	background: #f8d18d;
+}
+
+.cube:nth-child(3n):not(.cube--inactive) .cube__number,
+.no-js .cube:nth-child(3n):not(.cube--inactive)::after {
+	background: #8df88d;
+}
+
+.cube--inactive .cube__number,
+.no-js .cube--inactive::after {
+	background: #aaa;
+}
+
+.js .content__block {
+	text-align: right;
+}
+
+.content__number {
+	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
+	font-size: 40vw;
+	font-weight: bold;
+	line-height: 0.5;
+	right: 0;
+	bottom: 30vh;
+	text-indent: -0.175em;
+	letter-spacing: -0.175em;
+	color: #fff;
+}

css/style2.css

@@ -0,0 +1,204 @@
+body {
+	font-family: 'Montserrat', sans-serif;
+}
+
+.cube__side,
+.no-js .cube {
+	border: 10px solid;
+	outline: 1px solid;
+	background-color: currentColor;
+	background-blend-mode: soft-light;
+}
+
+.cube:not(.cube--inactive):nth-child(1) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(1) {
+	background-image: url(../img/1.png);
+	color: #f44336;
+}
+
+.cube:not(.cube--inactive):nth-child(2) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(2) {
+	background-image: url(../img/2.png);
+	color: #e91e63;
+}
+
+.cube:not(.cube--inactive):nth-child(3) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(3) {
+	background-image: url(../img/3.png);
+	color: #9c27b0;
+}
+
+.cube:not(.cube--inactive):nth-child(4) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(4) {
+	background-image: url(../img/4.png);
+	color: #673ab7;
+}
+
+.cube:not(.cube--inactive):nth-child(5) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(5) {
+	background-image: url(../img/5.png);
+	color: #3f51b5;
+}
+
+.cube:not(.cube--inactive):nth-child(6) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(6) {
+	background-image: url(../img/6.png);
+	color: #2196f3;
+}
+
+.cube:not(.cube--inactive):nth-child(7) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(7) {
+	background-image: url(../img/7.png);
+	color: #03a9f4;
+}
+
+.cube:not(.cube--inactive):nth-child(8) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(8) {
+	background-image: url(../img/8.png);
+	color: #00bcd4;
+}
+
+.cube:not(.cube--inactive):nth-child(9) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(9) {
+	background-image: url(../img/9.png);
+	color: #009688;
+}
+
+.cube:not(.cube--inactive):nth-child(10) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(10) {
+	background-image: url(../img/10.png);
+	color: #4caf50;
+}
+
+.cube:not(.cube--inactive):nth-child(11) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(11) {
+	background-image: url(../img/11.png);
+	color: #8bc34a;
+}
+
+.cube:not(.cube--inactive):nth-child(12) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(12) {
+	background-image: url(../img/12.png);
+	color: #cddc39;
+}
+
+.cube:not(.cube--inactive):nth-child(13) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(13) {
+	background-image: url(../img/13.png);
+	color: #ffeb3b;
+}
+
+.cube:not(.cube--inactive):nth-child(14) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(14) {
+	background-image: url(../img/14.png);
+	color: #ffc107;
+}
+
+.cube:not(.cube--inactive):nth-child(15) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(15) {
+	background-image: url(../img/15.png);
+	color: #ff9800;
+}
+
+.cube:not(.cube--inactive):nth-child(16) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(16) {
+	background-image: url(../img/16.png);
+	color: #ff5722;
+}
+
+.cube:not(.cube--inactive):nth-child(17) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(17) {
+	background-image: url(../img/17.png);
+	color: #795548;
+}
+
+.cube:not(.cube--inactive):nth-child(18) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(18) {
+	background-image: url(../img/18.png);
+	color: #564545;
+}
+
+.cube:not(.cube--inactive):nth-child(19) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(19) {
+	background-image: url(../img/19.png);
+	color: #607d8b;
+}
+
+.cube:not(.cube--inactive):nth-child(20) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(20) {
+	background-image: url(../img/20.png);
+	color: #405d6b;
+}
+
+.cube:not(.cube--inactive):nth-child(21) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(21) {
+	background-image: url(../img/21.png);
+	color: #9e9e9e;
+}
+
+.cube:not(.cube--inactive):nth-child(22) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(22) {
+	background-image: url(../img/22.png);
+	color: #70737d;
+}
+
+.cube--inactive .cube__side,
+.no-js .cube--inactive {
+	background: #2e2e37;
+}
+
+
+/* With JS we insert a number span into the cube */
+
+.cube__number,
+.no-js .cube::after {
+	bottom: auto;
+	top: 0.15em;
+	left: 0.25em;
+	right: auto;
+	line-height: 1;
+	font-size: 2em;
+	color: #fff;
+	text-align: center;
+	font-weight: bold;
+	text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
+}
+
+
+@media screen and (max-width: 50.75em) {
+	.cube__number,
+	.no-js .cube::after {
+		font-size: 1em;
+	}
+}
+
+.js .content__block {
+	width: 100%;
+	text-align: center;
+	left: 0;
+	padding: 2em;
+}
+
+.js .content__description {
+	padding: 0;
+	max-width: 30em;
+	margin: 2em auto 0.5em;
+}
+
+.js .content__meta {
+	padding: 0;
+}
+
+.content__number {
+	color: #fff;
+	font-weight: bold;
+	line-height: 0.5;
+	letter-spacing: -0.175em;
+	text-indent: -0.175em;
+	font-size: 40vw;
+	left: 50%;
+	top: 50%;
+	-webkit-transform: translate3d(-50%, -50%, 0);
+	transform: translate3d(-50%, -50%, 0);
+	font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif;
+}

css/style3.css

@@ -0,0 +1,129 @@
+body {
+	background: #cc0019;
+	color: #fceeb8;
+	font-family: 'BioRhyme', serif;
+}
+
+a {
+	color: #fff;
+}
+
+a:hover,
+a:focus {
+	color: #fceeb8;
+}
+
+.codrops-header {
+	background: none;
+}
+
+.codrops-header__tagline,
+.codrops-demos,
+.content__description,
+.content__meta {
+	font-family: 'Roboto Condensed', sans-serif;
+}
+
+.codrops-demos a.current-demo {
+	color: #fceeb8;
+}
+
+.calendar {
+	-webkit-perspective: 2500px;
+	perspective: 2500px;
+}
+
+.cube__side,
+.no-js .cube {
+	border: 3px solid #fff;
+	outline: 1px solid #fff;
+	background: #f0f0f0 url(../img/c1.png) no-repeat center center;
+}
+
+.cube:not(.cube--inactive):nth-child(2n) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(2n) {
+	background-image: url(../img/c2.png);
+}
+
+.cube:not(.cube--inactive):nth-child(3n) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(3n) {
+	background-image: url(../img/c3.png);
+}
+
+.cube:not(.cube--inactive):nth-child(4n) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(4n) {
+	background-image: url(../img/c4.png);
+}
+
+.cube:not(.cube--inactive):nth-child(5n) .cube__side,
+.no-js .cube:not(.cube--inactive):nth-child(5n) {
+	background-image: url(../img/c5.png);
+}
+
+.cube--inactive .cube__side,
+.no-js .cube--inactive {
+	background: #e6e6e6;
+}
+
+
+/* With JS we insert a number span into the cube */
+
+.cube__number,
+.no-js .cube::after {
+	font-weight: 700;
+	color: #cc0019;
+	background: #fff;
+	width: 100%;
+	text-align: center;
+	top: 50%;
+	height: 1.5em;
+	line-height: 1.5;
+	bottom: auto;
+	margin: -0.75em 0 0;
+}
+
+.cube--inactive .cube__number,
+.no-js .cube--inactive::after {
+	color: #cac9c9;
+}
+
+.js .content__block {
+	width: 100%;
+	padding: 0 5vw 0 20vw;
+}
+
+.js .content__description {
+	padding: 0 0 0 4vw;
+}
+
+.content__number {
+	color: #000;
+	font-weight: bold;
+	line-height: 0.5;
+	letter-spacing: -0.175em;
+	font-size: 30vw;
+	left: -5vw;
+	bottom: 8vh;
+}
+
+.content__title {
+	font-size: 6vw;
+}
+
+.title {
+	color: #fceeb8;
+	right: auto;
+	left: 3vw;
+}
+
+@media screen and (max-width: 50.75em) {
+	.js .content__block {
+		padding: 4em 2em 0;
+		-webkit-justify-content: flex-start;
+		-ms-flex-pack: start;
+		justify-content: flex-start;
+	}
+	.content__number {
+		bottom: 30vh;
+	}
+}

js/textfx.js

@@ -0,0 +1,485 @@
+/**
+ * TextFx.js
+ * http://www.codrops.com
+ *
+ * Licensed under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Copyright 2016, Codrops
+ * http://www.codrops.com
+ */
+;(function(window) {
+
+	'use strict';
+
+	/**
+	 * Equation of a line.
+	 */
+	function lineEq(y2, y1, x2, x1, currentVal) {
+		// y = mx + b
+		var m = (y2 - y1) / (x2 - x1),
+			b = y1 - m * x1;
+
+		return m * currentVal + b;
+	}
+
+	function TextFx(el) {
+		this.el = el;
+		this._init();
+	}
+
+	TextFx.prototype.effects = {
+		'fx1' : {
+			in: {
+				duration: 1000,
+				delay: function(el, index) { return 75+index*40; },
+				easing: 'easeOutElastic',
+				elasticity: 650,
+				opacity: {
+					value: 1,
+					easing: 'easeOutExpo',
+				},
+				translateY: ['50%','0%']
+			},
+			out: {
+				duration: 400,
+				delay: function(el, index) { return index*40; },
+				easing: 'easeOutExpo',
+				opacity: 0,
+				translateY: '-100%'
+			}
+		},
+		'fx2' : {
+			in: {
+				duration: 700,
+				delay: function(el, index) { return index*50; },
+				easing: 'easeOutCirc',
+				opacity: 1,
+				translateX: function(el, index) {
+					return [(50+index*10),0]
+				}
+			},
+			out: {
+				duration: 0,
+				opacity: 0
+			}
+		},
+		'fx3' : {
+			in: {
+				duration: 800,
+				delay: function(el, index) { return index*50; },
+				easing: 'easeOutElastic',
+				opacity: 1,
+				translateY: function(el, index) {
+					return index%2 === 0 ? ['-80%', '0%'] : ['80%', '0%'];
+				}
+			},
+			out: {
+				duration: 800,
+				delay: function(el, index) { return index*50; },
+				easing: 'easeOutExpo',
+				opacity: 0,
+				translateY: function(el, index) {
+					return index%2 === 0 ? '80%' : '-80%';
+				}
+			}
+		},
+		'fx4' : {
+			in: {
+				duration: 700,
+				delay: function(el, index) { return (el.parentNode.children.length-index-1)*80; },
+				easing: 'easeOutElastic',
+				opacity: 1,
+				translateY: function(el, index) {
+					return index%2 === 0 ? ['-80%', '0%'] : ['80%', '0%'];
+				},
+				rotateZ: [90,0]
+			},
+			out: {
+				duration: 500,
+				delay: function(el, index) { return (el.parentNode.children.length-index-1)*80; },
+				easing: 'easeOutExpo',
+				opacity: 0,
+				translateY: function(el, index) {
+					return index%2 === 0 ? '80%' : '-80%';
+				},
+				rotateZ: function(el, index) {
+					return index%2 === 0 ? -25 : 25;
+				}
+			}
+		},
+		'fx5' : {
+			perspective: 1000,
+			in: {
+				duration: 700,
+				delay: function(el, index) { return 550+index*50; },
+				easing: 'easeOutQuint',
+				opacity: {
+					value: 1,
+					easing: 'linear',
+				},
+				translateY: ['-150%','0%'],
+				rotateY: [180,0]
+			},
+			out: {
+				duration: 700,
+				delay: function(el, index) { return index*60; },
+				easing: 'easeInQuint',
+				opacity: {
+					value: 0,
+					easing: 'linear',
+				},
+				translateY: '150%',
+				rotateY: -180
+			}
+		},
+		'fx6' : {
+			in: {
+				duration: 600,
+				easing: 'easeOutQuart',
+				opacity: 1,
+				translateY: function(el, index) {
+					return index%2 === 0 ? ['-40%', '0%'] : ['40%', '0%'];
+				},
+				rotateZ: [10,0]
+			},
+			out: {
+				duration: 0,
+				opacity: 0
+			}
+		},
+		'fx7' : {
+			in: {
+				duration: 250,
+				delay: function(el, index) { return 200+index*25; },
+				easing: 'easeOutCubic',
+				opacity: 1,
+				translateY: ['-50%','0%']
+			},
+			out: {
+				duration: 250,
+				delay: function(el, index) { return index*25; },
+				easing: 'easeOutCubic',
+				opacity: 0,
+				translateY: '50%'
+			}
+		},
+		'fx8' : {
+			in: {
+				duration: 400,
+				delay: function(el, index) { return 150+(el.parentNode.children.length-index-1)*20; },
+				easing: 'easeOutQuad',
+				opacity: 1,
+				translateY: ['100%','0%']
+			},
+			out: {
+				duration: 400,
+				delay: function(el, index) { return (el.parentNode.children.length-index-1)*20; },
+				easing: 'easeInOutQuad',
+				opacity: 0,
+				translateY: '-100%'
+			}
+		},
+		'fx9' : {
+			perspective: 1000,
+			origin: '50% 100%',
+			in: {
+				duration: 400,
+				delay: function(el, index) { return index*50; },
+				easing: 'easeOutSine',
+				opacity: 1,
+				rotateY: [-90,0]
+			},
+			out: {
+				duration: 200,
+				delay: function(el, index) { return index*50; },
+				easing: 'easeOutSine',
+				opacity: 0,
+				rotateY: 45
+			}
+		},
+		'fx10' : {
+			in: {
+				duration: 1000,
+				delay: function(el, index) { return 100+index*30; },
+				easing: 'easeOutElastic',
+				elasticity: anime.random(400, 700),
+				opacity: 1,
+				rotateZ: function(el, index) {
+					return [anime.random(20,40),0];
+				}
+			},
+			out: {
+				duration: 0,
+				opacity: 0
+			}
+		},
+		'fx11' : {
+			perspective: 1000,
+			origin: '50% 100%',
+			in: {
+				duration: 400,
+				delay: function(el, index) { return 200+index*20; },
+				easing: 'easeOutExpo',
+				opacity: 1,
+				rotateY: [-90,0]
+			},
+			out: {
+				duration: 400,
+				delay: function(el, index) { return index*20; },
+				easing: 'easeOutExpo',
+				opacity: 0,
+				rotateY: 90
+			}
+		},
+		'fx12' : {
+			perspective: 1000,
+			origin: '50% 100%',
+			in: {
+				duration: 400,
+				delay: function(el, index) { return 200+index*30; },
+				easing: 'easeOutExpo',
+				opacity: 1,
+				rotateX: [90,0]
+			},
+			out: {
+				duration: 400,
+				delay: function(el, index) { return index*30; },
+				easing: 'easeOutExpo',
+				opacity: 0,
+				rotateX: -90
+			}
+		},
+		'fx13' : {
+			in: {
+				duration: 800,
+				easing: 'easeOutExpo',
+				opacity: 1,
+				translateY: function(el, index) {
+					var p = el.parentNode,
+						lastElOffW = p.lastElementChild.offsetWidth,
+						firstElOffL = p.firstElementChild.offsetLeft,
+						w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
+						tyVal = lineEq(0, 200, firstElOffL + w/2, firstElOffL, el.offsetLeft);
+
+					return [Math.abs(tyVal)+50+'%','0%'];
+				},
+				rotateZ: function(el, index) {
+					var p = el.parentNode,
+						lastElOffW = p.lastElementChild.offsetWidth,
+						firstElOffL = p.firstElementChild.offsetLeft,
+						w = p.offsetWidth - lastElOffW - p.firstElementChild.offsetLeft - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
+						rz = lineEq(90, -90,firstElOffL + w, firstElOffL, el.offsetLeft);
+
+					return [rz,0];
+				}
+			},
+			out: {
+				duration: 500,
+				easing: 'easeOutExpo',
+				opacity: 0,
+				translateY: '-150%'
+			}
+		},
+		'fx14' : {
+			in: {
+				duration: 500,
+				easing: 'easeOutExpo',
+				delay: function(el, index) { return 200+index*30; },
+				opacity: 1,
+				rotateZ: [20,0],
+				translateY: function(el, index) {
+					var p = el.parentNode,
+						lastElOffW = p.lastElementChild.offsetWidth,
+						firstElOffL = p.firstElementChild.offsetLeft,
+						w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
+						tyVal = lineEq(-130, -60, firstElOffL+w, firstElOffL, el.offsetLeft);
+
+					return [Math.abs(tyVal)+'%','0%'];
+				}
+			},
+			out: {
+				duration: 400,
+				easing: 'easeOutExpo',
+				delay: function(el, index) { return (el.parentNode.children.length-index-1)*30; },
+				opacity: 0,
+				rotateZ: 20,
+				translateY: function(el, index) {
+					var p = el.parentNode,
+						lastElOffW = p.lastElementChild.offsetWidth,
+						firstElOffL = p.firstElementChild.offsetLeft,
+						w = p.offsetWidth - lastElOffW - firstElOffL - (p.offsetWidth - lastElOffW - p.lastElementChild.offsetLeft),
+						tyVal = lineEq(-60, -130, firstElOffL+w, firstElOffL, el.offsetLeft);
+
+					return tyVal+'%';
+				}
+			}
+		},
+		'fx15' : {
+			perspective: 1000,
+			in: {
+				duration: 400,
+				delay: function(el, index) { return 100+index*50; },
+				easing: 'easeOutExpo',
+				opacity: 1,
+				rotateX: [110,0]
+			},
+			out: {
+				duration: 400,
+				delay: function(el, index) { return index*50; },
+				easing: 'easeOutExpo',
+				opacity: 0,
+				rotateX: -110
+			}
+		},
+		'fx16' : {
+			in: {
+				duration: function(el, index) { return anime.random(800,1000) },
+				delay: function(el, index) { return anime.random(0,75) },
+				easing: 'easeInOutExpo',
+				opacity: 1,
+				translateY: ['-300%','0%'],
+				rotateZ: function(el, index) { return [anime.random(-50,50), 0]; }
+			},
+			out: {
+				duration: function(el, index) { return anime.random(800,1000) },
+				delay: function(el, index) { return anime.random(0,80) },
+				easing: 'easeInOutExpo',
+				opacity: 0,
+				translateY: '300%',
+				rotateZ: function(el, index) { return anime.random(-50,50); }
+			}
+		},
+		'fx17' : {
+			in: {
+				duration: 650,
+				easing: 'easeOutQuint',
+				delay: function(el, index) { return 450+(el.parentNode.children.length-index-1)*30; },
+				opacity: 1,
+				translateX: function(el, index) {
+					return [-1*el.offsetLeft,0];
+				}
+			},
+			out: {
+				duration: 1,
+				delay: 400,
+				opacity: 0
+			}
+		},
+		'fx18' : {
+			in: {
+				duration: 800,
+				delay: function(el, index) { return 600+index*150; },
+				easing: 'easeInOutQuint',
+				opacity: 1,
+				scaleY: [8,1],
+				scaleX: [0.5,1],
+				translateY: ['-100%','0%']
+			},
+			out: {
+				duration: 800,
+				delay: function(el, index) { return index*150; },
+				easing: 'easeInQuint',
+				opacity: 0,
+				scaleY: {
+					value: 8,
+					delay: function(el, index) { return 100+index*150; },
+				},
+				scaleX: 0.5,
+				translateY: '100%'
+			}
+		}
+	};
+
+	TextFx.prototype._init = function() {
+		// Split word(s) into letters/spans.
+		charming(this.el, {classPrefix: 'letter'});
+		this.letters = [].slice.call(this.el.querySelectorAll('span'));
+		this.lettersTotal = this.letters.length;
+	};
+
+	TextFx.prototype.show = function(effect, callback) {
+		arguments.length ? this._animate('in', effect, callback) : this.letters.forEach(function(letter) { letter.style.opacity = 1; });
+	};
+
+	TextFx.prototype.hide = function(effect, callback) {
+		if( arguments.length ) {
+			this._animate('out', effect, callback);
+		}
+		else {
+			anime.remove(this.letters);
+			this.letters.forEach(function(letter) { letter.style.opacity = 0; })
+		}
+	};
+
+	TextFx.prototype._animate = function(direction, effect, callback) {
+		var effecSettings = typeof effect === 'string' ? this.effects[effect] : effect;
+
+		if( effecSettings.perspective != undefined ) {
+			this.el.style.WebkitPerspective = this.el.style.perspective = effecSettings.perspective + 'px';
+		}
+		if( effecSettings.origin != undefined ) {
+			this.letters.forEach(function(letter) { 
+				letter.style.WebkitTransformOrigin = letter.style.transformOrigin = effecSettings.origin;
+			});
+		}
+
+		// Custom effect
+		var iscustom = this._checkCustomFx(direction, effect, callback);
+
+		var animOpts = effecSettings[direction];
+		animOpts.targets = this.letters;
+		
+		if( !iscustom ) {
+			animOpts.complete = callback;
+		}
+
+		anime(animOpts);
+	};
+
+	/**
+	 * Extra stuff for an effect.. this is just an example for effect 17.
+	 * TODO! (for now, just some quick way to implement something different only for fx17)
+	 */
+	TextFx.prototype._checkCustomFx = function(direction, effect, callback) {
+		var custom = typeof effect === 'string' && effect === 'fx17' && direction === 'out';
+		
+		if( custom ) {
+			var tmp = document.createElement('div');
+			tmp.style.width = tmp.style.height = '100%';
+			tmp.style.top = tmp.style.left = 0;
+			tmp.style.background = '#e24b1e';
+			tmp.style.position = 'absolute';
+			tmp.style.WebkitTransform = tmp.style.transform = 'scale3d(0,1,1)';
+			tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '0% 50%';
+			this.el.appendChild(tmp);
+			var self = this;
+			anime({
+				targets: tmp,
+				duration: 400,
+				easing: 'easeInOutCubic',
+				scaleX: [0,1],
+				complete: function() {
+					tmp.style.WebkitTransformOrigin = tmp.style.transformOrigin = '100% 50%';
+					anime({
+						targets: tmp,
+						duration: 400,
+						easing: 'easeInOutCubic',
+						scaleX: [1,0],
+						complete: function() {
+							self.el.removeChild(tmp);
+							if( typeof callback === 'function' ) {
+								callback();
+							}
+						}
+					});
+				}
+			});
+		}
+
+		return custom;
+	};
+
+	window.TextFx = TextFx;
+
+})(window);