<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jesperkc/pen/JXzPbO?depth=everything&order=popularity&page=92&q=Overlay&show_forks=false" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600);
/*** Shadows ***/
/*** Follow ***/
@import url(https://fonts.googleapis.com/css?family=Comfortaa:400,700,300);
a.follow {
position: absolute;
left: 0;
top: 0;
padding: 10px;
color: #fff !important;
z-index: 9999;
font-family: 'Helvetica';
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
opacity: .5;
}
a.follow svg {
vertical-align: middle;
margin-right: 5px;
}
a.follow span {
display: none;
}
a.follow:hover {
opacity: 1;
}
a.follow:hover span {
display: inline;
}
body {
font-family: 'Open Sans', arial;
}
html, body {
margin: 0;
height: 100%;
background-color: #043A4F;
}
h1, h3 {
position: absolute;
z-index: 10;
color: white;
text-transform: uppercase;
margin: 0;
padding: 0;
text-align: left;
}
h1 {
left: 6vw;
top: 8vw;
font-size: 7vw;
line-height: 6vw;
font-weight: 100;
font-family: 'Comfortaa', sans-serif;
}
h3 {
left: 6vw;
top: 21vw;
font-size: 2vw;
}
h3 span {
opacity: .5;
font-weight: 300;
background-color: #07384B;
padding: 5px 9px;
display: inline-block;
}
.player {
width: 100%;
height: 36vw;
overflow: hidden;
position: relative;
pointer-events: none;
}
.player iframe {
width: 64vw;
height: 36vw;
position: absolute;
right: 0;
top: 0;
pointer-events: none;
}
.svgs {
width: 100%;
height: 44vw;
position: absolute;
top: 0;
z-index: 50;
}
.svgs button {
position: absolute;
bottom: 0vw;
left: 6vw;
width: 30vw;
height: 8vw;
font-size: 3vw;
letter-spacing: .3vw;
text-transform: uppercase;
background-color: #B80A37;
border: 0;
border-radius: 4px;
z-index: 1;
color: white;
font-family: 'Comfortaa', sans-serif;
font-weight: 300;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.15), 0 15px 12px rgba(0, 0, 0, 0.12);
-webkit-transform: skew(-20deg);
transform: skew(-20deg);
}
.svgs button span {
-webkit-transform: skew(20deg);
transform: skew(20deg);
display: block;
}
.svg {
width: 100%;
height: 46vw;
}
.video-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
background-color: #0da58e;
z-index: 1;
}
path.hide {
opacity: 0;
}
.videoloaded .svg path.transparent {
-webkit-transition: fill .1s, opacity 2s ease-out, stroke .5s;
transition: fill .1s, opacity 2s ease-out, stroke .5s;
fill: white;
opacity: 0;
stroke: rgba(255, 255, 255, 0.2);
}
</style></head><body>
<div class="player">
<div class="video-overlay"></div>
<div id="player"></div>
</div>
<div class="svgs">
<h1>Keep<br/>creating</h1>
<h3><span>We'll handle the boring stuff</span><br/><span>We do it so well...</span></h3>
<button><span>Start now</span></button>
<svg class="svg" width="1440" height="394" preserveAspectRatio="none" viewBox="0 0 1600 794" xmlns="http://www.w3.org/2000/svg"><g><path d="M-79,-63L-149,93L119,55Z" fill="#18b49c" stroke="#18b49c"/><path d="M-79,-63L119,55L148,-65Z" fill="#18b69c" stroke="#18b69c"/><path d="M-79,-63L148,-65L368,-137Z" fill="#18b99c" stroke="#18b99c"/><path d="M148,-65L119,55L347,95Z" fill="#18b09b" stroke="#18b09b"/><path d="M148,-65L347,95L368,-137Z" fill="#18b39c" stroke="#18b39c"/><path d="M368,-137L347,95L427,65Z" fill="#18ae9b" stroke="#18ae9b"/><path d="M368,-137L427,65L555,-56Z" fill="#18b19b" stroke="#18b19b"/><path d="M368,-137L555,-56L691,-77Z" fill="#18b39b" stroke="#18b39b"/><path d="M368,-137L691,-77L1271,-164Z" fill="#17b29b" stroke="#17b29b"/><path d="M555,-56L427,65L622,110Z" fill="#18a99a" stroke="#18a99a"/><path d="M555,-56L622,110L691,-77Z" fill="#17ab9a" stroke="#17ab9a"/><path d="M691,-77L622,110L920,47Z" fill="#17a79a" stroke="#17a79a" class="transparent"/><path d="M691,-77L920,47L902,-47Z" fill="#17a99a" stroke="#17a99a"/><path d="M691,-77L902,-47L1271,-164Z" fill="#17ac9a" stroke="#17ac9a"/><path d="M902,-47L920,47L1030,58Z" fill="#17a49a" stroke="#17a49a"/><path d="M902,-47L1030,58L1132,-49Z" fill="#17a59a" stroke="#17a59a"/><path d="M902,-47L1132,-49L1271,-164Z" fill="#17a99a" stroke="#17a99a"/><path d="M1132,-49L1030,58L1273,133Z" fill="#179f99" stroke="#179f99"/><path d="M1132,-49L1273,133L1412,-32Z" fill="#169f99" stroke="#169f99"/><path d="M1132,-49L1412,-32L1271,-164Z" fill="#16a69a" stroke="#16a69a"/><path d="M1271,-164L1412,-32L1580,-120Z" fill="#16a69a" stroke="#16a69a"/><path d="M1412,-32L1273,133L1480,89Z" fill="#169a98" stroke="#169a98"/><path d="M1412,-32L1480,89L1580,-120Z" fill="#169e99" stroke="#169e99"/><path d="M1580,-120L1480,89L1665,147Z" fill="#169898" stroke="#169898"/><path d="M-149,93L-174,488L-144,326Z" fill="#18a19a" stroke="#18a19a"/><path d="M-149,93L-144,326L51,297Z" fill="#18a59a" stroke="#18a59a"/><path d="M-149,93L51,297L119,55Z" fill="#18aa9b" stroke="#18aa9b"/><path d="M119,55L51,297L311,306Z" fill="#18a39a" stroke="#18a39a"/><path d="M119,55L311,306L347,95Z" fill="#18a69a" stroke="#18a69a"/><path d="M347,95L311,306L541,327Z" fill="#189d99" stroke="#189d99"/><path d="M347,95L541,327L427,65Z" fill="#18a29a" stroke="#18a29a"/><path d="M427,65L541,327L622,110Z" fill="#18a099" stroke="#18a099"/><path d="M622,110L541,327L615,303Z" fill="#179999" stroke="#179999"/><path d="M622,110L615,303L820,216Z" fill="#179a99" stroke="#179a99" class=""/><path d="M622,110L820,216L920,47Z" fill="#179f99" stroke="#179f99" class="transparent"/><path d="M920,47L820,216L1030,58Z" fill="#179e99" stroke="#179e99" class="transparent"/><path d="M1030,58L820,216L1029,359Z" fill="#179698" stroke="#179698" class="transparent"/><path d="M1030,58L1029,359L1273,133Z" fill="#179598" stroke="#179598" class="transparent"/><path d="M1273,133L1029,359L1186,420Z" fill="#178b97" stroke="#178b97" class="transparent"/><path d="M1273,133L1186,420L1319,317Z" fill="#178b97" stroke="#178b97" class="transparent"/><path d="M1273,133L1319,317L1422,219Z" fill="#168e97" stroke="#168e97" class="transparent"/><path d="M1273,133L1422,219L1480,89Z" fill="#169398" stroke="#169398"/><path d="M1480,89L1422,219L1665,147Z" fill="#169198" stroke="#169198"/><path d="M1665,147L1422,219L1635,349Z" fill="#168a96" stroke="#168a96" class="transparent"/><path d="M1665,147L1635,349L1715,496Z" fill="#168196" stroke="#168196"/><path d="M-144,326L-174,488L51,297Z" fill="#189b99" stroke="#189b99"/><path d="M51,297L-174,488L138,550Z" fill="#189498" stroke="#189498"/><path d="M51,297L138,550L311,306Z" fill="#189698" stroke="#189698"/><path d="M311,306L138,550L265,562Z" fill="#188e98" stroke="#188e98"/><path d="M311,306L265,562L437,456Z" fill="#188f98" stroke="#188f98"/><path d="M311,306L437,456L541,327Z" fill="#189498" stroke="#189498"/><path d="M541,327L437,456L633,501Z" fill="#188d97" stroke="#188d97"/><path d="M541,327L633,501L615,303Z" fill="#179098" stroke="#179098"/><path d="M615,303L633,501L822,424Z" fill="#178c97" stroke="#178c97"/><path d="M615,303L822,424L820,216Z" fill="#179298" stroke="#179298"/><path d="M820,216L822,424L1029,359Z" fill="#178e97" stroke="#178e97" class="transparent"/><path d="M1029,359L822,424L1076,458Z" fill="#178697" stroke="#178697" class="transparent"/><path d="M1029,359L1076,458L1186,420Z" fill="#178496" stroke="#178496" class="transparent"/><path d="M1319,317L1186,420L1469,527Z" fill="#168096" stroke="#168096" class="transparent"/><path d="M1319,317L1469,527L1422,219Z" fill="#168496" stroke="#168496" class="transparent"/><path d="M1422,219L1469,527L1635,349Z" fill="#168196" stroke="#168196" class="transparent"/><path d="M1635,349L1469,527L1715,496Z" fill="#167995" stroke="#167995"/><path d="M-174,488L-104,690L138,550Z" fill="#188c97" stroke="#188c97"/><path d="M138,550L-104,690L105,721Z" fill="#188497" stroke="#188497"/><path d="M138,550L105,721L265,562Z" fill="#188597" stroke="#188597"/><path d="M265,562L105,721L313,683Z" fill="#188196" stroke="#188196"/><path d="M265,562L313,683L437,649Z" fill="#188196" stroke="#188196"/><path d="M265,562L437,649L437,456Z" fill="#188697" stroke="#188697"/><path d="M437,456L437,649L633,501Z" fill="#188597" stroke="#188597"/><path d="M633,501L437,649L731,643Z" fill="#177f96" stroke="#177f96"/><path d="M633,501L731,643L822,424Z" fill="#178396" stroke="#178396"/><path d="M822,424L731,643L839,609Z" fill="#177f96" stroke="#177f96"/><path d="M822,424L839,609L1076,458Z" fill="#178296" stroke="#178296"/><path d="M1076,458L839,609L1002,652Z" fill="#177b95" stroke="#177b95"/><path d="M1076,458L1002,652L1334,732Z" fill="#177595" stroke="#177595"/><path d="M1076,458L1334,732L1186,420Z" fill="#177a95" stroke="#177a95"/><path d="M1186,420L1334,732L1379,648Z" fill="#167495" stroke="#167495"/><path d="M1186,420L1379,648L1469,527Z" fill="#167895" stroke="#167895"/><path d="M1469,527L1379,648L1641,626Z" fill="#167094" stroke="#167094"/><path d="M1469,527L1641,626L1715,496Z" fill="#167294" stroke="#167294"/><path d="M105,721L1334,732L313,683Z" fill="#177795" stroke="#177795" class="hide"/><path d="M313,683L1334,732L731,643Z" fill="#177695" stroke="#177695" class="hide"/><path d="M313,683L731,643L437,649Z" fill="#187d96" stroke="#187d96"/><path d="M731,643L1334,732L1002,652Z" fill="#177395" stroke="#177395" class="hide"/><path d="M731,643L1002,652L839,609Z" fill="#177895" stroke="#177895"/><path d="M1334,732L1641,626L1379,648Z" fill="#166c94" stroke="#166c94"/></g></svg>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='https://codepen.io/jesperkc/pen/f177ba515fb47030457bd96ffb2f93b3.js?v=3'></script>
<script >var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: 390*1.5,
width: 640*1.5,
playerVars: {
'autoplay': 1,
'fs': 0,
'controls': 0,
'showinfo': 0,
'disablekb': 1,
'modestbranding': 1,
'rel': 0,
'hd': 1,
'autohide': 1,
'loop': 1
},
videoId: 'F1a3Fn17EXE', //F1a3Fn17EXE
events: {
'onReady': onPlayerReady,
// 'onStateChange': onPlayerStateChange
onStateChange:
function(e){
if (e.data === YT.PlayerState.PLAYING) {
onPlayerStarted();
}
if (e.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
}
});
}
function onPlayerStarted(event) {
// event.target.setLoop(true);
$('.transparent').each(function(){
var s = Math.random();
$(this).css({'transition-delay':s+'s'});
});
$('body').addClass('videoloaded');
}
function onPlayerReady(event) {
event.target.playVideo();
}
$(document).ready(function(){
//$('svg').clone().addClass('svg2').appendTo(".svgs");
})
//# sourceURL=pen.js
</script>
</body></html>
