I am making a simple slideshow with images fading in and out. The image transition is done in CSS. I am having some issues of washed-out images during the transition. The problem is particularly visible when using the keyboard and keeping a key down. Below is a very basic example (simply press any key to change images).
Is there an easy fix to this? Ideally, I would like to have something similar to that website, which I find much more pleasing to the eye.
I have tried to play with the transition-timing-function and different transition-duration between the image and .visible rules in the CSS, without success.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
window.addEventListener('keydown', () => {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
});
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body, figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
Use a timer with a 100 millisecond delay with each keydown event
Use a control variable whose value is false with each keydown event
and the next image cannot be displayed until it is false and its value
becomes true when the timer time has come.
const imgs = document.querySelectorAll('img');
const imgCount = imgs.length - 1;
let index = 0;
imgs[index].classList.add('visible');
var allow = true;
window.addEventListener('keydown', () => {
if (allow) {
imgs[index].classList.remove('visible');
index = index === imgCount ? 0 : ++index;
imgs[index].classList.add('visible');
allow = false;
displayTimer(200);
}
});
var timer;
function displayTimer(sec) {
var dec = sec - 100;
if (dec == 0) {
window.clearTimeout(timer);
allow = true;
} else {
timer = setTimeout(function() {
displayTimer(dec)
}, 100);
}
}
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body,
figure {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.slideshow {
height: 600px;
width: 800px;
max-width: 100%;
display: flex;
align-items: center;
position: relative;
}
img {
width: 100%;
position: absolute;
opacity: 0;
transition: opacity .3s;
z-index: 2;
}
.visible {
transition: opacity .3s;
opacity: 1;
z-index: 3;
}
<!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">
</head>
<body>
<div class="slideshow">
<img src="https://uploads6.wikiart.org/images/david-roberts/jerusalem-from-the-mount-of-olives-1847.jpg!Large.jpg">
<img src="https://uploads8.wikiart.org/images/david-roberts/departure-of-the-israelites-1830.jpg!Large.jpg">
<img src="https://uploads1.wikiart.org/images/david-roberts/church-of-the-holy-sepulchre-jerusalem-1849.jpg!Large.jpg">
<img src="https://uploads5.wikiart.org/00333/images/david-roberts/david-roberts-1796-1864-the-inauguration-of-the-great-exhibition-1-may-1851-rcin-407143-royal.jpg!Large.jpg">
</div>
</body>
</html>
Related
I am adding images of cards for a blackjack game and for whatever reason when I try to insert images through JS, they don't appear on the website. The hit button is supposed to add a new random card. The goal is to generate a random suite and a number and add the source accordingly.
let randomSuite;
let randomNum
let count = 1;
var cards = new Array();
const suites = new Array();
suites[0] = "H";
suites[1] = "S";
suites[2] = "C";
suites[3] = "D";
window.onload = function main(){
for(let i = 0 ; i < 56 ; i++){
randomNum = (Math.random() * 12) + 1;
cards.push(Math.floor(randomNum));
console.log(cards[i]);
count++;
}
}
function hitFunc(){
randomSuite = Math.floor(Math.random() * 3);
var img = document.createElement("img");
img.setAttribute("src","PNG-cards-1.3\1C.png");
document.body.appendChild(img);
//alert(randomSuite); used to check whether or not my code is running random numbers
img.id = count;
count++;
}
*{
margin: 0;
padding : 0;
font-family: sans-serif;
}
#divId {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.main{
width: 100%;
height: 100vh;
background-color:black;
}
.img1{
position: relative;
z-index: -1;
margin: 10px auto 20px;
display: block;
width: 75%;
height: 75%;
}
.img2{
position: relative;
z-index: 1;
margin: 10px auto 20px;
display: block;
bottom: 150px;
width: 7%;
height: 7%;
}
.hitButton {
z-index: 1;
position: relative;
text-align: center;
left: 175px;
bottom: 250px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
color: aliceblue;
object-position: center;
}
<!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>first js website</title>
<link rel = "stylesheet" href="style.css">
<script src="app.js"></script>
</head>
<style>
h1{text-align: center;}
</style>
<body class="main">
<div id="divId">
<h1 class="center">black jack</h1>
<img src="C:\Users\Adamf\OneDrive\Pictures\Camera Roll\background.jpg"
alt="" class="img1">
<button class="hitButton" id="hitbtn" onclick="hitFunc()">HIT</button>
<img src="PNG-cards-1.3\1C.png"
alt="" class="img2">
</div>
</body>
</html>
When I insert the same photo in html it works fine however when I try to manually add (the same path) it in JavaScript the same image does not want to appear. It will show up as if the image is not found.
edit: I just added the full program to stop confusion. Also, I am very new to JS so forgive my lack of knowledge.
I don't think anything wrong with your JS. Just check the image URL. Search on google about img attributes to see if anythings different.
I'm trying to make it so that when i click the div, it either expands the full viewport width or returns to its original width. But its not working. I tried box.style.width but no change so I googled and got getComputedStyle(). so i was abe to console log the width but then i used setProperty on the width and it still didnt work.
const box = document.querySelector(".box");
const bsl = window.getComputedStyle(box);
let i = 0;
window.onload = () => {
console.log(bsl.getPropertyValue("width"), i, 77);
}
box.onclick = () => {
if (i % 2 === 0) {
bsl.setProperty("width", "100vw");
} else {
bsl.setProperty("width", "100px");
}
i++;
console.log(box.clientWidth, i);
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rebeccapurple;
animation: exc 1s linear forwards paused;
}
#keyframes exc {
from {
width: 100px;
}
to {
width: 100vw;
border-radius: 0%;
}
}
<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">
</head>
<body>
<div id="boxid" class="box"></div>
</body>
apparently there was a problem with your animation especially "puased"
check this out
const box = document.querySelector(".box");
let isExpand = false;
box.onclick = () => {
if (isExpand) {
box.style.width = "100px"
box.style.borderRadius = "50%"
isExpand = false
} else {
box.style.width = "100vw"
box.style.borderRadius = "0%"
isExpand = true
}
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.box {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rebeccapurple;
transition: width 1s linear, border-radius 1s linear;
}
<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">
</head>
<body>
<div id="boxid" class="box"></div>
</body>
I'm adding a feature to a squarespace website. The feature is a new image fade-in/fade-out effect when the mouse is hovering over one of three buttons. The problem is that the static/main image is an img element in the html and not in the css, so I can't change it like that. I have tried to change the element.src in javascript however there's no transition. Is the best way to add another element in the javascript code so I can make the added img transition with opacity? That just seems like a lot of extra work trying to put it in when working in squarespace.
Any suggestions? By the way I have a snippet showing my code and the issue.
PS, the buttons are under the image at the moment. That doesn't need a fix.
let jw_backgroundswitch = document.querySelector('.section-background img');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
jw_backgroundswitch.src = images[index];
});
jw_btn_current.addEventListener('mouseleave', function() {
jw_backgroundswitch.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
});
});
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
.section-background{
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt="" data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg" data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613" data-load="false" data-parent-ratio="1.4" style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;" class="" data-image-resolution="2500w" src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I would superpose two <img> elements inside a <div> wrapper and play with the opacity. The static picture will be above when the mouse is not hovering on a button and when hovering, first you set the image below with imageBelow.src = images[i] and then change the opacity of the image above with imageAbove.style.opacity = "0";
wrapImages();
let imageBelow = document.querySelector('.pics .below');
let imageAbove = document.querySelector('.pics .above');
let jw_btn = document.querySelectorAll('.sqs-block-content h1 a');
let images = ['https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ea72dbf216159f9567d/1610112687144/homepage_story_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85e88b1f66202d7f3e8e4/1610112659325/homepage_art_1500x896.jpg', 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff85ebf1701e075bcb4c460/1610112707995/homepage_Studio_1500x896.jpg'];
jw_btn.forEach(function(jw_btn_current, index) {
jw_btn_current.addEventListener('mouseenter', function() {
imageBelow.src = images[index];
imageAbove.style.opacity = "0";
});
jw_btn_current.addEventListener('mouseleave', function() {
imageAbove.src = 'https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg';
imageAbove.style.opacity = "1";
});
});
function wrapImages() {
let sectionBackground = document.querySelector('.section-background');
let images = sectionBackground.getElementsByTagName('img');
var newDiv = document.createElement("div");
newDiv.className="pics";
sectionBackground.insertBefore(newDiv, sectionBackground.firstChild);
newDiv.appendChild(images[0]);
newDiv.appendChild(images[1]);
images[0].className="below";
images[1].className="above";
}
*,*::before,*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body{
height: 200vh;
}
img{
background-repeat: no-repeat;
transition: all .5s ease-in-out;
}
.pics {
position: relative;
width: 100%;
height: 100vh;
}
.pics > img {
position: absolute;
transition: all .4s ease;
}
.ulwrapper{
display: flex;
height: 100vh;
align-items: center;
}
.sqs-block-content{
display: flex;
width: 100%;
height: 4rem;
list-style: none;
}
h1{
margin: auto;
cursor: pointer;
}
h1 a{
font-weight: bolder;
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='section-background'>
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://images.unsplash.com/photo-1610043238036-7309f1cc52d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80">
<img alt=""
data-src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg"
data-image-dimensions="2000x1195" data-image-focal-point="0.24133662454825583,0.20697233746829613"
data-load="false" data-parent-ratio="1.4"
style="width: 100%; height: 100%; object-position: 0% 20.6972%; object-fit: cover;"
data-image-resolution="2500w"
src="https://static1.squarespace.com/static/5fe99a39cc46cf62c078c5a0/t/5ff44194b93643179814a20d/1610108761001/Lady+in+blue.jpg?format=2500w">
</div>
<div class="ulwrapper">
<div class="sqs-block-content">
<h1 class="jw_btn"><a>Button1</a></h1>
<h1 class="jw_btn"><a>Button2</a></h1>
<h1 class="jw_btn"><a>Button3</a></h1>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
EDIT
If as you stated SquareSpace doesn´t allow you to add a wrapper to the HTML, then you can add a wrapper programatically. I have now added the function wrapImages() which must be called at the beginning of the JS code.
I am trying to understand why the below code snippet returns the wrong value and it doesn't matter whether I use clientWidth or offsetWidth.
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(imgSize);
What does matter is where I import my script though. I found out that it will only return the correct value when I import my script at the end of my body tag, in addition, I have to keep the defer attribute!
<script src="../source/js/myJS.js" defer></script>
If I would import this in my head it is not working.
The oddest thing is when I import my script in my head with the defer attribute, then I will get randomly two values (133px or 450px), but only 450 is correct. So where does this effect come from?
I will now past the relevant css in case it is needed to answer my question because I am not sure whether it will be:
* {
box-sizing: border-box;
margin: 0;
}
body {
margin: 0;
font-size: 62.5%;
font-family: 'Rochester';
font-family: 'Open
#gen-info .container-carousel {
overflow: hidden;
width: 450px;
height: auto;
margin: auto;
position: relative;
}
#gen-info .slides {
display: flex;
align-items: center;
align-content: center;
}
#gen-info img {
width: 450px;
height: 300px;
}
#gen-info h3 {
display: none;
font-size: 1.4rem;
text-align: center;
margin: 15px 0 40px 0;
}
#gen-info .current-heading {
display: block;
}
.prevBtn {
position: absolute;
top: 50%;
z-index:2;
left: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn {
position: absolute;
top: 50%;
z-index:2;
right: 5%;
font-size: 30px;
color: white;
opacity: 0.5;
cursor: pointer;
}
.nextBtn:hover {
opacity: 1;
}
.prevBtn:hover {
opacity: 1;
}
I also have media queries but in none, is a width of 133px
Edit:
The Html
//head area
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" type="text/css" href="../source/css/style.css" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans|Rochester&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/427c34389f.js"
crossorigin="anonymous"
defer
></script>
<script src="../source/js/myJS.js" defer></script>
</head>
// img area
<section id="gen-info">
<div class="container-carousel">
<i class="fas fa-arrow-left prevBtn"></i>
<i class="fas fa-arrow-right nextBtn"></i>
<div class="slides">
<img src="../source/img/gen-info/information/WinterAlt.jpg" alt="outsideHous">
<img src="../source/img/gen-info/information/feldberg.jpg" alt="Feldberg">
<img src="../source/img/gen-info/information/bspWinter2.jpg" alt="winterTitisee">
<img src="../source/img/gen-info/information/bspWinter1.jpg" alt="snowTrecking">
</div>
</div>
</section>
//complete JS
const btnPrevList = document.querySelectorAll('.prevBtn');
const btnNextList = document.querySelectorAll('.nextBtn');
const slides = document.querySelectorAll('.slides');
const imgSize = document.querySelector('.slides').children[0].offsetWidth;
console.log(document.querySelector('.slides').children[0]);
console.log(imgSize);
const makeCloneSlides = (img, c) => {
const lastClone = img[img.length - 1].cloneNode();
const firstClone = img[0].cloneNode();
lastClone.className = 'last-clone';
firstClone.className = 'first-clone';
slides[c].insertAdjacentElement('beforeend', firstClone);
slides[c].insertAdjacentElement('afterbegin', lastClone);
};
const moveCarouselLeft = () => {
console.log('left');
};
const moveCarouselRight = () => {
console.log('right');
};
for (c = 0; c < slides.length; c++) {
let img = document.querySelectorAll('.slides')[c].children;
makeCloneSlides(img, c);
slides[c].style.transform = 'translateX(' + -imgSize + 'px)';
}
for (c = 0; c < btnPrevList.length; c++) {
btnPrevList[c].addEventListener('click', moveCarouselLeft);
}
for (c = 0; c < btnNextList.length; c++) {
btnNextList[c].addEventListener('click', moveCarouselRight);
}
I would like to use timeUpdate and currentTime to be able to show and hide a div at a certain time when a video is playing.
I have managed to get something working, however it seems to show and hide for each second I want it to show for.
I have attached the code below... is there any way i can have it shown without it showing and hiding for each second?
var video_one = document.getElementById('video_one'),
video_two = document.getElementById('video_two'),
video_one_wrapper = document.getElementById('video_one_wrapper'),
video_two_wrapper = document.getElementById('video_two_wrapper'),
play_button = document.getElementById('play_button');
// add event listener to play button
play_button.addEventListener('click', play_videos);
// run function on click
function play_videos() {
video_one.play();
video_two.play();
}
var switch_button = document.getElementById('switch_button');
switch_button.addEventListener('click', switch_videos);
function switch_videos() {
console.log('click');
if(video_one_wrapper.classList.contains('video_active')) {
console.log('it contains');
video_one_wrapper.classList.remove('video_active');
video_two_wrapper.classList.add('video_active');
} else if(video_two_wrapper.classList.contains('video_active')) {
video_two_wrapper.classList.remove('video_active');
video_one_wrapper.classList.add('video_active');
console.log('it doesnt')
}
}
video_one.addEventListener("timeupdate", message_one);
video_two.addEventListener("timeupdate", message_two);
var message_one = document.getElementById("message_one"),
message_two = document.getElementById("message_two");
function message_one() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_one.classList.contains("message_hide")) {
message_one.classList.remove("message_hide");
} else {
message_one.classList.add("message_hide")
}
}
}
function message_two() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_two.classList.contains("message_hide")) {
message_two.classList.remove("message_hide");
} else {
message_two.classList.add("message_hide")
}
}
}
body {
margin: 0;
font-family: "Helvetica Neue";
font-size: 16px;
color: #FFF;
background-color: #242424;
}
.landing {
width: 100vw;
height: 100vh;
}
.landing_wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.title_wrapper {
text-align: center;
}
.title_wrapper > h1 {
font-size: 46px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FFF;
}
.title_wrapper > button {
background-color: #FFF;
border: none;
outline: none;
font-size: 16px;
text-transform: uppercase;
padding: 10px 20px;
}
video {
width: 100%;
z-index: 100;
}
.video {
position: relative;
width: 100vw;
height: 100vh;
}
.video_wrapper {
position: relative;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.video_item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.switch_wrapper {
z-index: 100;
position: absolute;
top:0;
left: 0;
}
.video_element {
z-index: 100;
}
.message_wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 200;
}
.message_hide {
display: none;
}
.video_one {
z-index: 0;
}
.video_two {
z-index: 0;
}
.video_active {
z-index: 10;
}
.video_three {
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="landing">
<div class="landing_wrapper">
<div class="title">
<div class="title_wrapper">
<h1>Title Here</h1>
<button id="play_button">Start</button>
</div>
</div>
</div>
</div>
<div class="video">
<div class="switch_wrapper"><button id="switch_button">Switch</button></div>
<div class="video_wrapper">
<div id="video_one_wrapper" class="video_item video_active">
<div id="message_one" class="message_wrapper message_hide"><h1>Hello Video 1</h1></div>
<video id="video_one" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/girl_1_zps8ud1zuxh.mp4" loop >
</div>
<div id="video_two_wrapper" class="video_item">
<div id="message_two" class="message_wrapper message_hide"><h1>Hello Video 2</h1></div>
<video id="video_two" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/boy_zpsugnp76od.mp4" muted loop>
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
The timeupdate event occurs when the playing position of an audio/video has changed.
Example. When video is playing . This function message_one always is calling every time (second) when video is playing. I will give you example step
currentTime = 1 s
message_one function called
message_one element doesn't contain class "message_hide"
message_one element add class "message_hide"
currentTime increases to 2s
message_one function called
message_one element now is containing class "message_hide" .
message_one.classList.add("message_hide") this will call. it makes message hide
And again when currentTime update it will change, it makes the message show hide loop
Your current function
function message_one() {
// if time between 10s and 20s
if (this.currentTime > 1 && this.currentTime < 20) {
if (message_one.classList.contains("message_hide")) {
message_one.classList.remove("message_hide");
} else {
message_one.classList.add("message_hide")
}
}
}
I suggest one way to resolve
if (this.currentTime > 0 && this.currentTime < 20) {
message_two.classList.remove("message_hide");
}
else {
message_two.classList.add("message_hide")
}