Unable to add music file in audio player - javascript

I working on Audio Player for my website so I designed this play and pause animation for UI of audio player but I am having trouble adding an music file into this code. I also tried using some code from an template(https://codepen.io/himalayasingh/pen/QZKqOX) on the following code I made but it didn't workout. Thanks in advance.
let mainCover = document.querySelector("#main_cover");
mainCover.addEventListener("click", () => {
if (mainCover.classList.contains("active")) {
mainCover.classList.remove("active");
mainCover.classList.add("inactive");
} else {
mainCover.classList.remove("inactive");
mainCover.classList.add("active");
}
});
let posts = document.querySelectorAll(".p_img");
imagesLoaded(posts, function () {
document.querySelector("#cover").classList.add("loaded");
document.querySelector("#loading").classList.add("loaded");
});
* {
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: none;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #000;
}
#cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
#cover.loaded {
display: block;
}
#loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
z-index: 125;
}
#loading:before {
content: "Loading App ...";
position: absolute;
top: 50%;
right: 0;
left: 0;
color: #fff;
font-size: 14px;
line-height: 14px;
text-align: center;
animation: blink 1.5s ease 0s infinite;
transform: translateY(-50%);
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
#loading.loaded {
display: none;
}
.p_img {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
opacity: 0;
}
.center {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: 0 auto;
transform: translateY(-50%);
}
#app {
width: 300px;
margin: 0 auto;
}
#main_cover {
position: relative;
display: block;
width: 300px;
height: 300px;
border: 0;
border-radius: 50%;
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
transition: 0.1s ease transform;
}
#main_cover:active {
transform: scale(0.9);
}
#main_cover.active {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
}
#main_cover.inactive {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
}
#main {
width: 54px;
height: 60px;
overflow: hidden;
}
.bar {
position: absolute;
width: 8px;
background-color: #fff;
border-radius: 10px;
transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
}
#_1 {
top: 0;
bottom: 0;
}
#_2 {
top: -13px;
left: 23px;
height: 60px;
transform: rotateZ(-60deg) translateY(0px);
}
#_3 {
top: 13px;
left: 23px;
height: 60px;
transform: rotateZ(60deg) translateY(0);
}
#_4,
#_5 {
top: 27px;
right: 0;
bottom: 27px;
}
#main_cover.active #_2 {
transform: rotateZ(-60deg) translateY(53px);
}
#main_cover.active #_3 {
transform: rotateZ(60deg) translateY(-53px);
transition-delay: 0.5s;
}
#main_cover.active #_4 {
bottom: 0;
}
#main_cover.active #_5 {
top: 0;
transition-delay: 0.5s;
}
#main_cover.inactive #_2 {
transform: rotateZ(-60deg) translateY(0);
}
#main_cover.inactive #_3 {
transform: rotateZ(60deg) translateY(0);
transition-delay: 0.5s;
}
#main_cover.inactive #_4 {
bottom: 27px;
}
#main_cover.inactive #_5 {
top: 27px;
transition-delay: 0.5s;
}
#app_info {
position: relative;
text-align: center;
padding: 30px 0;
}
#app_info span {
display: inline-block;
color: #adadad;
font-size: 14px;
}
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<div id="cover">
<div id="app" class="center">
<div id="main_cover">
<div id="main" class="center">
<div class="bar" id="_1"></div>
<div class="bar" id="_2"></div>
<div class="bar" id="_3"></div>
<div class="bar" id="_4"></div>
<div class="bar" id="_5"></div>
</div>
</div>
<div id="app_info"><span>Radhey Sada Mujh Par</span></div>
</div>
<img src="img/f1.gif" class="p_img">
<img src="img/bg.gif" class="p_img">
</div>
<div id="loading"></div>


