Created
November 13, 2019 05:28
-
-
Save CodeMyUI/54f8277443a3cd5dca0a935ea2d49e06 to your computer and use it in GitHub Desktop.
popout video
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="intro"> | |
<div class="popout-video"> | |
<video src="https://ice-creme.de/codepen_live_view.mp4" playsinline controls class="intro-video" preload="auto" type="video/mp4" autoplay muted></video> | |
<div class="popout-video__controls"> | |
<div class="close-video"></div> | |
</div> | |
</div> | |
</div> | |
<div class="content"> | |
<span>scroll down</span> | |
<h1>Lorem ipsum</h1> | |
<p> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, et. Et deserunt debitis sequi. Consectetur, saepe omnis! Minus quam magni error sapiente, ipsam laboriosam expedita omnis cum ducimus, recusandae amet! | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, tempore. Nulla facere animi cumque perspiciatis, sit vero ratione rem, sequi voluptatum adipisci itaque dignissimos eum, dolorum ad pariatur accusantium temporibus. | |
</p> | |
<h2>Dolor sit amet</h2> | |
<p> | |
Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam quaerat quo eos dolorum, tempore autem tempora vel magnam neque, cum sint dolorem ducimus, nam nostrum necessitatibus saepe quam possimus accusantium. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae consectetur deleniti, nostrum corporis recusandae non quasi est error quaerat quo delectus cum hic distinctio omnis nobis laboriosam esse saepe facilis. | |
</p> | |
<p> | |
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate dolore doloremque sapiente culpa animi ea aperiam, veritatis numquam dicta, voluptate ullam in consequatur explicabo, ducimus sit ab. Quo, saepe excepturi. | |
</p> | |
<h3>Consectetur adipiscing</h3> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto consequatur blanditiis veniam qui pariatur consectetur numquam, praesentium aliquid voluptatibus magnam sed veritatis quasi nisi ipsam, distinctio a rerum vero rem. | |
</p> | |
<p> | |
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus rem saepe porro nam corporis dolores aliquid numquam, at culpa? Quis fuga deserunt quas ut quia voluptas commodi modi aspernatur velit? | |
</p> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
console.clear(); | |
document.addEventListener('DOMContentLoaded', function() { | |
const introContainer = document.querySelector('.intro'); | |
const videoContainer = introContainer.querySelector('.popout-video'); | |
const video = videoContainer.querySelector('video'); | |
let videoHeight = videoContainer.offsetHeight; | |
const closeVideoBtn = document.querySelector('.close-video'); | |
let popOut = true; | |
introContainer.style.height = `${videoHeight}px`; | |
window.addEventListener('scroll', function(e) { | |
if (window.scrollY > videoHeight) { | |
// only pop out the video if it wasnt closed before | |
if (popOut) { | |
videoContainer.classList.add('popout-video--popout'); | |
// set video container off the screen for the slide in animation | |
videoContainer.style.top = `-${videoHeight}px`; | |
} | |
} else { | |
videoContainer.classList.remove('popout-video--popout'); | |
videoContainer.style.top = `0px`; | |
popOut = true; | |
} | |
}); | |
// close the video and prevent from opening again on scrolling + pause the video | |
closeVideoBtn.addEventListener('click', function() { | |
videoContainer.classList.remove('popout-video--popout'); | |
video.pause(); | |
popOut = false; | |
}); | |
window.addEventListener('resize', function() { | |
videoHeight = videoContainer.offsetHeight; | |
introContainer.style.height = `${videoHeight}px`; | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
html { | |
width: 100%; | |
height: 100%; | |
font-size: 18px; | |
} | |
body { | |
width: 100%; | |
min-height: 100%; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.intro { | |
width: 100%; | |
background: rgba(100,100,100,.1); | |
position: relative; | |
} | |
.popout-video { | |
width: 100%; | |
position: relative; | |
&--popout { | |
position: fixed; | |
left: 0; | |
top: 0; | |
width: 450px; | |
max-width: 100%; | |
height: auto; | |
animation: popin .5s ease-in-out forwards; | |
@keyframes popin { | |
to { | |
top: 0; | |
} | |
} | |
&:hover { | |
.popout-video__controls { | |
opacity: 1; | |
} | |
} | |
} | |
video { | |
width: 100%; | |
vertical-align: middle; | |
} | |
&__controls { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
padding: .5rem; | |
background: rgb(0,0,0); | |
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); | |
z-index: 1; | |
display: flex; | |
justify-content: flex-end; | |
opacity: 0; | |
transition: opacity .25s ease; | |
pointer-events: none; | |
.close-video { | |
width: 1.77rem; | |
height: 1.7rem; | |
cursor: pointer; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
pointer-events: all; | |
border-radius: 50%; | |
transition: background .25s ease; | |
&:hover { | |
background: rgba(50,50,50,.4); | |
} | |
&:before, &:after { | |
content: ''; | |
position: absolute; | |
margin: auto; | |
width: 1rem; | |
height: 2px; | |
background: #fff; | |
} | |
&:before { | |
transform: rotate(45deg); | |
} | |
&:after { | |
transform: rotate(-45deg); | |
} | |
} | |
} | |
} | |
.content { | |
padding: 4rem 1rem; | |
max-width: 900px; | |
span { | |
display: block; | |
width: 100%; | |
text-align: center; | |
color: rgba(0,0,0,.4); | |
} | |
} | |
h1,h2,h3,h4,h5,h6 { | |
color: rgba(0,0,0,.87); | |
margin: 3em 0 1em; | |
} | |
p { | |
line-height: 1.6; | |
font-size: 1.25rem; | |
color: rgba(0,0,0,.78); | |
+ p { | |
margin-top: 2rem; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment