Animation out of sync, how to achieve smooth animation? - javascript

Image and backgroung color out of sync. And i need smooth animation so the image & bgcolor fade's together.
It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening. It works smooth only on first iteration. Check codepen, please. I spent 5 hours and did not understand what was happening.
https://codepen.io/l-ba-iwanowa/pen/poJZQVN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Caveat&display=swap" rel="stylesheet">
<style>
body,
.col-1,
.col-3-4,
.col-1 p {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
#rcorners1 {
border-radius: 15px 50px;
background-color: yellow;
padding: 20px;
width: 200px;
height: 150px;
animation-name: bbb;
animation-duration: 5s;
animation-fill-mode: forwards;
}
#rcorners1:hover {
width:600px;
transform: translate(300px);
transition:1s;
}
#keyframes bbb {
0% {background-color: blue;}
100% {background-color: red}
}
.asd {
width: 1000px;
height: 600px;
/*overflow: hidden;*/
position:relative;
margin: 0 auto;
}
.asd img{
width: 100%;
width: 1000px;
height: 600px;
}
.asd img {
position:absolute;
top: 0;
}
.asd img.top {
/*position:relative;*/
opacity: 0;
transition: 2s;
}
/*
.asd img.top:hover {
opacity: 100;
}*/
.trans {
opacity: 100 !important;
}
#container {
max-width: 1000px;
margin:0 auto;
}
.col-1 {
width:25%;
display:inline-block;
vertical-align: top;
}
.col-3-4 {
width:75%;
display:inline-block;
vertical-align: top;
}
.relative {
position:relative;
}
.black-col {
position: relative;
top: -150px;
background: #474747;
height: 300px;
color:white;
padding: 1rem;
}
.zastup {
position: relative;
top:-50px;
background-color: white;
word-wrap: break-word;
}
img {
max-width: 100%;
}
.slider-bg {
background-color: rgb(0,0,0);
transition: background-color 2s;
}
#container2 {
width: 900px;
margin: 0 auto;
}
.slider-nav {
float:right !important;
}
ul {
/* Center the content */
align-items: center;
display: flex;
justify-content: center;
/* Reset styles */
list-style-type: none;
margin: 0;
padding: 0;
}
li {
/* Rounded border */
border-radius: 9999px;
height: 14px;
width: 14px;
/* Active dot */
/*background-color: rgba(0, 0, 0, .3);*/
/* Inactive dot */
background-color: rgba(255, 255, 255, .3);
/*border: 1px solid rgba(0, 0, 0, .3);*/
/* OPTIONAL: Spacing between dots */
margin: 0 12px;
transition: transform 0.5s, background-color 0.5s;
}
.nav-active {
background-color: rgba(255, 255, 255, .9);
transform: scale(1.5);
}
.clear {
clear:both;
zoom: 1;
}
.col-1-3 {
position: relative;
width: 33%;
word-wrap: break-word;
white-space: nowrap;
display: inline-block;
vertical-align: top;
padding: 1rem;
box-sizing: border-box;
}
button.abc {
border: 0;
background-color: #e86d10;
padding: 1rem 2rem;
border-radius: 25px;
font-size: inherit;
color: #fff;
}
.price {
font-size:1.5rem;
position: relative;
top:-20px;
}
.description {
position: relative;
top:-40px;
word-break: break-all;
white-space: pre-wrap;
font-size: 1.2rem;
}
.p1rem {
padding: 1rem;
}
.orange {
color: #e86d10;
}
.apply-font {
font-family: 'Caveat', cursive;
}
.bg-black {
background-color: rgb(0,0,0);
}
.bg-blue {
background-color: rgb(34, 73, 200);
}
</style>
</head>
<body>
<div id="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur illum ab corrupti impedit culpa provident nemo numquam? Magnam, rerum, magni. Autem quisquam deserunt a est iste iure odit laudantium, dolores.</p>
</div>
<div class="slider-bg ">
<div class="asd">
<!-- <img src="https://i.ytimg.com/vi/tAp9BKosZXs/maxresdefault.jpg" alt=""> -->
<img src="https://i.imgur.com/xCGxXuy.jpg" alt="">
<img class="top" src="https://i.imgur.com/D1tDvcG.jpg" alt="">
<img class="top" src="https://cdn.vox-cdn.com/thumbor/gBv91a9YqyhIxGsxc26x5TORV_8=/0x0:1296x730/1200x800/filters:focal(669x161:875x367)/cdn.vox-cdn.com/uploads/chorus_image/image/66274455/horsegirl.0.jpg" alt="">
<img class="top" src="https://1.bp.blogspot.com/-73o9cfxSC7Q/XQMxoVjfdMI/AAAAAAAAUkM/RSi0lSlsQoAfhMHLR-3U8Sfk_PpvZuziQCLcBGAs/s1600/copertina.jpg" alt="">
</div></div>
<div id="container2" style="position: relative;top:-60px; ">
<ul class="slider-nav">
<li data-id='0' class="nav-active"></li>
<li data-id='1'></li>
<li data-id='2'></li>
<li data-id='3'></li>
<li data-id='4'></li>
</ul></div><div class="clear"></div>
<div id="container2">
<div class="col-1 black-col">asd</div><!--
--><div class="col-3-4 zastup">
<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/3.1.0/anime.min.js'></script> -->
<script type="text/javascript">
console.log(111);
// document.querySelector('#btn-click').addEventListener('click', ()=>{
// document.querySelector('.top').classList.toggle("trans");
// console.log(document.querySelector('.top').classList);
// });
let p = document.querySelectorAll('.slider-bg img');
let pp = Array.from(p);
console.log(pp);
function changeBgColor (){
if (i == 0 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(0,0,0)';
}
if (i == 1 ) {
document.querySelector('.slider-bg').style.backgroundColor = 'rgb(34, 73, 200)';
}
if (i == 2 ) {document.querySelector('.slider-bg').style.backgroundColor = 'red';}
if (i == 3 ) {document.querySelector('.slider-bg').style.backgroundColor = 'green';}
}
let i = 1;
function asd(arguments) {
setTimeout(()=>{
// b = arrayImages[i];
// document.querySelector('#slider-hero img').src = b;
let z = document.querySelectorAll('li');
let zz = Array.from(z);
zz.forEach((item)=>{item.classList.remove('nav-active')});
// console.log(el);
zz[i].classList.add('nav-active');
b = pp[i];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
changeBgColor();
i++;
if (i ==4) {
i =0;
}
console.log(b);
asd();
},4000);
}
asd();
document.querySelector('.slider-nav').addEventListener('click',(el)=>{
if (el.target.tagName === 'LI') {
let z = document.querySelectorAll('li');
let zz = Array.from(z);
console.log(el.target.dataset.id);
b = pp[el.target.dataset.id];
pp.forEach((val)=>{
val.classList.remove('trans');
});
b.classList.add('top');
b.classList.add('trans');
zz.forEach((item)=>{item.classList.remove('nav-active');});
el.target.classList.add('nav-active');
i = el.target.dataset.id;
changeBgColor();
}
});
</script>
</body>
</html>