I added some simple audio code to make your buttons work. Here is the audio element added to your HTML:
<audio id="audio_player" controls>
<source src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3" type="audio/mpeg">
<p>Your browser doesn't support HTML5 audio. Here is
a link to the audio instead.</p>
</audio>
Then, you need to get the audio_player in the JavaScript code with:
let audioPlayer = document.querySelector("#audio_player");
and then play and pause it with audio_player.play() and audio_player.pause()
Finally, you need to hide the audio element as you don't need it with a bit of CSS:
audio {
display: none;
}
Here is a link to: more information about audio
let mainCover = document.querySelector("#main_cover");
let audioPlayer = document.querySelector("#audio_player");
mainCover.addEventListener("click", () => {
if (mainCover.classList.contains("active")) {
mainCover.classList.remove("active");
mainCover.classList.add("inactive");
audio_player.pause();
} else {
mainCover.classList.remove("inactive");
mainCover.classList.add("active");
audio_player.play();
}
});
let posts = document.querySelectorAll(".p_img");
imagesLoaded(posts, function() {
document.querySelector("#cover").classList.add("loaded");
document.querySelector("#loading").classList.add("loaded");
});
* {
-webkit-tap-highlight-color: transparent;
}
*:focus {
outline: none;
}
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
background-color: #000;
}
audio {
display: none;
}
#cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
}
#cover.loaded {
display: block;
}
#loading {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
z-index: 125;
}
#loading:before {
content: "Loading App ...";
position: absolute;
top: 50%;
right: 0;
left: 0;
color: #fff;
font-size: 14px;
line-height: 14px;
text-align: center;
animation: blink 1.5s ease 0s infinite;
transform: translateY(-50%);
}
#keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
#loading.loaded {
display: none;
}
.p_img {
position: fixed;
top: 0;
left: 0;
width: 10px;
height: 10px;
opacity: 0;
}
.center {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: 0 auto;
transform: translateY(-50%);
}
#app {
width: 300px;
margin: 0 auto;
}
#main_cover {
position: relative;
display: block;
width: 300px;
height: 300px;
border: 0;
border-radius: 50%;
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
cursor: pointer;
overflow: hidden;
transition: 0.1s ease transform;
}
#main_cover:active {
transform: scale(0.9);
}
#main_cover.active {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
}
#main_cover.inactive {
background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
}
#main {
width: 54px;
height: 60px;
overflow: hidden;
}
.bar {
position: absolute;
width: 8px;
background-color: #fff;
border-radius: 10px;
transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
}
#_1 {
top: 0;
bottom: 0;
}
#_2 {
top: -13px;
left: 23px;
height: 60px;
transform: rotateZ(-60deg) translateY(0px);
}
#_3 {
top: 13px;
left: 23px;
height: 60px;
transform: rotateZ(60deg) translateY(0);
}
#_4,
#_5 {
top: 27px;
right: 0;
bottom: 27px;
}
#main_cover.active #_2 {
transform: rotateZ(-60deg) translateY(53px);
}
#main_cover.active #_3 {
transform: rotateZ(60deg) translateY(-53px);
transition-delay: 0.5s;
}
#main_cover.active #_4 {
bottom: 0;
}
#main_cover.active #_5 {
top: 0;
transition-delay: 0.5s;
}
#main_cover.inactive #_2 {
transform: rotateZ(-60deg) translateY(0);
}
#main_cover.inactive #_3 {
transform: rotateZ(60deg) translateY(0);
transition-delay: 0.5s;
}
#main_cover.inactive #_4 {
bottom: 27px;
}
#main_cover.inactive #_5 {
top: 27px;
transition-delay: 0.5s;
}
#app_info {
position: relative;
text-align: center;
padding: 30px 0;
}
#app_info span {
display: inline-block;
color: #adadad;
font-size: 14px;
}
<script src="https://unpkg.com/imagesloaded#4/imagesloaded.pkgd.min.js"></script>
<div id="cover">
<div id="app" class="center">
<div id="main_cover">
<div id="main" class="center">
<div class="bar" id="_1"></div>
<div class="bar" id="_2"></div>
<div class="bar" id="_3"></div>
<div class="bar" id="_4"></div>
<div class="bar" id="_5"></div>
</div>
</div>
<div id="app_info"><span>Radhey Sada Mujh Par</span></div>
</div>
<img src="img/f1.gif" class="p_img">
<img src="img/bg.gif" class="p_img">
</div>
<audio id="audio_player" controls>
<source src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3" type="audio/mpeg">
<p>Your browser doesn't support HTML5 audio. Here is
a link to the audio instead.</p>
</audio>
<div id="loading"></div>

Related

DIV resizes on click but goes behind another DIV [vanilla JS]

