We Keep Coding

How do I do this to the progress bar?(html-css)

How do I do this to the progress bar like below:
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
}
.detail-load-text {
position: absolute;
right: 0;
left: 0;
top: 10px;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 17px;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="width: 80%;"></div>
</div>
<div class="detail-load-text">80%</div>
</div>
The progress bar I want to make is like the image I shared above. Can anyone help?

You could use the clip-path property to achieve your desired result. I included some dummy javascript in the snippet to simulate loading.
You can set --loading-color-primary and --loading-color-secondary to any two colors you'd like.
const front = document.getElementById('progress-front');
const back = document.getElementById('progress-back');
let progress = 0;
setInterval(() => {
front.style.webkitClipPath = `inset(0 0 0 ${progress}%)`;
if(++progress >= 100) {
progress = 0;
}
front.innerHTML = back.innerHTML = progress + "%";
}, 50);
:root {
--loading-color-primary: purple;
--loading-color-secondary: white;
}
.progress {
position: relative;
display: flex;
font-size: 50px;
border: 2px solid var(--loading-color-primary);
overflow: hidden;
width: 100%;
}
.back {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background: var(--loading-color-primary);
color: var(--loading-color-secondary);
}
.front {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
width: 100%;
right: 0;
top: 0;
bottom: 0;
background: var(--loading-color-secondary);
color: var(--loading-color-primary);
}
<div class="progress">
<div class="back" id="progress-back">0%</div>
<div class="front" id="progress-front">0%</div>
</div>

This is an example of what you want to accomplish:
https://codepen.io/robinrendle/pen/wKqmbW
<div class="wrapper">
<div class="bg">
<div class="el"></div>
</div>
</div>
$loadingTime: 10s;
$color: rgb(255,0,0);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,255);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
The key item here is the mix-blend-mode property which defines how an element's content should blend with its background.
You can learn more about it here and here.

I used a different approach, where you can set a CSS variable to control the length of the loading progress as well as displaying the value.
Because I used a pseudo-class to display the value, I needed to use a number hack, using counter-reset on the ::after pseudo-element.
As for having the dark text turn white, you can use mix-blend-mode: color-dodge. It's not perfect, as you can see, but perhaps good enough?
.detail-load {
height: 42px;
border: 1px solid #A2B2C5;
padding: 1px;
border-radius: 10px;
}
.detail-load > .detail-loading {
background: #904BFF;
height: 100%;
border-radius: 10px;
/* ADDED */
width: calc(var(--progress) * 1%);
position: relative;
}
.detail-load > .detail-loading::after {
font-weight: 600;
font-size: 17px;
/* ADDED */
counter-reset: number-hack var(--progress);
content: counter(number-hack)"%";
position: absolute;
right: 0px;
top: 50%;
transform: translate(50%, -50%);
color: #d2b6ff;
mix-blend-mode: color-dodge;
}
.detail-load > .detail-loading.grey-text::after {
color: #b5b5b5;
}
<div class="detail-pop-item">
<div class="detail-load">
<div class="detail-loading" style="--progress: 30"></div>
</div>
</div>
<div class="detail-pop-item">
<div class="detail-load">
<div class="grey-text detail-loading" style="--progress: 60"></div>
</div>
</div>

Following Veselin's answer, you just need to change the color attributes as follows:
$color: rgb(255,0,0); becomes $color: rgb(255,0,255);
and
.el{
...
&:after {
...
color: rgb(0,255,255);
}
}
becomes
.el{
...
&:after {
...
color: rgb(0,255,0);
}
}
The result is:
$loadingTime: 10s;
$color: rgb(255,0,255);
body {
background-color: white;
}
#keyframes loading {
0% {
width: 0;
} 100% {
width: 100%;
}
}
#keyframes percentage {
#for $i from 1 through 100 {
$percentage: $i + "%";
#{$percentage} {
content: $percentage;
}
}
}
.bg {
background-color: $color;
animation: loading $loadingTime linear infinite;
}
.el{
color: $color;
width: 200px;
border: 1px solid $color;
&:after {
padding-left: 20px;
content: "0%";
display: block;
text-align: center;
font-size: 50px;
padding: 10px 20px;
color: rgb(0,255,0);
mix-blend-mode: difference;
animation: percentage $loadingTime linear infinite;
}
}
html {
height: 100%;
background-color: white;
font-family: 'PT Sans', sans-serif;
font-weight: bold;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}

How to expand the width of images to the width of the window inside the carousel?