Seems working fine to Chrome Browser. You can validate the css for all the browser using: https://www.browseemall.com/Compatibility/ValidateCSS
There might be chances of browser compatibility issues.
Seems broken in IE10 and lower.
ul{align-items:center;display:flex;justify-content:center;list-style-type:none;margin:0;padding:0;}

Related

Multiple popup windows - information is the same in all of them

I have a problem with my modals. I'm creating my first portfolio website using js and the popup window is not working as I expect.
Everything works fine, only when I open the portfolio item and click "project details" each popup window has the same information about the item. Project name, category etc. do not change. What could be the problem? I will be grateful for your help.
and JavaScript, HTML and CSS:
const filterContainer = document.querySelector(".portfolio-filter"),
portfolioItemsContainer = document.querySelector(".portfolio-items"),
portfolioItems = document.querySelectorAll(".portfolio-item"),
popup = document.querySelector(".portfolio-popup"),
prevBtn = popup.querySelector(".pp-prev"),
nextBtn = popup.querySelector(".pp-next"),
closeBtn = popup.querySelector(".pp-close"),
projectDetailsContainer = popup.querySelector(".pp-details"),
projectDetailsBtn = popup.querySelector(".pp-project-details-btn");
let itemIndex, slideIndex, screenshots;
/* filter portfolio items*/
filterContainer.addEventListener("click", (event) => {
if (event.target.classList.contains("filter-item") &&
!event.target.classList.contains("active")) {
filterContainer.querySelector(".active").classList.remove("outer-shadow",
"active");
event.target.classList.add("active", "outer-shadow");
const target = event.target.getAttribute("data-target");
portfolioItems.forEach((item) => {
if (target == item.getAttribute("data-category") || target === 'all') {
item.classList.remove("hide");
item.classList.add("show");
} else {
item.classList.remove("show");
item.classList.add("hide");
}
})
}
})
portfolioItemsContainer.addEventListener("click", (event) => {
if (event.target.closest(".portfolio-item-inner")) {
const portfolioItem = event.target.closest(".portfolio-item-inner").
parentElement;
itemIndex = Array.from(portfolioItem.parentElement.children).indexOf(
portfolioItem);
screenshots = portfolioItems[itemIndex].querySelector(".portfolio-item-img img").getAttribute("data-screenshots");
screenshots = screenshots.split(",");
if (screenshots.length === 1) {
prevBtn.style.display = "none";
nextBtn.style.display = "none";
} else {
prevBtn.style.display = "block";
nextBtn.style.display = "block";
}
slideIndex = 0;
popupToggle();
popupSlideshow();
popupDetails();
}
})
closeBtn.addEventListener("click", () => {
popupToggle();
if (projectDetailsContainer.classList.contains("active")) {
popupDetails();
}
})
function popupToggle() {
popup.classList.toggle("open");
bodyScrollingToggle();
}
function popupSlideshow() {
const imgSrc = screenshots[slideIndex];
const popupImg = popup.querySelector(".pp-img");
popupImg.src = imgSrc;
popup.querySelector(".pp-counter").innerHTML = (slideIndex + 1) + " of " +
screenshots.length;
}
nextBtn.addEventListener("click", () => {
if (slideIndex === screenshots.length - 1) {
slideIndex = 0;
} else {
slideIndex++;
}
popupSlideshow();
})
prevBtn.addEventListener("click", () => {
if (slideIndex === 0) {
slideIndex = screenshots.length - 1
} else {
slideIndex--;
}
popupSlideshow();
})
function popupDetails() {
if (!portfolioItems[itemIndex].querySelector(".portfolio-item-details")) {
projectDetailsBtn.style.display = "none";
return;
}
projectDetailsBtn.style.display = "block";
const details = portfolioItems[itemIndex].querySelector(".portfolio-item-details").innerHTML;
popup.querySelector(".pp-project-details").innerHTML = details;
const title = portfolioItems[itemIndex].querySelector(".portfolio-item-title").innerHTML;
popup.querySelector(".pp-title h2").innerHTML = title;
const category = portfolioItems[itemIndex].getAttribute("data-category");
console.log(category);
popup.querySelector(".pp-project-category").innerHTML = category.split("-").join("-");
}
projectDetailsBtn.addEventListener("click", () => {
popupDetails();
})
function popupDetails() {
if (projectDetailsContainer.classList.contains("active")) {
projectDetailsBtn.querySelector("i").classList.remove("fa-minus");
projectDetailsBtn.querySelector("i").classList.add("fa-plus");
projectDetailsContainer.classList.remove("active");
projectDetailsContainer.style.maxHeight = 0 + "px"
} else {
projectDetailsBtn.querySelector("i").classList.remove("fa-plus");
projectDetailsBtn.querySelector("i").classList.add("fa-minus");
projectDetailsContainer.classList.add("active");
projectDetailsContainer.style.maxHeight = projectDetailsContainer.
scrollHeight + "px";
popup.scrollTo(0, projectDetailsContainer.offsetTop);
}
}
#import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Montserrat&family=Oooh+Baby&family=Poppins:wght#200;300;400;500;600&display=swap');
:root {
--bg-black-900: #f2f2fc;
--bg-black-100: #fdf9ff;
--bg-black-50: #e8dfec;
--text-black-900: #302e4d;
--text-black-700: #504e70;
--outer-shadow: 3px 3px 3px #d0d0d0, -3px -3px 3px #f8f8f8;
--outer-shadow-0: 0 0 0 #d0d0d0, 0 0 0 #f8f8f8;
--inner-shadow: inset 3px 3px 3px #d0d0d0, inset -3px -3px 3px #f8f8f8;
--bg-opacity: rgba(255, 255, 255, 0.5);
}
.padd-10 {
padding-bottom: 30px;
}
body {
line-height: 1.5;
font-size: 16px;
font-family: 'Poppins' sans-serif;
}
body.stop-scrolling {
overflow-y: hidden;
}
* {
margin: 0;
padding: 0;
outline: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
::before,
::after {
box-sizing: border-box;
}
ul {
list-style: none;
}
.section {
background: var(--bg-black-900);
min-height: 100vh;
display: block;
padding: 0 30px;
opacity: 1;
}
.hidden {
display: none !important;
}
.padd-15 {
padding-left: 15px;
padding-right: 15px;
}
.container {
max-width: 1100px;
width: 100%;
margin: auto;
}
.containerr {
max-width: 1100px;
width: 100%;
margin: auto;
}
.section .containerr {
padding-top: 100px;
padding-bottom: 70px;
}
.section .container {
padding-top: 60px;
padding-bottom: 70px;
}
.section-title {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;
}
.section-title h2 {
font-size: 40px;
color: var(--text-black-900);
font-weight: 700;
position: relative;
}
.section-title h2::before {
content: '';
height: 4px;
width: 50px;
background-color: var(--skin-color);
position: absolute;
top: 100%;
left: 0;
}
.section-title h2::after {
content: '';
height: 4px;
width: 25px;
background-color: var(--skin-color);
position: absolute;
top: 100%;
left: 0;
margin-top: 8px;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
position: relative;
}
/* portfolio */
.portfolio .portfolio-filter {
padding: 0 15px;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
margin-bottom: 20px;
}
.portfolio .section-title {
margin-bottom: 40px;
}
.portfolio .filter-item {
display: inline-block;
margin: 0 5px 10px;
padding: 5px 10px;
border-radius: 30px;
cursor: pointer;
font-weight: 500;
color: var(--text-black-700);
text-transform: capitalize;
font-size: 16px;
transition: all 0.3s ease;
}
.portfolio .filter-item:hover:not(.active) {
opacity: 0.6;
}
.portfolio .filter-item.active {
color: var(--skin-color);
}
.portfolio .portfolio-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
display: flex;
flex-wrap: wrap;
}
.portfolio .portfolio-item-inner {
padding: 15px;
border-radius: 5px;
cursor: pointer;
width: 100%;
}
.portfolio .portfolio-item-details {
display: none;
}
.portfolio img {
border-radius: 5px;
width: 100%;
transition: all 0.3s ease;
}
.portfolioo-item-img {
position: relative;
}
.portfolio .portfolio-item.hide {
display: none;
}
.portfolio .portfolio-item.show {
display: block;
animation: fadeInTop 0.5s ease;
}
.portfolio .view-project {
text-transform: capitalize;
font-size: 16px;
font-weight: 500;
color: var(--skin-color);
display: flex;
z-index: -1;
opacity: 0;
}
.portfolio-item-title {
margin-top: -18px;
}
.portfolio .portfolio-item-inner:hover img {
transform: translateY(-23px);
}
.portfolio .portfolio-item-inner:hover .view-project {
transform: translateY(-23px);
transition: all 0.3s ease;
opacity: 1;
}
.portfolio .portfolio-item-inner p {
font-size: 16px;
color: var(--text-black-700);
text-transform: capitalize;
}
.btn1 {
border-radius: 30px;
font-size: 16px;
font-weight: 500;
color: var(--text-black-900);
cursor: pointer;
padding: 0 15px;
top: 15px;
height: 40px;
line-height: 40px;
text-align: center;
}
.btn1:hover {
color: var(--skin-color);
cursor: pointer;
}
.nacisk {}
/*portfolio popup*/
.portfolio-popup {
background-color: var(--bg-black-900);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.portfolio-popup.open {
visibility: visible;
opacity: 1;
}
.portfolio-popup .pp-details {
max-width: 1350px;
width: calc(85% + 30px);
margin: auto;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.5s ease;
}
.portfolio-popup .pp-details.active {
opacity: 1;
}
.portfolio-popup .pp-title {
padding: 0 15px;
}
.portfolio-popup .pp-title h2 {
font-size: 28px;
color: var(--text-black-900);
text-transform: capitalize;
font-weight: 600;
margin: 0 0 5px;
}
.portfolio-popup .pp-title p {
font-size: 14px;
font-weight: 600;
color: var(--text-black-700);
margin: 0 0 15px;
border-bottom: 1px solid rgb(230, 228, 228);
padding-bottom: 10px;
}
.portfolio-popup .pp-title p span {
font-weight: 400;
text-transform: capitalize;
}
.portfolio-popup .pp-details-inner {
padding: 30px 0;
}
.portfolio-popup .pp-project-details h3 {
font-size: 20px;
font-weight: 600;
color: var(--text-black-700);
margin: 0 0 15px;
text-transform: capitalize;
}
.portfolio-popup .description p {
font-size: 16px;
color: var(--text-black-700);
line-height: 26px;
margin: 0;
}
.portfolio-popup .description {
flex: 0 0 65%;
max-width: 65%;
padding: 0 15px;
}
.portfolio-popup .info {
flex: 0 0 35%;
max-width: 35%;
padding: 0 50px;
}
.portfolio-popup .info ul li {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 16px;
}
.portfolio-popup .info ul li span {
font-weight: 400;
}
.portfolio-popup .info ul li a {
color: var(--skin-color);
}
.portfolio-popup .info ul li:last-child {
margin-bottom: 0;
}
.portfolio-popup .separator {
height: 1px;
width: 100%;
display: block;
background-color: rgb(230, 228, 228);
}
.portfolio-popup .pp-img {
max-width: 100%;
width: auto;
height: auto;
padding: 10px;
border-radius: 5px;
}
.portfolio-popup .pp-main {
min-height: 100vh;
max-width: 1350px;
width: 85%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.portfolio-popup .pp-main-inner {
padding: 70px 0 50px;
position: relative;
}
.portfolio-popup .pp-project-details-btn {
position: absolute;
left: 0;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
color: var(--text-black-900);
cursor: pointer;
padding: 0 15px;
top: 15px;
height: 40px;
line-height: 40px;
}
.portfolio-popup .pp-project-details-btn:hover {
color: var(--skin-color);
}
.portfolio-popup .pp-project-details-btn i {
margin-left: 5px;
}
.portfolio-popup .pp-close {
position: absolute;
right: 0;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 35px;
height: 40px;
width: 40px;
top: 15px;
color: var(--text-black-900);
cursor: pointer;
}
.portfolio-popup .pp-close:hover {
color: var(--skin-color);
}
.portfolio-popup .pp-counter {
position: absolute;
right: 0;
height: 40px;
line-height: 40px;
bottom: 5px;
font-size: 16px;
color: var(--text-black-700);
}
.portfolio-popup .pp-prev,
.portfolio-popup .pp-next {
position: fixed;
top: 50%;
height: 40px;
width: 40px;
cursor: pointer;
text-align: center;
font-size: 20px;
z-index: 1010;
color: var(--text-black-900);
opacity: 0.6;
}
.portfolio-popup .pp-prev:hover,
.portfolio-popup .pp-next:hover {
opacity: 1;
}
.portfolio-popup .pp-prev i,
.portfolio-popup .pp-next i {
line-height: 40px;
}
.portfolio-popup .pp-prev i {
transform: rotate(180deg);
}
.portfolio-popup .pp-prev {
left: 15px;
}
.portfolio-popup .pp-next {
right: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bartek Lisowski</title>
<!--css file-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="color-1.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<!-- Main Container Start -->
<div class="main-container">
<!-- Portfolio Section Start-->
<section class="portfolio section" id="portfolio">
<div class="container">
<div class="row">
<div class="section-title padd-15">
<h2>Portfolio</h2>
</div>
</div>
<div class="row">
<div class="portfolio-heading padd-15 padd-10">
<h2>My Last Projects : </h2>
</div>
<div class="portfolio-filter padd-15 ">
<span class="filter-item outer-shadow active" data-target="all">All</span>
<span class="filter-item" data-target="web-application">web-application</span>
<span class="filter-item" data-target="photoshop">photoshop</span>
<span class="filter-item" data-target="mobile-app">mobile app</span>
<span class="filter-item" data-target="e-commerce">e commerce</span>
</div>
</div>
<!--- Portfolio item starts-->
<div class="row portfolio-items">
<!--portfolio item start-->
<div class="portfolio-item" data-category="photoshop">
<div class="portfolio-item-inner outer-shadow">
<div class="portfolio-item-img">
<img src="https://picsum.photos/200" alt="portfolio" data-screenshots="https://picsum.photos/200">
<!-- project button-->
<span class="view-project">view project</span>
</div>
<p class="portfolio-item-title">Web designs</p>
<!-- portfolio item details start-->
<div class="portfolio-item-details">
<div class="row">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- portfolio item details end-->
</div>
</div>
<!--portfolio item end-->
<!--portfolio item start-->
<div class="portfolio-item" data-category="mobile-app">
<div class="portfolio-item-inner outer-shadow">
<div class="portfolio-item-img">
<img src="https://picsum.photos/200" alt="portfolio" data-screenshots="https://picsum.photos/200">
<!-- project button-->
<span class="view-project">view project</span>
</div>
<p class="portfolio-item-title">Photosho Projects</p>
<!-- portfolio item details start-->
<div class="portfolio-item-details">
<div class="row">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
<!-- portfolio item details end-->
</div>
</div>
<!--portfolio item end-->
<!-- portfolio item button start-->
<!-- portfolio item button end-->
</div>
</section>
<!--portfolio popup start-->
<div class="pp portfolio-popup">
<div class="pp-details">
<div class="pp-details-inner">
<div class="pp-title">
<h2>personal portfolio</h2>
<p>Category - <span class="pp-project-category">Web Application</span></p>
</div>
<div class="pp-project-details">
<div class="row padd-15">
<div class="description">
<h3>Project Brief:</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel consequatur rem libero similique quam ipsa facere porro voluptatum, hic in nulla natus nemo itaque? Cupiditate iusto cum sequi adipisci doloribus?
</p>
</div>
<div class="info">
<h3>Project info</h3>
<ul>
<li>Date - <span>2020</span></li>
<li>Client - <span>xyz</span></li>
<li>Tools - <span>html, css, js</span></li>
<li>Web - <span>www.domain.com</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="separator">
</div>
<div class="pp-main">
<div class="pp-main-inner">
<div class="pp-project-details-btn outer-shadow in-shadow">Project Detils <i class="fas fa-plus"></i></div>
<div class="pp-close outer-shadow in-shadow">×</div>
<img src="https://picsum.photos/200" alt="img" class="pp-img outer-shadow">
<div class="pp-counter">1 of 6</div>
</div>
<div class="pp-loader">
<div></div>
</div>
<!-- pp navigation-->
<div class="pp-prev"><i class="fas fa-play"></i></div>
<div class="pp-next"><i class="fas fa-play"></i></div>
</div>
</div>
<!--portfolio popup end-->
<!-- Portfolio Section End-->
</div>
<!-- Main Content End-->
</div>
<!-- Main Container End -->
<!-- JS Files-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.12/typed.min.js" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>

It does not detect the top property in my code when the window is 1300px

Error does not recognize the top:
Hello, my problem is that when the window is less than 1300px, the upper part does not apply: 100% only applies this condition if I update the page, on the contrary, if it is the other way around, ¿the same thing happens. How can i fix this.?
I leave the code so that you can test the error I am a newbie I hope you can help me. Cheers
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
max-width: 450px;
position: relative;
margin: 50px auto;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>
I have solved your problem by adjusting the code in the box-container. Your image was at the top, however the div containing the image wasn't. I changed box-container to have a top of 0, and removed the max-width because you had already said the width should be 100%. You can adjust the code (like adding margin and padding) to your needs.
var open = document.getElementById("open");
var photo = document.getElementById("photo");
function mediaQueries(btn) {
//Width: 1300px
if (btn.matches) {
//top 100% does not apply, left 100% still applies
open.addEventListener("mouseenter", () => {
photo.style = "top: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "top: 0";
});
} else {
open.addEventListener("mouseenter", () => {
photo.style = "left: 100%";
});
open.addEventListener("mouseleave", () => {
photo.style = "left: 0";
});
}
}
var btn = window.matchMedia("(max-width: 1300px)");
mediaQueries(btn);
btn.addListener(mediaQueries);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box-container {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
height: 350px;
position: relative;
top:0;
display: flex;
flex-direction: row;
align-items: center;
background: url("https://i.ibb.co/pdnQfFn/black-and-white-1281562-640-min.jpg");
box-shadow: 2px 2px 6px;
}
.box-container .box-content {
width: 100%;
height: auto;
padding: 20px;
color: #fff;
}
.box-container .box-content h2 {
letter-spacing: 1px;
}
.box-container .box-content p {
margin: 10px 0 20px 0;
line-height: 19.2px;
/*120%*/
}
.box-container .box-content button {
padding: 10px 20px;
border: none;
background: #5d08be;
color: #fff;
font-weight: bold;
transition: 0.4s;
cursor: pointer;
}
.box-container .box-content button:hover {
background: #10960b;
transition: 0.4s;
}
.box-container img {
width: 100%;
height: 100%;
position: absolute;
transition: 0.4s;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Card effect</title>
</head>
<body>
<div class="box-container" id="open">
<div class="box-content">
<div class="txt">
<h2>Articulos de Moda</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Impedit, ullam assumenda.
Quibusdam, dolores? Atanimi
rerum nobis velit necessitatibus qui.</p>
<button>LEER MÁS</button>
</div>
</div>
<img src="https://i.ibb.co/zhm9qNd/girl-min.jpg" id="photo">
</div>
</body>
</html>

Javascript - Skeleton Content Placeholder

This function displays a style for :empty HTML elements (designed to look like a placeholder) until page load, then injects some content into these elements thus removing the :empty style and revealing the content.
How do I simply show the placeholders until existing HTML content is loaded without using :empty and injecting it through JS? I want to already have data for the h1, p and img and have a placeholder show for these elements during page load.
var
image = document.querySelector('.sk-image'),
heading = document.querySelector('.sk-heading'),
paragraph = document.querySelector('.sk-paragraph');
var content = false;
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
if (content === false) {
content = true;
image.src = 'http://unsplash.it/400/400?image=564';
heading.innerHTML = 'Some heading';
paragraph.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa rerum porro aut laboriosam animi.';
} else {
content = false;
image.src = '';
heading.innerHTML = '';
paragraph.innerHTML = '';
}
}, 2000);
}, false);
body {
display: flex
}
.card {
width: 100%;
max-width: 300px;
min-height: 400px;
margin: 10px;
background: #fff;
border-bottom: 1px solid #d8d8d8;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.card__image {
position: relative;
width: 100%;
height: 0;
padding-bottom: 60%;
background: #eee;
overflow: hidden;
}
.card__image:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.65), rgba(0, 0, 0, 0));
transform: translateX(-100%);
animation: loading 1.5s infinite;
}
.card__image img {
position: relative;
max-width: 100%;
z-index: 1;
}
.card__content {
padding: 20px;
}
.card__heading {
margin-top: 0;
margin-bottom: 10px;
font-family: 'Alegreya Sans', sans-serif;
font-weight: 400;
}
.card__heading:empty {
width: 100%;
height: 35px;
background: #d8d8d8;
margin-bottom: 20px;
}
.card__paragraph {
margin: 0;
font-size: 20px;
line-height: 1.35;
}
.card__paragraph:empty {
width: 90%;
height: 20px;
background: #d8d8d8;
}
.button {
margin: 10px;
padding: 15px 20px;
background: #2aa1c0;
border: 0;
color: #fff;
}
.button:hover {
background: #0e647d;
}
#-moz-keyframes loading {
100% {
transform: translateX(100%);
}
}
#-webkit-keyframes loading {
100% {
transform: translateX(100%);
}
}
#-o-keyframes loading {
100% {
transform: translateX(100%);
}
}
#keyframes loading {
100% {
transform: translateX(100%);
}
}
<div class="card">
<div class="card__image">
<img class="sk-image" alt="" />
</div>
<div class="card__content">
<h1 class="card__heading sk-heading"></h1>
<p class="card__paragraph sk-paragraph"></p>
</div>
</div>
<div class="card">
<div class="card__image">
<img class="sk-image" alt="" />
</div>
<div class="card__content">
<h1 class="card__heading sk-heading"></h1>
<p class="card__paragraph sk-paragraph"></p>
</div>
</div>