I have three DIVs that complete the screen in a mobile device. Whenever these are clicked, the DIV resizes to fill up the screen and then the information appears.
It is all working as it should when I click it the first time. But after some other clicks, when the DIV starts to resize to fill up the screen or to go back to the original state, it grows behind another DIV until it suddenly pops-up in front of that DIV and continues on.
Also, I try to change the SPAN which is the Subtitle (class='sTitle') from position Absolute to Fixed. If I have it in Fixed since the beginning, the movement is not soft as if it is Absolute. But, I need it fixed because my scroll changes to horizontal when the DIV is enlarged. I have it commented in the JS code because it changes the style right away and there is no difference as if I just have its position in Fixed style from the beginning.
Thank you for your time. I'm starting to learn how to build websites as you may be able to see.
There is the code:
const thirdOne = document.querySelector('.thirdOne'),
thirdOneSpan = document.querySelector('.thirdOneSpan'),
txt1 = document.querySelector('.oneTxt1'),
txt2 = document.querySelector('.oneTxt2'),
txt3 = document.querySelector('.oneTxt3'),
txt4 = document.querySelector('.oneTxt4'),
txt5 = document.querySelector('.oneTxt5'),
txt6 = document.querySelector('.oneTxt6'),
txt7 = document.querySelector('.oneTxt7'),
txt8 = document.querySelector('.oneTxt8'),
txt9 = document.querySelector('.oneTxt9'),
img1 = document.querySelector('.oneImg1'),
img2 = document.querySelector('.oneImg2');
const thirdTwo = document.querySelector('.thirdTwo'),
thirdTwoSpan = document.querySelector('.thirdTwoSpan'),
txt21 = document.querySelector('.twoTxt1'),
txt22 = document.querySelector('.twoTxt2'),
txt23 = document.querySelector('.twoTxt3'),
txt24 = document.querySelector('.twoTxt4'),
txt25 = document.querySelector('.twoTxt5'),
txt26 = document.querySelector('.twoTxt6'),
txt27 = document.querySelector('.twoTxt7'),
txt28 = document.querySelector('.twoTxt8'),
txt29 = document.querySelector('.twoTxt9'),
img21 = document.querySelector('.twoImg1'),
img22 = document.querySelector('.twoImg2');
const thirdThree = document.querySelector('.thirdThree'),
thirdThreeSpan = document.querySelector('.thirdThreeSpan'),
txt31 = document.querySelector('.threeTxt1'),
txt32 = document.querySelector('.threeTxt2'),
txt33 = document.querySelector('.threeTxt3'),
txt34 = document.querySelector('.threeTxt4'),
txt35 = document.querySelector('.threeTxt5'),
txt36 = document.querySelector('.threeTxt6'),
txt37 = document.querySelector('.threeTxt7'),
txt38 = document.querySelector('.threeTxt8'),
txt39 = document.querySelector('.threeTxt9'),
img31 = document.querySelector('.threeImg1'),
img32 = document.querySelector('.threeImg2');
let clicked = 0;
let thirdOneSel = () => {
thirdOne.scrollLeft = 0;
thirdOne.classList.toggle('fullscreen');
thirdOne.classList.toggle('bgBlue');
thirdOne.classList.toggle('scrollable');
thirdOneSpan.classList.toggle('topCenter');
thirdOneSpan.classList.toggle('textTitle');
txt1.classList.toggle('txtLeft');
txt2.classList.toggle('txtRight');
txt3.classList.toggle('txtLeft');
txt4.classList.toggle('txtRight');
txt5.classList.toggle('txtLeft');
txt6.classList.toggle('txtRight');
txt7.classList.toggle('txtLeft');
txt8.classList.toggle('txtRight');
img1.classList.toggle('hide');
img1.classList.toggle('snap');
img2.classList.toggle('hide');
img2.classList.toggle('snap');
if (clicked === 0) {
thirdOne.style.zIndex = 1;
// thirdOneSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdOne.style.zIndex = 0;
// thirdOneSpan.style.position = 'absolute';
clicked = 0;
}
};
let thirdTwoSel = () => {
if (clicked === 0) {
thirdTwo.style.zIndex = 1;
clicked = 1;
} else {
thirdTwo.style.zIndex = 0;
clicked = 0;
}
thirdTwo.scrollLeft = 0;
thirdTwo.classList.toggle('fullscreen');
thirdTwo.classList.toggle('bgGreen');
thirdTwo.classList.toggle('scrollable');
thirdTwoSpan.classList.toggle('topCenter');
thirdTwoSpan.classList.toggle('textTitle');
txt21.classList.toggle('txtLeft');
txt22.classList.toggle('txtRight');
txt23.classList.toggle('txtLeft');
txt24.classList.toggle('txtRight');
txt25.classList.toggle('txtLeft');
txt26.classList.toggle('txtRight');
txt27.classList.toggle('txtLeft');
txt28.classList.toggle('txtRight');
img21.classList.toggle('hide');
img21.classList.toggle('snap');
img22.classList.toggle('hide');
img22.classList.toggle('snap');
};
let thirdThreeSel = () => {
thirdThree.scrollLeft = 0;
thirdThree.classList.toggle('fullscreen');
thirdThree.classList.toggle('bgBlue');
thirdThree.classList.toggle('scrollable');
thirdThreeSpan.classList.toggle('topCenter');
thirdThreeSpan.classList.toggle('textTitle');
txt31.classList.toggle('txtLeft');
txt32.classList.toggle('txtRight');
txt33.classList.toggle('txtLeft');
txt34.classList.toggle('txtRight');
txt35.classList.toggle('txtLeft');
txt36.classList.toggle('txtRight');
txt37.classList.toggle('txtLeft');
txt38.classList.toggle('txtRight');
img31.classList.toggle('hide');
img31.classList.toggle('snap');
img32.classList.toggle('hide');
img32.classList.toggle('snap');
if (clicked === 0) {
thirdThree.style.zIndex = 1;
// thirdThreeSpan.style.position = 'fixed';
clicked = 1;
} else {
thirdThree.style.zIndex = 0;
// thirdThreeSpan.style.position = 'absolute';
clicked = 0;
}
};
thirdOne.addEventListener('click', () => {
thirdOneSel();
});
thirdTwo.addEventListener('click', () => {
thirdTwoSel();
});
thirdThree.addEventListener('click', () => {
thirdThreeSel();
});
.third {
position: relative;
height: 100vh;
display: block;
color: #000;
}
.third h1 {
position: absolute;
top: 2.2vh;
left: 50%;
font-size: 3.5vh;
letter-spacing: 2vw;
transform: translate(-50%, 0);
}
.third span {
position: absolute;
left: 50%;
top: 30%;
font-size: 2rem;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 1);
transform: translateX(-50%);
text-align: center;
transition: all 1s;
}
.thirdOne {
position: absolute;
top: 8vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg.jpg');
background-color: rgb(78, 199, 255);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdOne p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2vh;
text-align: left;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.oneTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.oneTxt2 {
top: 18%;
transition: all 1s 0.8s;
}
.oneTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.oneTxt4 {
top: 62%;
transition: all 1s 1s;
}
.oneTxt5 {
top: 68%;
transition: all 1s 1.2s;
}
.oneTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.oneTxt7 {
top: 78%;
transition: all 1s 1.6s;
}
.oneTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
text-align: center !important;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
#keyframes scrollAnim2 {
0% {
transform: rotateX(0deg) rotate(225deg) translate(0, 0);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: rotateX(360deg) rotate(225deg) translate(-30px, 30px);
opacity: 0;
}
}
.oneImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 24vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.oneImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.oneTxt9 {
left: 150% !important;
top: 10%;
}
.thirdTwo {
position: absolute;
top: 39vh;
height: 31vh;
width: 100%;
border: 1px solid #fff;
background: 50% / cover no-repeat url('./bg2.jpg');
background-color: rgb(46, 136, 186);
overflow: hidden;
transition: all 1.4s 0.5s;
}
.thirdTwo p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.twoTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.twoTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.twoTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.twoTxt4 {
top: 63%;
transition: all 1s 1s;
}
.twoTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.twoTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.twoTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.twoTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
#scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.twoImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.twoImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.twoTxt9 {
left: 150% !important;
top: 10%;
}
.thirdThree {
position: absolute;
top: 70vh;
height: 30vh;
width: 100%;
border: 1px solid #fff;
background: 90% / cover no-repeat url('./bg3.jpg');
background-color: rgb(66, 112, 176);
transition: all 1.4s 0.5s;
}
.thirdThree p {
position: absolute;
width: 90%;
left: 50%;
font-weight: 400;
font-size: 2.5vh;
text-align: justify;
white-space: normal;
color: #fff;
transform: translateX(-50%);
}
.threeTxt1 {
top: 10%;
transition: all 1s 0.6s;
}
.threeTxt2 {
top: 17%;
transition: all 1s 0.8s;
}
.threeTxt3 {
top: 56%;
transition: all 1s 0.8s;
}
.threeTxt4 {
top: 63%;
transition: all 1s 1s;
}
.threeTxt5 {
top: 67%;
transition: all 1s 1.2s;
}
.threeTxt6 {
top: 74%;
transition: all 1s 1.4s;
}
.threeTxt7 {
top: 81%;
transition: all 1s 1.6s;
}
.threeTxt8 {
top: 93%;
width: 50% !important;
transition: all 1s 1.8s;
display: inline-block;
letter-spacing: 0.3em;
}
.scroll2 p span {
position: absolute;
top: -2%;
left: 95%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 7px double #fff;
border-bottom: 7px double rgb(184, 179, 179);
transform: rotate(225deg);
opacity: 0;
animation: scrollAnim2 2s infinite;
}
.threeImg1 {
position: absolute;
width: 100vw;
height: 30vh;
top: 25vh;
left: 50%;
transform: translateX(-50%);
transition: all 1s 1.1s;
}
.threeImg2 {
position: absolute;
width: 100vw;
height: 30vh;
top: 60vh;
left: 150%;
transform: translateX(-50%);
}
.threeTxt9 {
left: 150% !important;
top: 10%;
}
.fullscreen {
height: 100vh !important;
top: 0 !important;
transition: all 2s;
}
.topCenter {
top: 1vh !important;
/* position: fixed !important; */
/* left: 50% !important;
transform: translateX(-50%) !important; */
transition: all 1s;
}
.topCenter2 {
top: 2.2vh !important;
transition: all 1s;
}
.textTitle {
font-size: 3vh !important;
/* transition: all 1s !important; */
}
.bgBlue {
background: rgb(68, 133, 253) !important;
}
.bgGreen {
background: rgb(24, 153, 33) !important;
}
.txtLeft {
left: -100% !important;
transition: all 0.5s !important;
}
.txtRight {
left: 200% !important;
transition: all 0.5s !important;
}
.scrollable {
overflow-x: scroll !important;
scroll-snap-type: x mandatory !important;
position: fixed !important;
}
.snap {
scroll-snap-align: start;
}
.hide {
opacity: 0 !important;
height: 0px !important;
transition: all 0.6s !important;
}
.container {
position: absolute;
scroll-snap-type: y mandatory;
overflow-y: scroll;
height: 100vh;
width: 100%;
overflow-x: hidden;
}
section {
position: relative;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
scroll-snap-align: start;
}
<div class="container">
<section class="third" id="3">
<h1 id="sTitle">TITLE</h1>
<div class="thirdOne">
<span class="thirdOneSpan">SUBTITLE</span>
<p class="oneTxt1 txtLeft">Text</p>
<p class="oneTxt2 txtRight">Text</p>
<img src="./vid.gif" class="oneImg1 hide">
<p class="oneTxt3 txtLeft">Text</p>
<p class="oneTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="oneImg2 hide">
<p class="oneTxt5 txtLeft">Text</p>
<p class="oneTxt6 txtRight">Text</p>
<p class="oneTxt7 txtLeft">Text</p>
<div class="scroll2">
<p class="oneTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="oneTxt9">Text</p>
</div>
<div class="thirdTwo">
<span class="thirdTwoSpan">SUBTITLE</span>
<p class="twoTxt1 txtLeft">Text</p>
<p class="twoTxt2 txtRight">Text</p>
<img src="./vid.gif" class="twoImg1 hide">
<p class="twoTxt3 txtLeft">Text</p>
<p class="twoTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="twoImg2 hide">
<p class="twoTxt5 txtLeft">Text</p>
<p class="twoTxt6 txtRight">Text</p>
<p class="twoTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="twoTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="twoTxt9">Text</p>
</div>
<div class="thirdThree">
<span class="thirdThreeSpan">SUBTITLE</span>
<p class="threeTxt1 txtLeft">Text</p>
<p class="threeTxt2 txtRight">Text</p>
<img src="./vid.gif" class="threeImg1 hide">
<p class="threeTxt3 txtLeft">Text</p>
<p class="threeTxt4 txtRight">Text</p>
<img src="./vid2.gif" class="threeImg2 hide">
<p class="threeTxt5 txtLeft">Text</p>
<p class="threeTxt6 txtRight">Text</p>
<p class="threeTxt7 txtLeft">Text</p>
<div id="scroll2">
<p class="threeTxt8 txtRight">scroll right<span class="scroll2"></span></p>
</div>
<p class="threeTxt9">Text</p>
</div>
</section>
</div>

