Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ink Blot Modal Using Video & Blend Modes
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
<div class='container'>
<div class='wrap'>
<div id='bg'>
<img class='a' src='https://wallpapertag.com/wallpaper/full/a/d/c/49949-steampunk-background-5000x2801-mobile.jpg'>
</div>
<video data-depth='50' height='540' id='myVideo' width='620'>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ink4.mp4" type="video/mp4">
</video>
<img class='b' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/clockwork.png'>
<div class='wrap_inner'>
<div class='container_inner'>
<h1>The inkblot modal</h1>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/trill.png'>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ulla</p>
<a>confirm</a>
</div>
</div>
</div>
</div>
<div class='button'>Open the modal</div>
var vid = document.getElementById("myVideo");
function playVid() {
vid.play();
}
$('.button').click(function(){
$(this).fadeOut(500);
setTimeout(function(){
playVid();
},800);
setTimeout(function(){
$('h1,.container_inner img,a').css('opacity','1');
$('p').css('opacity','.6');
},1700);
});
@font-face {
font-family: 'Princess';
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/PrincesSANDTHEFROG.woff") format("woff");
font-weight: normal;
font-style: normal;
}
body {
margin: 0;
font-family: 'Princess';
height: 100vh;
overflow: hidden;
}
body .container {
height: 0px;
left: 0;
position: absolute;
right: 0;
margin: auto;
}
body .container .wrap {
background: white;
position: absolute;
height: 100vh;
width: 100%;
}
body .container video {
mix-blend-mode: multiply;
top: calc(50% + 40px);
position: absolute;
left: 0;
width: 940px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
margin: auto;
}
body .container img.a {
position: absolute;
top: 0;
width: 100%;
left: 0;
z-index: 0;
}
body .container img.b {
position: absolute;
mix-blend-mode: exclusion;
width: 640px;
top: calc(50% - 40px);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
left: 0;
right: 0;
margin: auto;
}
body .container_inner {
mix-blend-mode: lighten;
}
body .container_inner h1 {
color: white;
font-weight: normal;
font-size: 15px;
opacity: 0;
-webkit-transition: all 0.8s 0.2s;
transition: all 0.8s 0.2s;
}
body .container_inner p {
color: white;
opacity: 0.6;
line-height: 18px;
font-size: 9px;
margin: 16px 0;
opacity: 0;
-webkit-transition: all 0.8s 0.4s;
transition: all 0.8s 0.4s;
}
body .container_inner img {
opacity: 0;
-webkit-transition: all 0.8s 0.3s;
transition: all 0.8s 0.3s;
}
body .container_inner a {
color: white;
font-size: 12px;
border-bottom: 1px solid white;
opacity: 0;
-webkit-transition: all 0.8s 0.5s;
transition: all 0.8s 0.5s;
}
body .container .wrap_inner {
position: absolute;
top: calc(50%);
text-align: center;
position: absolute;
left: -69px;
right: 0;
mix-blend-mode: screen;
margin: auto;
width: 280px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.button {
position: absolute;
z-index: 3;
color: white;
background: rgba(61, 21, 24, 0.54);
display: block;
width: 132px;
text-align: center;
border-radius: 2px;
top: 50%;
padding: 13px;
right: 0;
margin: auto;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 12px;
left: -90px;
cursor: pointer;
-webkit-transition: background .7s;
transition: background .7s;
}
.button:hover {
background: #3d1518;
}
/* YAY CSS TRICKS! */
img.a {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
@CodeMyUI

This comment has been minimized.

Copy link
Owner Author

@CodeMyUI CodeMyUI commented Jan 7, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment