We Keep Coding

Why does it work in Safari but not in Chrome?

This HTML with simple CSS and JS works perfectly in Safari, but in Chrome (both Mac and Win) it does not work at all, does not even scroll... not sure the is JS, or the CSS or both.
I tried to change the script or the CSS but nothing works.
Please help 🙏
https://codepen.io/sinetempore/pen/oNwNKZr
Here is my HTML and my CSS:
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 100) {
$('.p1, .p2').addClass('hide');
} else {
$('.p1, .p2').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1200) {
$('.p3').addClass('hide');
$('.p2').removeClass('hide');
} else {
$('.p3').removeClass('hide');
}
});
document.querySelector('.parallax').addEventListener('scroll', function() {
if ($(this).scrollTop() > 1800) {
$('.p3-text, .p3sottocntr, .p-main.p4-text').addClass('hidefoot');
} else {
$('.p3-text, .p3sottocntr, .p-main.p4-text').removeClass('hidefoot');
}
});
/// Scroll back to top
$("a[href='.parallax']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
#charset "utf-8";
* {
margin: 0;
}
body {
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
font-family: MuseoSans_700;
}
a {
color: black;
text-decoration: none;
}
/* ---------- LOGO ----------*/
.logo-p1 {
overflow: hidden;
border: 0px solid red;
width: 120px;
height: 45px;
background-color: white;
position: absolute;
top: calc(50% - 22.5px);
left: calc(50% - 60px);
margin: 0;
}
.logo-p2 {
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
.logo-p3 {
transform: rotate(180deg);
left: 0;
overflow: hidden;
border: 0px solid red;
width: 100px;
height: 100px;
background-color: white;
position: absolute;
top: 40px;
left: 40px;
margin: 0;
}
/* ---------- PARALLAX ----------*/
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: static;
background: rgba(255, 0, 0, 0);
z-index: 2;
}
.speed-1 {
transform: translateZ(-6px) scale(7);
}
/* ---------- SECTIONS ----------*/
.p1 {
height: 100%;
width: 100%;
position: absolute;
display: block;
z-index: 3;
background: white;
opacity: 1;
transition: all 0.9s ease;
}
.p1.hide {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p2 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p2.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3 {
height: auto;
width: 100%;
position: fixed;
display: block;
z-index: 2;
top: 0vh;
background: white;
visibility: hidden;
transition: all 0.4s ease;
opacity: 0;
}
.p3.hide {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p-main.p4-text.hidefoot {
width: 100%;
height: 250px;
background-color: black;
/* position: relative; */
left: 0px;
margin: auto;
bottom: 250px;
}
.p-main.p4-text {
width: 100%;
height: 0px;
background-color: black;
position: fixed;
left: 0px;
margin: auto;
bottom: 0px;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 40%, 100% 0, 100% 100%, 0% 100%);
transition: all 0.9s;
transform: translateY(250px);
transform-origin: bottom;
}
.p4 {
height: auto;
width: 100%;
position: relative;
display: block;
z-index: -1;
}
.p4.hidefoot {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
/* ---------- TESTO SECTIONS ----------*/
.p-main {
width: 355px;
height: 230px;
background-color: transparent;
position: fixed;
bottom: 40px;
left: 40px;
margin: 0;
display: flex;
justify-content: left;
align-items: flex-end;
border: 0px solid red;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
}
.p3-text {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3-text.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.p-desc {
line-height: 16px;
}
.p-desc b {
font-family: MuseoSans_700;
font-weight: normal;
}
.p-col {
margin-top: 20px;
column-count: 2;
line-height: 16px;
font-family: MuseoSans_700;
}
/* ---------- MENU SOTTO ----------*/
.sottocentro {
width: 250px;
height: 140px;
background-color: transparent;
position: fixed;
bottom: 40px;
right: calc(0% - 0px);
margin: 0;
display: -webkit-box;
justify-content: center;
align-items: flex-end;
filter: invert(0);
font-family: MuseoSans-100;
font-size: 13px;
font-smoothing: antialiased;
border: 0px solid red;
right: 40px;
}
.p3sottocntr {
opacity: 1;
transition: all 0.9s ease;
visibility: visible;
}
.p3sottocntr.hidefoot {
opacity: 0;
transition: all 0.9s ease;
visibility: hidden;
}
.sottocentro ul {
list-style: none;
text-align: right;
width: auto;
border: 0px solid red;
line-height: 16px;
text-decoration: none;
clear: both;
margin: 0;
padding: 0px;
right: 40px;
position: absolute;
right: 0px;
position: absolute;
bottom: 0px;
}
.sottocentro ul li {
border: none;
text-align: right;
width: auto;
}
.sottocentro ul li.begins {
border: none;
text-align: right;
width: auto;
padding: 30px 0 0 0;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<section class="p1 speed-1">
<div class="logo-p1">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
</section>
</div>
<section class="p2">
<div class="logo-p2">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p2-text">
<div>
<p class="p-desc p2-desc"> <b>Lorem ipsum </b>dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..
</p>
</div>
</div>
</section>
<section class="p3">
<div class="logo-p3">
<img src="https://www.google.com/logos/doodles/2021/doodle-champion-island-games-august-24-6753651837108999-s.png"></img>
</div>
<div class="p-main p3-text">
<div>
<p class="p-desc p3-desc"> <b>Sed ut perspiciatis </b>unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</div>
</div>
</section>
<section class="p4">
<div class="p-main p4-text">
</div>
</section>
</body>
</html>

how to fix my page from becoming wider using js and css for a parallax

Like I was saying for some reason my screen ends up becoming wider when I scroll. My goal is to be able to click the about me section and it scrolls to the about me section or div. when I do this, however, I see that it is making the sections wider. What is making the section wider is the actual js but I don't know why.
html file
<body>
<div class="container">
<div class="header">
<img class="my-pic" src="./images/me.jpg" alt="" />
</div>
<ul class="the-links">
<li class="links" id="about-me">About Me</li>
<li class="links" id="my-projects">My Projects</li>
<li class="links" id="contact-me">Contact Me</li>
</ul>
<div class="me">
<h1>About Me Section</h1>
<br />
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet at
ad tenetur omnis perferendis totam id praesentium ab eius harum,
asperiores consequuntur nemo iste, consectetur earum porro rem
quisquam sapiente veritatis voluptatem non quae reprehenderit? Iste
rerum necessitatibus harum aut autem totam incidunt eaque a, excepturi
culpa, error blanditiis quaerat.
</p>
</div>
<div class="projects">My Projects Section</div>
<div class="contact">Contact Me Section</div>
</div>
<script src="./app.js"></script>
</body>
</html>
css file
* {
padding: 0;
margin: 0;
}
.header {
min-height: 100vh;
background: linear-gradient(45deg, rgb(156, 120, 240), rgb(169, 140, 194));
position: relative;
color: white;
max-height: 100vh;
max-width: 100%;
z-index: -1;
}
.my-pic {
border-radius: 50%;
height: 500px;
top: 50%;
left: 8%;
transform: translate(-8%, -50%);
position: absolute;
}
.links {
background: rgba(0, 0, 0, 0.5);
list-style: none;
color: whitesmoke;
font-size: xx-large;
font-family: "Style Script", cursive;
padding: 10px;
}
.links:hover {
background: rgb(41, 3, 58);
cursor: pointer;
list-style: none;
color: whitesmoke;
font-size: xx-large;
font-family: "Style Script", cursive;
padding: 10px;
}
#about-me {
left: 60%;
top: 30%;
transform: translate(-60%, -30%);
position: absolute;
}
#my-projects {
left: 60%;
top: 50%;
transform: translate(-60%, -50%);
position: absolute;
}
#contact-me {
left: 60%;
top: 70%;
transform: translate(-60%, -70%);
position: absolute;
}
ul {
z-index: 0;
}
.me {
min-height: 100vh;
max-height: 100vh;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
background: linear-gradient(35deg, black 20%, rgb(248, 28, 248));
}
.projects {
min-height: 100vh;
max-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
background: linear-gradient(35deg, rgb(8, 77, 23) 20%, rgb(248, 28, 248));
}
.contact {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: aliceblue;
background-color: black;
}
js file
const top_of_div =
window.scrollY + document.querySelector(".me").getBoundingClientRect().top;
const scrollToMe = document.querySelector("ul");
console.log(top_of_div);
scrollToMe.addEventListener("click", (e) => {
console.log(e.target.id)
const target_id = e.target.id;
if(target_id === 'about-me'){
window.scroll({
top: 1000,
left: 0,
behavior: 'smooth'
});
}
});
function parallax(element, distance, speed) {
const item = document.querySelector(element);
item.style.transform = `translateY(${distance * speed}px)`;
}
window.addEventListener("scroll", function () {
parallax(".header", window.scrollY, 0.8);
parallax(".me", window.scrollY, 0.5);
parallax(".projects", window.scrollY, 0.5);
parallax(".contact", window.scrollY, 0.5);
});

trying to create Leaflet map dynamically on a card that open and close

Hi there I am trying to make an info card for a trip (not real just practice), I want that a Leaflet map will show once the user clicks on the card as part of info card, but I not able to make the map show dynamically.
Is it possible?
Should I use promises and await? if yes how?
Or should I try useing the google map API instead?
This is the HTML CSS and JavaScript
(the js i mostly took from a youtube video but i modified it to work in my code)
const cards = document.querySelectorAll(".card");
const mapInfo = [
{curessTitle : "Big City",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Food",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Nature",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Culture",
mapLat : 51.505,
mapLon : 0,
},
{curessTitle : "Pepole",
mapLat : 51.505,
mapLon : 0,
},
];
const toggleExpansion = (element, to, duration = 350) => {
return new Promise((res) => {
element.animate([
{
top: to.top,
left: to.left,
width: to.width,
height: to.height
}
], {duration, fill: 'forwards', ease: 'ease-in'})
setTimeout(res, duration);
})
}
const fadeContent = (element, opacity, duration = 300) => {
return new Promise(res => {
[...element.children].forEach((child) => {
requestAnimationFrame(() => {
child.style.transition = `opacity ${duration}ms linear`;
child.style.opacity = opacity;
});
})
setTimeout(res, duration);
})
}
// this is the part where I am trying to add the Leaflet map dynamically
const createMap = (cardDataIndex) => {
return new Promise(res => {
const cardContentDiv = document.querySelector(".card-content");
const creatMapDiv = document.createElement("div");
creatMapDiv.id = "mapid";
cardContentDiv,appendChild(creatMapDiv);
const mymap = L.map('mapid').setView([mapInfo[cardDataIndex].mapLat, mapInfo[cardDataIndex].mapLon], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(mymap);
setTimeout(res, 1000 )
})
};
const getCardContent = (title) => {
return `
<div class="card-content">
<h2>The ${title}</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Dolorum voluptates sequi modi at voluptatibus.
Tempora iste laudantium nemo sequi soluta nobis aut ex molestias quos,
dicta, quas est iure odio?</p>
</div>
<div class="card-content">
<h2>the routs</h2>
</div>
</div>
`;
}
const onCardClick = async (e) => {
const card = e.currentTarget;
const cardDataIndex = e.currentTarget.dataset.index;
const mapLat = mapInfo[cardDataIndex].mapLat;
const mapLon = mapInfo[cardDataIndex].mapLon;
// clone the card
const cardClone = card.cloneNode(false);
// get the location of the card in the view
const {top, left, width, height} = card.getBoundingClientRect();
// position the clone on top of the original
cardClone.style.position = 'fixed';
cardClone.style.top = top + 'px';
cardClone.style.left = left + 'px';
cardClone.style.width = width + 'px';
cardClone.style.height = height + 'px';
// hide the original card with opacity
card.style.opacity = '0';
// add card to the same container
card.parentNode.appendChild(cardClone);
// create a close button to handle the undo
const closeButton = document.createElement('button');
// position the close button top corner
////// mybe creat the map after----->
closeButton.style = `
position: absolute;
z-index: 15;
top: 10px;
right: 10px;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #e25656;
outline: none;
border: none;
cursor: pointer;
`;
// attach click event to the close button
closeButton.addEventListener('click', async () => {
// remove the button on close
closeButton.remove();
// remove the display style so the original content is displayed right
cardClone.style.removeProperty('display');
cardClone.style.removeProperty('padding');
// show original card content
[...cardClone.children].forEach(child => child.style.removeProperty('display'));
fadeContent(cardClone, '0');
// shrink the card back to the original position and size
await toggleExpansion(cardClone, {top: `${top}px`, left: `${left}px`, width: `${width}px`, height: `${height}px`}, 300)
// show the original card again
card.style.removeProperty('opacity');
// remove the clone card
cardClone.remove();
});
// fade the content away
fadeContent(cardClone, '0')
.then(() => {
[...cardClone.children].forEach(child => child.style.display = 'none');
});
// expand the clone card
await toggleExpansion(cardClone, {top: "0", left: "auto", width: '100%', height: 'auto'});
const content = getCardContent(mapInfo[cardDataIndex].curessTitle, mapLat, mapLon)
// set the display block so the content will follow the normal flow in case the original card is not display block
cardClone.style = `
position: absolute;
display: flex;
padding: 0;
background: #333;
color: #ffffff;
z-index: 10;
opcity: 1;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
`
// append the close button after the expansion is done
cardClone.appendChild(closeButton);
cardClone.insertAdjacentHTML('afterbegin', content);
//createMap(cardDataIndex);
};
cards.forEach(card => card.addEventListener('click', onCardClick));
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
body {
--color-primery: #F09819;
--color-primery-dark: #e48f18;
--color-secondery: #5b86e5;
--color-error: #cc3333;
--color-success: #4bb544;
--border-radius: 4px;
font-family: sans-serif;
scroll-behavior: smooth;
background:linear-gradient(to right, #F09819, #FF512F);
}
header{
z-index: 100;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.7) ;
position: sticky;
top: 0px;
background: white;
}
nav{
min-height: 10vh;
margin: auto;
width: 90%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h1,
nav ul {
font-size: 1.2rem;
flex:1;
}
nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
nav a {
color: black;
text-decoration: none;
}
.login-account-continer{
margin-left: 5%;
display: flex;
justify-content: space-around;
align-items: center;
}
.login-btn{
font-size: 1.2rem;
cursor: pointer;
}
.account-btn{
font-size:25px;
color:#fff;
background-color: #eeeeee;
justify-content:center;
align-items:center;
width:50px;
height:50px;
border-radius:50%;
margin: 1rem;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
}
.flex-curess-container{
position: relative;
padding: 0;
margin: 5%;
height: auto;
width: 90%;
justify-content: center;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.close-info{
position: absolute;
display: none;
top: 10px;
right: 10px;
width: 15px;
height: 15px;
outline: none;
border: none;
border-radius: 50%;
background: coral;
cursor: pointer;
}
.card{
position: relative;
margin: 10px;
display: flex;
align-items: center;
justify-content: space-between;
width: 230px;
height: 400px;
flex-wrap: wrap;
flex-grow: 1;
border:none;
border-radius: var(--border-radius);
box-shadow: 3px 5px 10px #333;
cursor: pointer;
box-sizing: border-box;
overflow: hidden;
transition: all 0.5 ease-out;
}
.active {
max-width: none;
height: 800px;
}
.card .image{
width: 100%;
height: 100%;
overflow: hidden;
}
.card .image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transition: 0.5s ease-in-out;
}
.card:hover .image img{
transform: scale(1.3);
}
.card:hover .hover-img-info{
opacity: 0.9 ;
}
.hover-img-info {
margin: 0;
padding: 10%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
color: white;
width: 100%;
height: 100%;
background:rgba(51, 51, 51, 1) ;
z-index: 4;
opacity: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
transition-delay: .2s ;
}
.hover-img-info h3{
margin: 10px;
font-size: 25px;
}
#keyframes slideDown {
100%{
transform: translateY(0);
opacity: 1;
}
}
.card-content {
position: relative;
padding: 100px 25px 25px;
margin: 5%;
overflow: auto;
color: #fff;
max-width: 45%;
height: 90%;
align-items: center;
justify-content: space-between;
flex-direction: column;
flex: 1 1 wrap;
border: 1px solid #ffffff;
border-radius: var(--border-radius);
}
.card-content > * {
transform: translateY(-35px);
opacity: 0;
}
.card-content h2 {
font-size: 48px;
margin-bottom: 35px !important;
animation: slideDown 0.5s ease-out forwards;
}
.card-content p {
color: #fff;
overflow: auto;
animation: slideDown 0.5s ease-out 0.4s forwards;
}
#mapid {
height: 300px;
animation: slideDown 0.5s ease-out 0.4s forwards;
}
<!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">
<link rel="stylesheet" href="Japan-Travel-site-cursses-page.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script async src="Japan-Travel-site-cursses-page.js"></script>
<script async src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<style>
#mapid { height: 180px; }
</style>
<title>Japan Travel Curess Page</title>
</head>
<body>
<header>
<nav>
<h1>Travel Japan</h1>
<ul class="ul-nav">
<li><a data-page="home" href="">Home</a></li>
</ul>
<div class="login-account-continer">
<span class="login-btn">Login</span>
<div class="account-btn"></div>
</div>
</nav>
</header>
<main>
<div class="flex-curess-container">
<div class="card item1" data-page="big-city" data-index="0">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?city " alt="tokyo">
</div>
<div class="hover-img-info">
<div class="close-info"></div>
<h3>The Big City</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
Similique recusandae magni voluptas quod deleniti porro voluptatum ab quisquam perferendis.
</div>
</div>
</div>
<div class="card item2" data-page="food" data-index="1">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-food " alt="food">
</div>
<div class="hover-img-info">
<h3>The food</h3>
<div class="coures-info">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Esse sequi dicta earum architecto obcaecati adipisci eius reprehenderit distinctio itaque laboriosam.
</div>
</div>
</div>
<div class="card item3" data-page="nature" data-index="2">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-art " alt="art">
</div>
<div class="hover-img-info">
<h3>The Nature</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
Similique recusandae magni voluptas quod deleniti porro voluptatum ab quisquam perferendis.
</div>
</div>
</div>
<div class="card item4" data-page="culture" data-index="3">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-culter " alt="tokyo">
</div>
<div class="hover-img-info">
<h3>The Culture</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
</div>
</div>
</div>
<div class="card item5" data-page="pepole" data-index="4">
<div class="image">
<img src="https://source.unsplash.com/1600x900/?japan-people " alt="people">
</div>
<div class="hover-img-info">
<h3>The Pepole</h3>
<div class="coures-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quis magnam dolorem vero voluptatum similique tempore cumque iste harum officia!
</div>
</div>
</div>
</div>
</main>
</body>
Thank you in advance 😁

What element can make the background:url(); to not display image

I am trying to add the following effect in one of the divs of my website:
https://www.youtube.com/watch?v=o8DTzU0Iol8
I have done everything from the video, yet the background images of .container_page_1 .column.active .bg.bg1 2,3, and 4 don't show up even with full path and the jQuery doesn't work as well.
I am sure that the thing that causes these issues is that I've added the code from the tutorial in a div that's not directly in the body, it's in other div, that's in another div.
I will paste all the code of the page, both HTML and CSS and also link a code pen, because I do not know what part of the code is faulty...
This is a live codepen: Codepen
I've separated my website into 3 pages. I've added a parallax effect on the first page and I've tried adding the effect from the video tutorial into the second page.
I also have a reset.css file that's just too big to add here. I've found it online. Without the reset.css the codepen will have a margin at the top through which you can see the background image that should have been on .container_page_1 .column.active .bg.bg1.
What do you think ?
$(document).on('mouseover', 'container_page_1 .column', function() {
$(this).addClass('active').siblings().removeClass('active');
})
// eliminate scroll-bar
var child = document.getElementById('child-container');
child.style.right = child.clientWidth - child.offsetWidth + "px";
/* *** index.html - START *** */
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
border: 0;
}
#parent-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
#child-container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px; /* exact value is given through JavaScript */
overflow: auto;
scroll-snap-type: both proximity;
}
header {
height: 100%;
background-image: url("https://i.postimg.cc/V671cpsf/ps4-controller-min.jpg");
background-attachment: fixed;
background-position: bottom center;
background-repeat: no-repeat;
background-size: cover;
text-align: center;
scroll-snap-align: center;
}
header h1 {
font-size: 32px;
font-weight: bold;
position: sticky;
top: 5%;
margin-bottom:10px;
}
header p {
position: sticky;
width: 450px;
text-align: center;
margin: auto;
margin-top: 100px;
}
.container_page_1 {
width: 100%;
height: 100vh;
/* background-color: red; */
scroll-snap-align: center;
overflow: hidden;
}
.container_page_1 .column {
width: 25%;
height: 100%;
float: left;
border-right: 2px solid rgba(0, 0, 0, 0.5);
box-sizing: border-box;
z-index: 1;
}
.container_page_1 .column:last-child {
border-right: none;
}
.container_page_1 .column .content {
position: relative;
height: 100%;
}
.container_page_1 .column .content h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
background: rgba(0, 0, 0, .1);
text-align: center;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, .2);
font-size: 15em;
border-top: 2px solid rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.container_page_1 .column .content .box {
position: absolute;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
padding: 40px;
background: rgba(255, 255, 255, 1);
text-align: center;
transition: 0.5s;
opacity: 0;
}
.container_page_1 .column.active .content .box {
opacity: 1;
}
.container_page_1 .column .content .box h2 {
margin: 0;
padding: 0;
font-size: 30px;
color: #262626;
}
.container_page_1 .column .content .box p {
color: #262626;
font-size: 18px;
}
.container_page_1 .column .bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.container_page_1 .column.active .bg.bg1 {
background: url('https://i.postimg.cc/ZRYZ24Ss/ac-odyssey-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg2 {
background: url('https://i.postimg.cc/x8h2XmbB/borderlands-3-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg3 {
background: url('https://i.postimg.cc/1RjPCkYM/god-of-war-4-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_1 .column.active .bg.bg4 {
background: url('https://i.postimg.cc/qqzrBwg8/sw-jedi-fallen-order-min.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
transition: 0.5s;
}
.container_page_2 {
width: 100%;
height: 100%;
background-color: green;
scroll-snap-align: center;
}
/* *** index.html - END *** */
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div id="parent-container">
<div id=child-container>
<header>
<a href="#page2">
<h1 id="sticky-title">ACG - Gaming and e-Sports News</h1>
</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi debitis in libero tenetur suscipit iusto eum nulla dolorum aperiam adipisci unde veritatis vel iure, a nam, saepe exercitationem illum vitae.</p>
</header>
<div id="page2" class="container_page_1">
<div class="column active">
<div class="content">
<h1>1</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg1"></div>
</div>
<div class="column">
<div class="content">
<h1>2</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg2"></div>
</div>
<div class="column">
<div class="content">
<h1>3</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg3"></div>
</div>
<div class="column">
<div class="content">
<h1>4</h1>
<div class="box">
<h2>What is lorem ipsum</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Inventore necessitatibus possimus fuga voluptate incidunt enim eius sed, ad suscipit error quasi ex blanditiis ipsa, at vero officiis voluptatem a modi!
</p>
</div>
</div>
<div class="bg bg4"></div>
</div>
</div>
<div class="container_page_2">
</div>
</div>
</div>

autoplay with slick slider and videos

I already made a long search here for the solution, but can't find anything...
I'm using the code from this pen: https://codepen.io/digistate/pen/MvapbE
I changed the videos for youtube, the autoplay works nice, but the slider is not automated, I would like the slide change to another item automatically, image or video, and when this item is video, it autoplay until the end, and after that change for the next item...
It can be done?
Thanks!
var slideWrapper = $(".main-slider"),
iframes = slideWrapper.find('.embed-player'),
lazyImages = slideWrapper.find('.slide-image'),
lazyCounter = 0;
// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command){
if (player == null || command == null) return;
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
// When the slide is changing
function playPauseVideo(slick, control){
var currentSlide, slideType, startTime, player, video;
currentSlide = slick.find(".slick-current");
slideType = currentSlide.attr("class").split(" ")[1];
player = currentSlide.find("iframe").get(0);
startTime = currentSlide.data("video-start");
if (slideType === "vimeo") {
switch (control) {
case "play":
if ((startTime != null && startTime > 0 ) && !currentSlide.hasClass('started')) {
currentSlide.addClass('started');
postMessageToPlayer(player, {
"method": "setCurrentTime",
"value" : startTime
});
}
postMessageToPlayer(player, {
"method": "play",
"value" : 1
});
break;
case "pause":
postMessageToPlayer(player, {
"method": "pause",
"value": 1
});
break;
}
} else if (slideType === "youtube") {
switch (control) {
case "play":
postMessageToPlayer(player, {
"event": "command",
"func": "mute"
});
postMessageToPlayer(player, {
"event": "command",
"func": "playVideo"
});
break;
case "pause":
postMessageToPlayer(player, {
"event": "command",
"func": "pauseVideo"
});
break;
}
} else if (slideType === "video") {
video = currentSlide.children("video").get(0);
if (video != null) {
if (control === "play"){
video.play();
} else {
video.pause();
}
}
}
}
// Resize player
function resizePlayer(iframes, ratio) {
if (!iframes[0]) return;
var win = $(".main-slider"),
width = win.width(),
playerWidth,
height = win.height(),
playerHeight,
ratio = ratio || 16/9;
iframes.each(function(){
var current = $(this);
if (width / ratio < height) {
playerWidth = Math.ceil(height * ratio);
current.width(playerWidth).height(height).css({
left: (width - playerWidth) / 2,
top: 0
});
} else {
playerHeight = Math.ceil(width / ratio);
current.width(width).height(playerHeight).css({
left: 0,
top: (height - playerHeight) / 2
});
}
});
}
// DOM Ready
$(function() {
// Initialize
slideWrapper.on("init", function(slick){
slick = $(slick.currentTarget);
setTimeout(function(){
playPauseVideo(slick,"play");
}, 1000);
resizePlayer(iframes, 16/9);
});
slideWrapper.on("beforeChange", function(event, slick) {
slick = $(slick.$slider);
playPauseVideo(slick,"pause");
});
slideWrapper.on("afterChange", function(event, slick) {
slick = $(slick.$slider);
playPauseVideo(slick,"play");
});
slideWrapper.on("lazyLoaded", function(event, slick, image, imageSource) {
lazyCounter++;
if (lazyCounter === lazyImages.length){
lazyImages.addClass('show');
// slideWrapper.slick("slickPlay");
}
});
//start the slider
slideWrapper.slick({
// fade:true,
autoplaySpeed:4000,
lazyLoad:"progressive",
speed:600,
arrows:false,
dots:true,
cssEase:"cubic-bezier(0.87, 0.03, 0.41, 0.9)"
});
});
// Resize event
$(window).on("resize.slickVideoPlayer", function(){
resizePlayer(iframes, 16/9);
});
$fonts: Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
$bg_color: #2d3042;
$font_color: #efefef;
$link_color: #efefef;
$link_hover_color: #fff;
*, *:before, *:after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: $fonts;
background-color: $bg_color;
position: relative;
color: $font_color;
text-align: center;
a, a:visited {
color: $link_color;
text-decoration: none;
}
a:hover {
color: $link_hover_color;
}
}
%bv_hidden {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
%filled_obj {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
padding: 0 5%;
text-align: left;
z-index: 1;
h1 {
display: inline-block;
font-size: 22px;
font-weight: bold;
padding-top: 18px;
}
nav {
display: inline-block;
float: right;
ul {
li {
display: inline-block;
vertical-align: top;
font-size: 13px;
a {
display: block;
padding: 24px 15px;
&:hover {
background-color: rgba(#fff, .18);
}
}
}
}
}
}
.main-slider {
position: relative;
width: 100%;
height: 38vw;
min-height: 8vw;
margin-bottom: 50px;
opacity: 0;
visibility: hidden;
transition:all 1.2s ease;
&.slick-initialized {
opacity: 1;
visibility: visible;
}
}
.slick-slide {
position: relative;
height: 38vw;
#extend %bv_hidden;
&::before {
#extend %filled_obj;
#extend %bv_hidden;
background-color: #000;
opacity: .3;
z-index: 1;
}
video {
display: block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform:translate(-50%, -50%);
}
iframe {
position: relative;
pointer-events: none;
}
figure {
position: relative;
height: 100%;
}
.slide-image {
opacity: 0;
height: 100%;
background-size: cover;
background-position: center;
// background-color:rgba(#c46897,.38);
// background-blend-mode:overlay;
transition:all .8s ease;
&.show {
opacity: 1;
}
}
.image-entity {
width: 100%;
opacity: 0;
visibility: hidden;
}
.loading {
position: absolute;
top: 44%;
left: 0;
width: 100%;
}
.slide-media {
animation:slideOut .4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
&.slick-active {
z-index: 1;
.slide-media {
animation:slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);
}
.caption {
opacity: 1;
transform:translateY(0);
transition:all .7s cubic-bezier(0.32, 0.34, 0, 1.62) .6s;
}
}
}
.caption {
position: absolute;
top: 44%;
left: 5%;
text-align: center;
padding: 20px;
border: 3px solid;
color: #fff;
margin: 0;
font-size: 40px;
font-weight: bold;
letter-spacing: .02em;
opacity: 0;
z-index: 1;
transition:all .3s ease;
transform:translateY(100px);
#extend %bv_hidden;
}
.slick-dots {
text-align: center;
padding-top: 15px;
li {
display: inline-block;
vertical-align: top;
margin: 0 8px;
button {
width: 16px;
height: 16px;
border: none;
cursor: pointer;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 0 transparent;
vertical-align: middle;
color: #fff;
background-color: #fff;
transition:all .3s ease;
opacity: .4;
&:focus {
outline: none;
}
&:hover {
opacity: 1;
}
}
&.slick-active {
button {
border-color: $bg_color;
box-shadow: 0 0 0 2px #fff;
opacity: 1;
}
}
}
}
.container {
background-color: #f2f2f2;
color: #444;
line-height: 1.6;
padding: 40px 0;
.content {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
p {
margin-bottom: 40px;
}
}
#keyframes slideIn {
from {
filter:blur(15px);
}
to {
filter:blur(0);
}
}
#keyframes slideOut {
from {
filter:blur(0);
}
to {
filter:blur(15px);
}
}
<header>
<h1>SITE TITLE</h1>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<section class="main-slider">
<div class="item image">
<span class="loading">Loading...</span>
<figure>
<div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRkY4S0JDTk1BbE0');">
<img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLRkY4S0JDTk1BbE0" class="image-entity" />
</div>
<figcaption class="caption">Static Image</figcaption>
</figure>
</div>
<div class="item vimeo" data-video-start="4">
<iframe class="embed-player slide-media" src="https://player.vimeo.com/video/217885864?api=1&byline=0&portrait=0&title=0&background=1&mute=1&loop=1&autoplay=0&id=217885864" width="980" height="520" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p class="caption">Vimeo</p>
</div>
<div class="item image">
<figure>
<div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM');">
<img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLNXBIcEdOUFVIWmM" class="image-entity" />
</div>
<figcaption class="caption">Static Image</figcaption>
</figure>
</div>
<div class="item youtube">
<iframe class="embed-player slide-media" width="980" height="520" src="https://www.youtube.com/embed/QV5EXOFcdrQ?enablejsapi=1&controls=0&fs=0&iv_load_policy=3&rel=0&showinfo=0&loop=1&playlist=QV5EXOFcdrQ&start=1" frameborder="0" allowfullscreen></iframe>
<p class="caption">YouTube</p>
</div>
<div class="item image">
<figure>
<div class="slide-image slide-media" style="background-image:url('https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSlBkWDBsWXJNazQ');">
<img data-lazy="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSlBkWDBsWXJNazQ" class="image-entity" />
</div>
<figcaption class="caption">Static Image</figcaption>
</figure>
</div>
<div class="item video">
<video class="slide-video slide-media" loop muted preload="metadata" poster="https://drive.google.com/uc?export=view&id=0B_koKn2rKOkLSXZCakVGZWhOV00">
<source src="https://player.vimeo.com/external/138504815.sd.mp4?s=8a71ff38f08ec81efe50d35915afd426765a7526&profile_id=112" type="video/mp4" />
</video>
<p class="caption">HTML 5 Video</p>
</div>
</section>
<section class="container">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit veniam quisquam, rem illum dicta cumque, voluptate fugiat impedit beatae rerum ratione, voluptates nisi magni delectus ab, eaque atque iste. Molestias incidunt nemo veniam alias nam nisi distinctio optio error architecto odit! Illo dicta nulla fugiat distinctio laudantium, corrupti eum unde.</p>
</div>
</section>

Have you tried adding autoplay:true option in your slick initializing function? It works just fine for me.
https://codepen.io/anon/pen/qzydop
Also if you want to loop through slides you can add infinite: true option.