Left side of image disappears

After clicking on the play image, the left side of it disappears, and is not visible.
How do I get the left side of the play image to stay visible and not disappear?
I don't understand why this is happening.
How is this issue resolved?
That is everything about the problem I am having.
code https://jsfiddle.net/kqr691fs/
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelector(".jacketa");
cover.addEventListener("click", coverClickHandler);
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://picsum.photos/1920/1080");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(-100%);
}
.curtain.slide .panel-right {
transform: translateX(100%);
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.jacketa {
position: absolute;
top: 40px;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
}
.j1 .jacketa {
left: 30px;
}
.j2 .jacketa {
right: 30px;
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 240px;
height: 260px;
margin: auto;
border-radius: 50%;
transition: 10s ease;
}
.j1 {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.container {
height: auto;
}
.curtain.slide .j1 {
left: -500%;
}
.curtain.slide .j2 {
left: 500%;
}
.hide {
display: none;
}
<div class="curtain">
<div class="outer">
<div class="tcell">
<div class="container hide">
<div class="container-top">
</div>
</div>
<div class="panel-left"> </div>
<div class="panel-right"> </div>
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>

'Click' event is working only on the left side image. Because, here querySelector() is used. It will return an Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.
Instead you can use querySelectorAll() like this
using ES6:
const cover = document.querySelectorAll('.jacketa');
cover.forEach(el => el.addEventListener('click', coverClickHandler));
using For Loop:
const cover = document.querySelectorAll('.jacketa');
for (var i = 0; i < cover.length; i++) {
cover[i].addEventListener('click', coverClickHandler);
}
Now both sides of the image will trigger the event.

I marked the modifications I made, there are 2 css classes modified plus the js code in the coverClickHandler method
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
//Modified
function coverClickHandler() {
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
const thewrap = curtain.parentElement.querySelector(".container");
show(thewrap);
}
const cover = document.querySelector(".jacketa");
cover.addEventListener("click", coverClickHandler);
}());
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background: #353198;
}
.curtain {
position: relative;
width: 100%;
height: 100%;
}
.curtain.slide {
height: auto;
min-height: 100%;
overflow: hidden;
}
.panel-left,
.panel-right {
position: absolute;
height: 100%;
width: 50%;
top: 0%;
transition: all ease 10s;
/*background-image: url("https://picsum.photos/600");
background-size: cover;
background-repeat: no-repeat;
background-position: center;*/
overflow: hidden;
}
.panel-left {
left: 0;
/*background-color: rgb(91, 96, 106);*/
}
.panel-right {
right: 0;
/*background-color: rgb(229, 211, 211);*/
}
.panel-left::before,
.panel-right::before {
content: "";
position: absolute;
height: 100%;
width: 200%;
top: 0;
left: 0;
background-image: url("https://picsum.photos/1920/1080");
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
}
.panel-right::before {
left: -100%;
}
.curtain.slide .panel-left {
transform: translateX(-100%);
}
.curtain.slide .panel-right {
transform: translateX(100%);
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.jacketa {
position: absolute;
top: 40px;
width: 180px;
height: 180px;
cursor: pointer;
border-radius: 50%;
background: #130e85;
border: 3px solid #f91f6e;
box-sizing: border-box;
box-shadow: 0 0 20px 2px #f9066bf7;
}
.j1 .jacketa {
left: 30px;
}
.j2 .jacketa {
right: 30px;
}
.jacketa .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.jacketa .coversvg {
width: 70px;
height: 75.4px;
fill: none;
stroke-width: 4px;
stroke-miterlimit: 10;
}
.jacketa .coversvg .back {
stroke: #000;
opacity: 0.15;
}
.jacketa .coversvg .front {
stroke: #08f9ff;
stroke-dasharray: 150;
stroke-dashoffset: 1500;
animation: draw 20s infinite linear, flicker-1 2s linear 2s infinite both;
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes flicker-1 {
0%,
100% {
opacity: 1;
}
41.99% {
opacity: 1;
}
42% {
opacity: 0;
}
43% {
opacity: 0;
}
43.01% {
opacity: 1;
}
47.99% {
opacity: 1;
}
48% {
opacity: 0;
}
49% {
opacity: 0;
}
49.01% {
opacity: 1;
}
}
.split-wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 240px;
height: 260px;
margin: auto;
border-radius: 50%;
transition: 10s ease;
}
/*Modified*/
.j1 {
position: absolute;
right: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.j2 {
position: absolute;
left: 50%;
top: 0;
width: 50%;
height: 100%;
overflow: hidden;
transition: 10s ease;
}
.container {
height: auto;
}
/*Modified*/
.curtain.slide .j1 {
right: 500%;
}
.curtain.slide .j2 {
left: 500%;
}
.hide {
display: none;
}
<div class="curtain">
<div class="outer">
<div class="tcell">
<div class="container hide">
<div class="container-top">
</div>
</div>
<div class="panel-left"> </div>
<div class="panel-right"> </div>
<div class="split-wrap">
<div class="j1">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
<div class="j2">
<div class="jacketa" title="[ Enjoy The Music ]">
<svg class="coversvg" width="70" height="75.4" viewBox="0 0 47.96 51.66">
<title>[ Enjoy The Music ]</title>
<path class="back" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
<path class="front" d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>

How do I use a checkbox within my WordPress website?

I have made a toggle switch and I would like to integrate it into my site but I am unsure how to do this. I am using the plugin bbPress on my WordPress site and would like for the user of the website to be able to click the toggle switch when leaving a comment and then for their input to be displayed on their comment.
Here is the HTML for the toggle switch:
`
<!-- ____[TOGGLE BUTTON]____ -->
<div class="toggle">
<!-- ____[OUTER BOX WITH BORDER LINE]____ -->
<div class="toggle__box">
<!-- ____[INPUT WITHOUT VISIBILITY LINKED WITH LABEL]____ -->
<input type="checkbox" id="toggle-check">
<!-- ____[TOGGLE LABEL FOR INPUT]____ -->
<label for="toggle-check" class="toggle__label">
<!-- ____[TOGGLE THUMB ICON]____ -->
<div class="toggle__thumb">
<img src= <?php get_image_for_slider(); ?> >
</div>
<!-- ____[TEXT OF TOGGLE]____ -->
<div class="toggle__text--green">BULLISH</div>
<div class="toggle__text--red">BEARISH</div>
</label>
</div>
</div>
`
and then here is the CSS for this button:
*,
*::before,
*::after {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}`
Is there some way to link a variable to this switch/checkbox and so when the user clicks it I can use that to display something to the screen - as mentioned above? I have tried using isset($_POST["name"] but that didn't seem to work. I have also seen that maybe adding an event listener in JavaScript could work but I am not sure how to code in Java so any help would be great!
Many Thanks

You should be able to solve this using JS. Just insert this JS and then put what every you want in the function.
document.getElementById("toggle-check").addEventListener("click", funct1);
function funct1() {
/* you can put what ever function or thing you want to happen when you click the box here!*/
document.getElementById('p').innerHTML = "When you click the box this text will show up!";
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.toggle {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
justify-content: center;
;
}
.toggle input {
display: none;
opacity: 0;
}
.toggle__box {
width: 13rem;
height: 4rem;
border-radius: 100px;
border: 1px solid #707070;
position: relative;
overflow: hidden;
}
.toggle__label {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all .3s linear;
transition: all .3s linear;
cursor: pointer;
}
.toggle__thumb {
width: 3rem;
height: 3rem;
position: absolute;
top: 50%;
left: .6rem;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all .3s linear;
transition: all .3s linear;
}
.toggle__thumb img {
width: 100%;
height: 100%;
border-radius: 50%;
-o-object-fit: cover;
object-fit: cover;
}
.toggle__text--red,
.toggle__text--green {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 1.6rem;
font-weight: 500;
-webkit-transition: all .005s linear;
transition: all .005s linear;
z-index: 0;
}
.toggle__text--red {
color: #FF001A;
left: 10%;
opacity: 0;
visibility: hidden;
}
.toggle__text--green {
right: 10%;
color: #29FF00;
}
.toggle #toggle-check:checked+label .toggle__thumb {
left: calc(100% - .6rem);
transform: translate(-100%, -50%);
}
.toggle #toggle-check:checked+label .toggle__text--red {
opacity: 1;
visibility: visible;
}
.toggle #toggle-check:checked+label .toggle__text--green {
opacity: 0;
visibility: hidden;
}
`
<input type="checkbox" class="toggle" id="toggle-check">
<p id="p"></p>

How can I get two separate animations to play upon a single onclick?

Let me start off by saying I am new to CSS/HTML coding in general. Mostly learned by breaking down others codes and rebuilding them. So, I am by no means a professional and maybe in well over my head for this. My terminology may be off as well. Sorry in advance.
What I would like to do is open two separate animations upon clicking one button, is that possible? I have a feeling I will need to learn Javascript to do this but I wasn't too sure if there was a way to do it strictly via CSS.
So the "Where are you?" and the 'BEHIND' animation wouldn't play until the button is clicked instead of the "Where are you?" just playing upon load.
#Screen {
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2
}
#Button1 {
position: fixed;
left: 0px;
right: 175px;
top: 0px;
bottom: 110px;
margin: auto;
Height: 15px;
width: 35px;
border-radius: 30px;
border: 1px solid #333;
background-image: url('https://i.pinimg.com/600x315/ef/a4/54/efa454458c927ff79e21b898bbd446f0.jpg');
background-color: #101010;
z-index: 3;
}
.tab div {
display: none;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
}
.tab div:target {
display: block;
}
/*Flicker-in-1 is for the screen to "flicker on"*/
.flicker-in-1 div {
display: none;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
-webkit-animation: flicker-in-1 2s linear 1s both;
animation: flicker-in-1 2s linear 1s both;
}
/*Minified this block of code*/
#-webkit-keyframes flicker-in-1 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
10.1% {
opacity: 1;
}
10.2% {
opacity: 0;
}
20% {
opacity: 0;
}
20.1% {
opacity: 1;
}
20.6% {
opacity: 0;
}
30% {
opacity: 0;
}
30.1% {
opacity: 1;
}
30.5% {
opacity: 1;
}
30.6% {
opacity: 0;
}
45% {
opacity: 0;
}
45.1% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1% {
opacity: 0;
}
57% {
opacity: 0;
}
57.1% {
opacity: 1;
}
60% {
opacity: 1;
}
60.1% {
opacity: 0;
}
65% {
opacity: 0;
}
65.1% {
opacity: 1;
}
75% {
opacity: 1;
}
75.1% {
opacity: 0;
}
77% {
opacity: 0;
}
77.1% {
opacity: 1;
}
85% {
opacity: 1;
}
85.1% {
opacity: 0;
}
86% {
opacity: 0;
}
86.1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.text-focus-in {
position: fixed;
left: 0px;
right: 600px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2 -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
#keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
h1 {
font-family: "Orbitron";
text-align: center;
}
<div id="Screen"></div>
<div class="text-focus-in">Where are you? </div>
<a href="#Behind">
<div id="Button1"></div>
</a>
<div class="flicker-in-1 tab">
<div id="Behind">
<h1>BEHIND</h1>
</div>
</div>

You can use this little trick. It relies on a checkbox next to the animatable thing and tracking its state ( using a selector like #toggle:checked ~ #animatable_element). You can toggle it clicking the label.
#animatable_element {
width: 100px;
height: 100px;
background: orange;
}
#toggle {
display: none; /* optional */
}
#toggle:checked ~ #animatable_element {
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes example {
0% {background-color: orange;}
50% {background-color: yellow;}
100% {background-color: orange}
}
#animatable_element_2 {
width: 100px;
height: 100px;
background: blue;
}
#toggle:checked ~ #animatable_element_2 {
animation-name: example_2;
animation-duration: 1s;
animation-iteration-count: infinite;
}
#keyframes example_2 {
0% {background-color: blue;}
50% {background-color: purple;}
100% {background-color: blue}
}
<label for='toggle'>Click me to start or stop the animation</label>
<input id='toggle' type='checkbox'/>
<div id='animatable_element_2'></div>
<div id='animatable_element'></div>