You can see my carousel on my Github page.
https://ionianthales.github.io/playground.github.io/
I set .carousel to position: absolute; which is ul tag.
and when I click the .right-btn, the slide effect works. But I use the dual monitor and when I expanded the web browser window horizontally over the full width of a monitor, I could see other images are shown in a slide too.
( To check this issue, I should decrease the size of web browser horizontally and then refresh the page and then expand the web browser horizontally )
I tried to fix it on my own. But It didn't work well.
also, I will include my codes here.
html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="index.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Bowlby+One+SC|PT+Sans+Narrow&display=swap" rel="stylesheet">
</head>
<body>
<nav class="nav-container">
<div class="logo">
LogoShop
</div>
<ul class="menu-container">
<li class="menu-item">shirt</li>
<li class="menu-item">pants</li>
<li class="menu-item">uniform</li>
<li class="menu-item">contact</li>
</ul>
</nav>
<div class="carousel-container">
<div class="carousel-wrapper">
<ul class="carousel">
<li class="slide active"><img src="images/freestocks-org-_3Q3tsJ01nc-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/jonathan-francisca-HY-Nr7GQs3k-unsplash.jpg" alt=""></li>
<li class="slide"><img src="images/tamara-bellis-0C2qrwkR1dI-unsplash.jpg" alt=""></li>
</ul>
</div>
<button class="btn left-btn"><img src="images/left-arrow.svg" alt=""></button>
<button class="btn right-btn"><img src="images/right-arrow.svg" alt=""></button>
<div class="carousel-nav">
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
css
html{
/* border: 1px red solid; */
height: 100%;
}
body{
height: 100%;
margin: 0;
}
nav{
/* border: 1px red solid; */
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
ul{
list-style: none;
}
.logo{
/* border: 1px blue solid; */
font-family: 'Anton', sans-serif;
font-size: 30px;
}
.menu-container{
/* border: 1px red solid; */
display: flex;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 25px;
padding: 0;
}
.menu-item{
/* border: 1px red solid; */
margin: 0 15px;
}
li a{
text-decoration: none;
color: black;
}
/* carousel */
.carousel-container{
position: relative;
/* border: 1px red solid; */
width: 100%;
height: 500px;
}
.carousel-wrapper{
/* border: 1px red solid; */
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel{
/* border: 1px red solid; */
height: 100%;
margin: 0;
padding: 0;
list-style: none;
transition: 300ms transform ease-in;
}
.slide{
position: absolute;
/* border: 1px red solid; */
margin: 0;
width: 100%;
height: 100%;
}
.slide img{
width: 100%;
height: 100%;
object-fit: cover;
/* opacity: 0; */
}
.btn{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 40px;
background-color: transparent;
border: none;
cursor: pointer;
}
.left-btn{
left: 0;
}
.right-btn{
right: 0;
}
.carousel-nav{
position: absolute;
/* background-color: dodgerblue; */
width: 100%;
height: 50px;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
.dot{
border-radius: 50%;
width: 20px;
height: 20px;
background-color: grey;
opacity: 0.5;
margin: 0 20px;
cursor: pointer;
}
.dot.active{
background-color: grey;
opacity: 1;
}
javascript
const carousel = document.querySelector('.carousel');
const slides = [...carousel.children];
const nextBtn = document.querySelector('.right-btn');
const previousBtn = document.querySelector('.left-btn');
const slideWidth = slides[0].getBoundingClientRect().width;
console.log(slideWidth);
function positionSlides(slides){
for (let i=0; i<slides.length; i++){
slides[i].style.left = slideWidth * i + 'px';
};
};
nextBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const nextSlide = currentSlide.nextElementSibling;
const position = nextSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
nextSlide.classList.add('active');
});
previousBtn.addEventListener('click', function(){
const currentSlide = carousel.querySelector('.active');
const previousSlide = currentSlide.previousElementSibling;
const position = previousSlide.style.left;
carousel.style.transform = `translateX(-${position})`;
currentSlide.classList.remove('active');
previousSlide.classList.add('active');
});
positionSlides(slides);
Thanks for reading my question. : )