Slider Height Images

I have an image slider with thumbnails and am having a bit of a problem. When you click on the thumbnail of the last image, the thumbnails below as well as the arrows in the carousel jump down a bit. It doesn't happen to any of the other images. It's a small problem but it's driving me crazy and I don't know why it's happening, since I made sure all the images were the same height. Here's the codepen.
$(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 = images.index($(".unidoor-class[data-active=true]"));
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").attr('data-active', "false");
// get the next active image and add active class to that next current image
var $nextImage = $(images[nextIndex]);
if ($nextImage.data('iframe')) {
$(images[nextIndex]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($nextImage.height());
} else {
$(images[nextIndex]).addClass("active").attr('data-active', "true");
$('#sketchfab-iframe').removeClass('active');
}
});
$(".thumb").on("click touchstart", function(event){
event.preventDefault();
var images = $(".unidoor-class");
var indexSelected = $(this).data("img-index");
var currentShown = images.index($(".unidoor-class[data-active=true]"));
if (currentShown === indexSelected) return false;
images.removeClass("active").attr('data-active', "false");
if ($(this).data('iframe')) {
$(images[indexSelected]).attr('data-active', "true");
$('#sketchfab-iframe').addClass('active').height($(images[indexSelected]).height());
} else {
images.removeClass("active");
$(images[indexSelected]).addClass('active').attr('data-active', "true");;
$('#sketchfab-iframe').removeClass('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);
var iframe = $(this).data('iframe');
if (iframe) {
currentThumb.data("iframe", iframe);
}
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; */
}
#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%;
/* width: 900px;
height: 600px; */
margin: 0 auto;
overflow: hidden;
}
#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;
}
#sketchfab-iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#sketchfab-iframe {
width: 100%;
height: 100%;
opacity: 0;
transition: opacity .5s;
}
#sketchfab-iframe.active {
opacity: 1;
position: relative;
}
<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="slideshow-container">
<div id="imgDetail">
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" data-active="true" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" data-active="false" />
<img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" data-active="false" />
<img data-iframe="sketchfab-iframe" 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" data-active="false" />
<iframe id="sketchfab-iframe" width="600" height="400" src="https://sketchfab.com/models/bbea52bd14c84d65b7b5512bae94ceac/embed" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<!--CONTROLS-->
<p>❬</p>
<p>❭</p>
</div>
<!--Thumbnails-->
<div id="thumbnails">
</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>
iframe by default is an inline element
add style
display:block;
for
#sketchfab-iframe.active {
opacity: 1;
position: relative;
display: block;**
}
Codepen
Read more on https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element

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.

Categories