CSS
.animation-box {
background-color:gray;
width: 250px;
height: 250px;
}
HTML
<div class="animation-box">
<span class="fade-in-and-fade-out-animation">"Where are you?"</span>
<h1 class="pop-up-blinking-animation">RIGHT BEHIND YOU!!</h1>
</div>
<button class="btn">Start Animation</button>
Solution Trigger animation using the button element and layer the animations on the same container, or you may need to dig into JavaScript, specifically into JS queues.

This works by using javascript: element.classList.add("flicker-in-1");
Adding the class's when button is clicked.
function here() {
var element = document.getElementById("here");
var element2 = document.getElementById("Behind");
element.classList.add("flicker-in-1");
element.classList.add("tab");
element2.classList.remove("hide");
}
#Screen {
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2
}
#Button1 {
position: fixed;
left: 0px;
right: 175px;
top: 0px;
bottom: 110px;
margin: auto;
Height: 15px;
width: 35px;
border-radius: 30px;
border: 1px solid #333;
background-image: url('https://i.pinimg.com/600x315/ef/a4/54/efa454458c927ff79e21b898bbd446f0.jpg');
background-color: #101010;
z-index: 3;
cursor: pointer;
}
.tab div {
display: block;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
}
/*Flicker-in-1 is for the screen to "flicker on"*/
.flicker-in-1 div {
display: block;
position: fixed;
left: 0px;
right: 5px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
padding: 0px;
background-color: #F0FFF0;
background-image: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
box-shadow: 1px 1px 10px 1px #ffffff;
z-index: 4;
overflow: hidden;
-webkit-animation: flicker-in-1 0s linear 0s both;
animation: flicker-in-1 0.5s linear 0s both;
animation-delay: 0s;
}
/*Minified this block of code*/
#-webkit-keyframes flicker-in-1 {
0% {
opacity: 0;
}
10% {
opacity: 0;
}
10.1% {
opacity: 1;
}
10.2% {
opacity: 0;
}
20% {
opacity: 0;
}
20.1% {
opacity: 1;
}
20.6% {
opacity: 0;
}
30% {
opacity: 0;
}
30.1% {
opacity: 1;
}
30.5% {
opacity: 1;
}
30.6% {
opacity: 0;
}
45% {
opacity: 0;
}
45.1% {
opacity: 1;
}
50% {
opacity: 1;
}
55% {
opacity: 1;
}
55.1% {
opacity: 0;
}
57% {
opacity: 0;
}
57.1% {
opacity: 1;
}
60% {
opacity: 1;
}
60.1% {
opacity: 0;
}
65% {
opacity: 0;
}
65.1% {
opacity: 1;
}
75% {
opacity: 1;
}
75.1% {
opacity: 0;
}
77% {
opacity: 0;
}
77.1% {
opacity: 1;
}
85% {
opacity: 1;
}
85.1% {
opacity: 0;
}
86% {
opacity: 0;
}
86.1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.text-focus-in {
position: fixed;
left: 0px;
right: 600px;
top: 0px;
bottom: 330px;
margin: auto;
Height: 100px;
width: 210px;
border-radius: 10px;
background-color: #909090;
background-image: url('https://www.transparenttextures.com/patterns/dotnoise-light-grey.png');
border: 2px solid #111;
z-index: 2 -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
#-webkit-keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
#keyframes text-focus-in {
0% {
-webkit-filter: blur(12px);
filter: blur(12px);
opacity: 0;
}
100% {
-webkit-filter: blur(0px);
filter: blur(0px);
opacity: 1;
}
}
h1 {
font-family: "Orbitron";
text-align: center;
}
.hide {
display: none;
}
<div id="Screen"></div>
<div class="text-focus-in">Where are you? </div>
<button id="Button1" onclick="here();"></button>
<div id="here">
<div class="hide" id="Behind">
<h1>BEHIND</h1>
</div>
</div>
PS: You have to Expand snippet to see it correctly.