You can modify the CSS rule as below:
.slide {
position: absolute;
border: 1px solid red;
margin: 0;
width: 100%;
height: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
or
.slide {
width: 100vw;
}

Do not show the js content while the page is loading

I faced the following problem: I have a simple javascript - section, (.custom-social-proof) with a different content load and rotatation. Everything is fine except for one moment - Often, until the page is fully loaded, I see all the elements. What am I doing wrong? I'm quite new to javascript, so I will be very grateful to find some help.
(function(jQuery){
jQuery.fn.extend({
rotaterator: function(options) {
var defaults = {
fadeSpeed: 900,
pauseSpeed: 9000,
child:null
};
var options = jQuery.extend(defaults, options);
return this.each(function() {
var o =options;
var obj = jQuery(this);
var items = jQuery(obj.children(), obj);
items.each(function() {jQuery(this).hide();})
if(!o.child){var next = jQuery(obj).children(':first');
}else{var next = o.child;
}
jQuery(next).slideToggle(o.fadeSpeed, function() {
jQuery(next).delay(o.pauseSpeed).slideToggle(o.fadeSpeed, function() {
var next = jQuery(this).next();
if (next.length == 0){
next = jQuery(obj).children(':first');
}
setTimeout(function() {
jQuery(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
}, 9000); // pause between slides
})
});
});
}
});
})(jQuery);
.custom-social-proof {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999999999999 !important;
}
.custom-social-proof .custom-notification {
width: auto;
min-width: 280px;
text-align: left;
z-index: 99999;
box-sizing: border-box;
font-weight: 400;
box-shadow: 2px 2px 10px 2px rgba(11, 10, 10, 0.08);
border-radius: 50px;
background-color: #fff;
position: relative;
cursor: pointer;
padding: 10px 15px;
border: 2px solid #344bc1;
}
.custom-social-proof .custom-notification .custom-notification-container {
display: flex !important;
align-items: center;
height: 80px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-image-wrapper img {
max-height: 50px;
width: 50px;
padding: 0px 5px 0px 10px;
object-fit: cover;
}
.custom-social-proof .custom-notification .custom-notification-container .warning {
border: 1px;
background-color: #fbe8e8;
border-color: #ffa9a9;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper {
margin: 0;
height: 100%;
color: gray;
padding-left: 10px;
padding-right: 20px;
border-radius: 0 50px 50px 0;
flex: 1;
display: flex !important;
flex-direction: column;
justify-content: center;
background: #fff;
}
.custom-notification-image-wrapper.pulse img {
margin-top: 0;
}
.custom-notification-content strong {
color: #575757;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content {
font-family: inherit !important;
margin: 0 !important;
padding: 0 !important;
font-size: 14px;
line-height: 18px;
color: #616161;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a {
color: #354cc5;
text-decoration-color: #354cc5;
font-size: 18px;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content a:hover {
color: #354cc5;
text-decoration-color: #354cc5;
}
.custom-social-proof .custom-notification .custom-notification-container .custom-notification-content-wrapper .custom-notification-content small {
margin-top: 3px !important;
display: block !important;
font-size: 12px !important;
opacity: 0.8;
}
.custom-social-proof .custom-notification .custom-close {
position: absolute;
top: 8px;
right: 28px;
height: 12px;
width: 12px;
cursor: pointer;
transition: 0.2s ease-in-out;
transform: rotate(45deg);
opacity: 0;
}
.custom-social-proof .custom-notification .custom-close::before {
content: "";
display: block;
width: 100%;
height: 2px;
background-color: gray;
position: absolute;
left: 0;
top: 5px;
}
.custom-social-proof .custom-notification .custom-close::after {
content: "";
display: block;
height: 100%;
width: 2px;
background-color: gray;
position: absolute;
left: 5px;
top: 0;
}
.custom-social-proof .custom-notification:hover .custom-close {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="all-social-proofs">
<section class="custom-social-proof"><!-- Popup item 1 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
<section class="custom-social-proof"><!-- popup item 2 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
<section class="custom-social-proof"><!-- popup item 2 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
<section class="custom-social-proof"><!-- popup item 2 -->
<div class="custom-notification">
<div class="custom-notification-container">
<div class="custom-notification-image-wrapper">
</div>
<div class="custom-notification-content-wrapper warning">
<p>Content</p>
</div>
</div>
</div>
</section><!-- popup item ends -->
</div>
<script>
jQuery(document).ready(function() {
jQuery('#all-social-proofs').rotaterator();
});
</script>

You could hide the parent class by default then reveal it once you have hidden the children.
<div id="all-social-proofs" style="display:none">
...
and
jQuery(document).ready(function() {
jQuery('#all-social-proofs').rotaterator();
jQuery('#all-social-proofs').show();
});

Thumbnail as Placeholder Image Carousel

I have an image slider with thumbnails which works fine, but I'm having trouble making one of the thumbnails a placeholder. For example in my codepen, I have three images that correspond with their thumbnails. But in the last one, I want to have the user see a sketchfab model.
I want to have a still image as a thumbnail, but when the user clicks on the thumbnail or the arrows, the animated sketchfab model shows instead.
Any help would be appreciated.
$(document).ready(function(){
$('#imgDetail').animate({
opacity: '1'
},300);
});
$(document).ready(function(){
// get all images loaded
var images = $(".unidoor-class");
// thumbnails containers
var thumbnailContainer = $("#thumbnails");
// generate thumbnail images
generateThumbnails(images, thumbnailContainer);
// listeners for controls arrows
$(".prev-next-button").on("click touchstart", function() {
// get the images
var currentImageIndex = $(".unidoor-class.active").index();
var isPrevious = $(this).hasClass("previous");
var nextIndex;
if (isPrevious) {
if (currentImageIndex === 0) {
nextIndex = images.length - 1;
}
if (currentImageIndex > 0) {
nextIndex = currentImageIndex - 1;
}
} else {
if (currentImageIndex === images.length - 1) {
nextIndex = 0;
}
if (currentImageIndex < images.length - 1) {
nextIndex = currentImageIndex + 1;
}
}
// remove any active class from images
images.removeClass("active");
// get the next active image and add active class to that next current image
$(images[nextIndex]).addClass("active");
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var indexSelected = $(this).data("img-index");
var currentShown = $(".unidoor-class.active").index();
if (currentShown === indexSelected) return false;
images.removeClass("active");
$(images[indexSelected]).addClass('active');
});
function generateThumbnails(images, container) {
var ul = $("<ul>");
images.each(function(index, element){
var currentThumb = $("<img>");
var li = $("<li>");
var src = $(this).attr("src");
currentThumb.attr("src", src);
currentThumb.attr("class", "thumb");
currentThumb.data("img-index", index);
li.append(currentThumb);
ul.append(li);
});
container.append(ul);
}
});
window.sr = ScrollReveal({reset: true});
sr.reveal('.active', {mobile:true});
* {
margin: 0;
padding: 0;
}
body{
margin: 0;
padding:0;
font-size: 100%;
/* line-height: 1.6; */
/* font-family: Arial, Helvetica, sans-serif; */
/* height: 100% !important; */
}
.header{
margin: 0 auto;
width: 100%;
background-color: #333;
padding: 30px 0 0 0;
}
.header h1{
margin: 0;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.header ul {
list-style-type: none;
margin: 0;
/* padding: 0; */
overflow: hidden;
padding: 20px 0px 30px 0;
text-align: center;
}
.header li {
display: block;
display: inline-block;
/* border-right: 1px solid #bbb; */
border-right: 1px solid #bbb;
height: 25px;
}
.header li:last-child{
border-right: none;
}
.header li a {
display: block;
color: white;
text-align: center;
text-decoration: none;
padding: 0px 40px;
font-size: 1em;
}
.header li a:hover{
color: #7bbe9a;
/* color: #80b198; */
}
#green-room {
background: #333 !important;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
#unidoor, .unidoor-class {
position: absolute;
width: 100%;
margin: 0 auto;
display: block;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
height: auto;
}
.unidoor-class.active {
position: relative;
opacity: 1;
}
#prev {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
left: 0;
top: 0;
bottom: 0;
}
#next {
position: absolute;
/* font-weight: bold; */
color: black;
/* background-color: #fff; */
/* opacity: 0.5; */
right: 0;
top: 0;
bottom: 0;
}
#prev p,
#next p
{
font-size: 3em;
}
#imgDetail {
position: relative;
width: 90%;
margin: 0 auto;
}
#imgDetail a {
text-decoration: none;
display: flex;
/* padding: 8px 16px; */
padding: 3% ;
justify-content: center;
align-items: center;
}
#imgDetail a:hover {
background-color: #333;
color: white;
opacity: 0.5;
}
#imgDetail ul {
margin: 0 auto;
display: block;
/* width: 50%; */
}
#thumbnails {
max-width: 1000px;
width: 100%;
display: inline-block;
text-align: center;
}
.thumb {
width: 21%;
height: auto;
/* margin: 15px 1% 0px 2%; */
margin-top: 15px;
cursor: pointer;
}
#imgDetail li {
display: inline;
/* margin-right: 10px; */
}
#thumbnails ul{
margin: 0 auto;
display: block;
}
#thumbnails li{
display: inline;
padding-right: 2%;
}
#thumbnails li:last-child{
padding-right: 0;
}
#green-room p {
display: block;
margin: 0 auto;
/* font-size: 1em !important; */
}
#green {
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
color: white;
font-family: 'Lato', sans-serif;
margin: 0 auto;
/* width: 100% !important;*/
}
#media(max-width: 767px){
#green-room p {
margin-right: 5% !important;
margin-left: 5% !important;
/* font-size: .75em !important; */
}
#green {
/* font-size: .75em !important; */
}
}
#media(min-width: 768px){
#green-room p {
width: 90% !important;
}
#green {
width: 90% !important;
}
}
.footer {
padding-top: 30px;
background-color: #333;
}
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Daniel Pollack</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body id="green-room">
<div class="header">
<div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div>
<nav id="menu">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" />
<img src="https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/1243679/300/200/m2/fpnw/wm0/desert_04_01-.jpg?1462519267&s=294388259919b5be6294b07e96cda0b7" class="unidoor-class" />
<!--CONTROLS-->
<p>❬</p>
<p>❭</p>
<div class="sketchfab-embed-wrapper"><iframe width="640" height="480" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<!--Thumbnails-->
</div>
<div id="thumbnails">
</div>
</div>
<p id="green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non iaculis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="footer">
</div>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({reset: true});
sr.reveal('#unidoor');
</script>
</body>
</html>