How Do I make A Function To Check If an animation passes a certain point

Ok so I know the title is nonsense buT how do i check if the obstacle passes a certain point and active a function because of It?
Here is my code so far
function jump() {
jumpDetect = false;
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
setTimeout(() => {
document.getElementById("body").classList.toggle("body");
document.getElementById("beak").classList.toggle("beak");
document.getElementById("eyes").classList.toggle("eyes");
document.getElementById("pupils").classList.toggle("pupils");
document.getElementById("tail").classList.toggle("tail");
document.getElementById("snood").classList.toggle("snood");
document.getElementById("legRight").classList.toggle("legRight");
document.getElementById("legLeft").classList.toggle("legLeft");
}, 0);
winDetection();
}
function winDetection() {
jumpDetect = true;
console.log(jumpDetect)
}
.body {
padding: 30px 30px;
height: 35px;
width: 5px;
border-radius: 50%;
background-color: brown;
position: relative;
top: 0px;
animation-name: turkey;
animation-duration: 1s;
}
.beak {
padding: 1px 1px;
width: 1px;
height: 1px;
border-top: 10px solid transparent;
border-left: 25px solid #ffc800;
border-bottom: 5px solid transparent;
position: relative;
left: 40px;
top: 40px;
animation-name: beak;
animation-duration: 1s;
}
.eyes {
padding: 10px 10px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
position: relative;
top: -80px;
animation-name: eyes;
animation-duration: 1s;
}
.pupils {
padding: 5px 5px;
width: 3px;
height: 3px;
border-radius: 50%;
background-color: black;
position: relative;
top: -100px;
animation-name: pupils;
animation-duration: 1s;
}
.snood {
padding: 5px 5px;
width: 1px;
height: 10px;
background-color: red;
border-radius: 50%;
position: relative;
top: -254px;
right: -38px;
animation-name: snood;
animation-duration: 1s;
}
.legRight {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -219px;
right: 9px;
transform: rotate(30deg);
animation-name: legRight;
animation-duration: 1s;
}
.legLeft {
padding: 10px 1px;
width: 1px;
height: 5px;
background-color: black;
position: relative;
top: -242px;
left: 3px;
transform: rotate(30deg);
animation-name: legLeft;
animation-duration: 1s;
}
.obstacle {
height: 100px;
width: 10px;
background-color: black;
animation: obstacle 3s infinite;
position: relative;
top: -460px;
}
body {
background-color: lightblue;
}
<html>
<head>
</head>
<body>
<center>
<br><br><br><br><br><br>
<div class="turkey">
<div id="beak" class="turkey beak"></div>
<div id="body" class="turkey body"></div>
<div id="eyes" class="turkey eyes"></div>
<div id="pupils" class="turkey pupils"></div>
<style>
.tail {
width: 20px;
height: 150px;
border-radius: 50%;
background-color: brown;
position: relative;
top: -200px;
right: 59px;
transform: rotate(-30deg);
animation-name: tail;
animation-duration: 1s;
}
</style>
<div id="tail" class="turkey tail" id="tailId"></div>
<div id="snood" class="turkey snood"></div>
<div id="legRight" class="turkey legRight"></div>
<div id="legLeft" class="turkey legLeft"></div>
</div>
<style>
#keyframes turkey {
0% {
top: 0px;
}
50% {
top: -200px;
}
100% {
top: 0px;
}
}
#keyframes beak {
0% {
top: 40px;
}
50% {
top: -160px;
}
100% {
top: 40px;
}
}
#keyframes eyes {
0% {
top: -80px;
}
50% {
top: -280px;
}
100% {
top: -80px;
}
}
#keyframes pupils {
0% {
top: -100px;
}
50% {
top: -300px;
}
100% {
top: -100px
}
}
#keyframes snood {
0% {
top: -254px;
}
50% {
top: -450px;
}
100% {
top: -254px;
}
}
#keyframes legRight {
0% {
top: -219px;
}
50% {
top: -419px;
}
100% {
top: -219px;
}
}
#keyframes legLeft {
0% {
top: -242px;
}
50% {
top: -442px;
}
100% {
top: -242px;
}
}
#keyframes tail {
0% {
top: -200px;
}
50% {
top: -400px;
}
100% {
top: -200px;
}
}
</style>
<style>
.button {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
position: relative;
top: -210px;
overflow=scroll;
}
</style>
<div class="button" onclick="jump()">
<h1>JUMP</h1>
</div>
<div class="obstacle"></div>
<style>
#keyframes obstacle {
from {
left: 1000px;
}
to {
left: -870px;
}
}
</style>
</center>
</body>
</html>
Btw a snood is the turkey's thing under its beak. So to restate the question, How do i detect if the obstacle passes the turkey and see if the turkey jumps or not? Thanks

Categories

Resources