I've posted a potential solution here:
https://codepen.io/anon/pen/xYrJxy
It uses data attributes to tell if the image is active
data-active="false/true"
and
data-iframe="sketchfab-iframe"
to determine whether the image should trigger the iframe to appear.
Let me know if you have any questions.

place a relative div under an absolute divs generated height by window

Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<body>
<!-- Header -->
<header class="header">
<div class="header-bg">
<div class="logo-top"></div>
</div>
<nav>
<div class="menu">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
<ul class="nav-list">
<li>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</li>
</ul>
</div>
</nav>
</header>
<video class="intro" autoplay loop>
<source src="video/black_clouds.mp4" type="video/mp4">
<source src="video/black_clouds.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>
<!-- Main content -->
<main class="content">
</main>
<!-- Footer -->
<footer>
<small>© Crafthouse 2014</small>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
divFade = $(".header-bg");
var toggleHeader = function(noAnimate) {
var threshold = 400,
fadeLength = 300,
opacity,
scrollTop = $(document).scrollTop();
if (scrollTop < threshold) {
opacity = 0;
} else if (scrollTop > threshold + fadeLength) {
opacity = 1;
} else {
if (noAnimate) {
opacity = 1;
} else {
opacity = (scrollTop - threshold) / fadeLength;
}
}
divFade.css("opacity", opacity);
};
toggleHeader(true);
$(window).scroll(function() {
toggleHeader();
});
});
</script>
The CSS:
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
}
/*
========================================
Layout: Header
========================================
*/
.header {
width: 100%;
height: 60px;
position: fixed;
top: 0px;
color: #fff;
z-index: 9999;
}
.header-bg {
width: 100%;
height: 60px;
line-height: 60px;
vertical-align: middle;
background: #212121;
position: absolute;
opacity: 0;
font-size: 25px;
}
.logo-top {
background: url(../images/crafthouse-top-logo.png) no-repeat;
width: 171px;
height: 60px;
margin: 0 auto;
}
.menu {
width: 70px;
height: 60px;
padding-top: 20px;
position: absolute;
left: 8%;
}
.menu:hover {
background: #000;
}
.hamburger {
width: 30px;
height: 3px;
background: #fff;
margin: 0 auto;
margin-bottom: 5px;
}
.menu:hover .hamburger {
background: #00ff91;
}
.nav-list {
width: 150px;
margin-top:20px;
background: #000;
display: none;
padding: 20px 0 10px 18px;
text-transform: uppercase;
}
.nav-list li {
margin-bottom: 10px;
}
.nav-list li a {
color: #fff;
text-decoration: none;
font-size: 14px;
}
.nav-list li a:hover {
color: #00ff91;
}
.menu:hover .nav-list {
display: block;
}
.intro {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background-size: cover;
}
.intro-seperator {
background: url(../images/seperator-brush-top.png);
height: 164px;
width: 100%;
position: absolute;
right: 0;
bottom: 0;
}
.test {
width: 100%;
height: 100%;
background: #fff;
}
/*
========================================
Layout: Content
========================================
*/
.content {
height: 2000px;
}

Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)