Develop Reference

Unable to add music file in audio player

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>

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.

Trigger animation manually using Jquery or Javascript

I have an alert/error message div that shows errors in my website
.flash {
height: 75px;
position: fixed;
top: 20px;
right: 20px;
z-index: 10;
background-color: #ffffff;
box-shadow: 0 0 30px 2px #dddddd;
-webkit-animation: flash-show 300ms ease 0s;
animation: flash-show 300ms ease 0s;
&.hide {
-webkit-animation: flash-hide 5ms ease 0s;
animation: flash-hide 5ms ease 0s;
right: -100%;
opacity: 0;
}
.color {
display: inline-block;
width: 15px;
height: 15px;
border: 5px solid #3498db;
border-radius: 100%;
margin: 25px;
&.green {
border-color: #2ecc71;
}
&.red {
border-color: #e74c3c;
}
}
.text {
display: inline-block;
line-height: 75px;
vertical-align: top;
margin-right: 100px;
font-family: "Roboto";
font-size: 0.9em;
font-weight: 300;
color: rgba(25, 25, 25, 0.75);
}
.close {
width: 16px;
height: 16px;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
&:hover span {
&:before, &:after {
background-color: rgba(25, 25, 25, 0.25);
}
}
span {
width: 16px;
height: 16px;
position: relative;
&:before, &:after {
content: "";
width: 16px;
height: 2px;
background-color: rgba(25, 25, 25, 0.5);
transition: all 200ms ease;
position: absolute;
top: 7px;
}
&:before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
&:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
}
}
#-webkit-keyframes flash-show {
0% {
right: -100%;
opacity: 0;
}
100% {
right: 20px;
opacity: 1;
}
}
#keyframes flash-show {
0% {
right: -100%;
opacity: 0;
}
100% {
right: 20px;
opacity: 1;
}
}
#-webkit-keyframes flash-hide {
0% {
right: 20px;
opacity: 1;
}
100% {
right: -100%;
opacity: 0;
}
}
#keyframes flash-hide {
0% {
right: 20px;
opacity: 1;
}
100% {
right: -100%;
opacity: 0;
}
}
I use this div to populate my flash error or success message on page load. This has been working perfectly till now. However, I wanted to get more use out of this class and trigger it manually on button click instead.
I tried adding and removing the class name on a div with an id message
Inside button click event I had:
$("#message").addClass("flash")
$("#message").removeClass("flash")
However, this does not work. Is there a way to trigger/retrigger the CSS animation using javascript or jquery?

Please use fadeIn and fadeOut instead of CSS animation.

Black Background For a Custom Pre Loader on a Website

This is my Preloader Code for my Website
<style>
#site {
opacity: 0;
-webkit-transition: all 2s ease;
transition: all 2s ease;
}
#preloader {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px;
margin-left: -20px;
}
#preloader:before {
content: "";
display: block;
position: absolute;
left: -1px;
top: -1px;
height: 100%;
width: 100%;
-webkit-animation: rotation 1s linear infinite;
animation: rotation 1s linear infinite;
border: 0px solid white;
border-top: 1px solid transparent;
border-radius: 100%;
}
#preloader > .icon {
position: absolute;
/*top: 50%;
left: 50%;*/
height: 60px;
width: 60px;
/*margin-top: -12.5px;
margin-left: -5.3px;*/
-webkit-animation: 1s ease-in-out infinite alternate;
animation: 1s ease-in-out infinite alternate;
}
#media only screen and (min-width: 768px) {
#preloader {
height: 80px;
width: 80px;
margin-left: -30px;
}
#preloader:before {
left: -2px;
top: -2px;
border-top-width: 2px;
border-left-width: 2px;
border-bottom-width: 2px;
border-right-width: 2px;
}
#preloader > .icon {
height: 80px;
width: 80px;
/*margin-top: -18.75px;
margin-left: -7.95px;*/
}
}
#media only screen and (min-width: 1200px) {
#preloader {
height: 100px;
width: 100px;
margin-top: -40px;
margin-left: -40px;
}
#preloader > .icon {
height: 100px;
width: 100px;
/*margin-top: -25px;
margin-left: -10.6px;*/
}
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#keyframes rotation {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
#-webkit-keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes wink {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
<div id="preloader" aria-busy="true" aria-label="Loading, please wait." role="progressbar"><img class="icon" src="URL OF GIF">
</div>
<main id="site" role="main"></main>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
//window.open('welcome.html', '_self');
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
/*(function preloader() {
var preloader = document.getElementById("#preloader");
preloader.style.opacity = "0";
preloader.setAttribute("aria-busy", "false");
document.getElementById("#site").style.opacity = "1";
})
window.onload = preloader;*/
</script>
Right now I have a White Background, I would like the Background to be Pure Black. I have tried a few things but nothing seems to work.
I am loading the GIF from a URL.
I know that the color code for Black is #000000 and I have tried entering it instead of the opacity = 0; but nothing seems to work.
Any advice ?

Add this style
html {
height: 100%;
background-color: black;
}

html , body{ height: 100%;}
html {background-color: black;}

jQuery animation doesn't work the second time

Why in THIS CODE if you press the "I" button on the bottom right the first time works, but the second it shows just the pink background?
(function(){
'use strict';
var $mainButton = $(".main-button"),
$closeButton = $(".close-button"),
$buttonWrapper = $(".button-wrapper"),
$ripple = $(".ripple"),
$layer = $(".layered-content");
$mainButton.on("click", function(){
$ripple.addClass("rippling");
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
});
$closeButton.on("click", function(){
$buttonWrapper.removeClass("clicked");
$ripple.removeClass("rippling");
$layer.removeClass("active");
});
})();
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
html {
height: 100%;
}
body {
background: url("http://species-in-pieces.com/img/bg/grad-bg.png") no-repeat center center/cover #F9D8AD;
height: 100%;
}
button:focus {
outline: none;
}
button:hover {
opacity: .8;
}
.fa {
font-size: 20px;
}
.fa-info {
color: white;
}
#container {
width: 330px;
height: 508px;
max-width: 330px;
background: white;
position: relative;
top: 50%;
left: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.25);
transform: translate3d(-50%, -50%, 0);
}
h2 {
padding: 20px;
color: white;
background: #3E4FB2;
font-weight: 300;
text-align: center;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
.detail {
color: #777;
padding: 20px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.img-wrapper {
padding: 0;
position: relative;
}
.img-wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(62, 79, 178, .25);
width: 100%;
}
.img-wrapper img {
width: 100%;
height: 200px;
-o-object-fit: cover;
object-fit: cover;
margin: 0;
display: block;
position: relative;
}
.button-wrapper {
width: 50px;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
right: 20px;
bottom: 20px;
}
button {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
z-index: 9;
position: relative;
}
.main-button {
background: #ff2670;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.ripple {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 50%;
z-index: -9;
background: transparent;
border: 1px solid #ff2670;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transition: .3s all ease;
transition: .3s all ease;
opacity: 1;
}
.rippling {
-webkit-animation: .3s rippling 1;
animation: .3s rippling 1;
-moz-animation: .3s rippling 1;
}
#-webkit-keyframes rippling {
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#-moz-keyframes rippling {
25% {
-moz-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
#keyframes rippling {
25% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.layer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: #ff2670;
border-radius: 50%;
z-index: -99;
pointer-events: none;
}
.button-wrapper.clicked {
-webkit-transform: rotate(90deg) translateY(-96px);
-ms-transform: rotate(90deg) translateY(-96px);
transform: rotate(90deg) translateY(-96px);
right: 0;
bottom: 0;
-webkit-transition: .3s all ease .6s;
transition: .3s all ease .6s;
}
.button-wrapper.clicked .main-button {
opacity: 0;
-webkit-transition: .3s all ease .3s;
transition: .3s all ease .3s;
}
.button-wrapper.clicked .layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
-webkit-transition: 2.25s all ease .9s;
transition: 2.25s all ease .9s;
}
.layered-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
}
.layered-content.active {
opacity: 1;
}
.close-button {
background: white;
position: absolute;
right: 20px;
top: 20px;
color: #ff2670;
}
.layered-content.active .close-button {
-webkit-animation: .5s bounceIn;
animation: .5s bounceIn;
}
.layered-content .content img {
width: 80px;
-webkit-shape-outside: 80px;
shape-outside: 80px;
border-radius: 50%;
display: block;
margin: 0 auto 15px;
padding: 10px;
box-sizing: border-box;
background: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
-webkit-transition: .3s all ease;
transition: .3s all ease;
}
.content p {
color: white;
font-weight: 300;
text-align: center;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.content p a {
font-size: 12px;
background: white;
padding: 2.5px 5px;
color: #ff2670;;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-left: 1.5px;
}
.content img,
.content p {
opacity: 0;
position: relative;
top: -7.5px;
}
.layered-content.active .content img {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease .5s;
transition: .5s all ease .5s;
}
.layered-content.active .content p {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease 1s;
transition: .5s all ease 1s;
}
.copyright {
position: fixed;
right: 15px;
bottom: 15px;
font-family: "Roboto";
}
.copyright span {
line-height: 36px;
color: rgba(255, 255, 255, 0.75);
margin-right: 10px;
font-weight: 300;
}
.copyright span a {
font-weight: 400;
text-decoration: none;
color: #ea4c89;
}
.copyright .balapa {
width: 30px;
height: 30px;
display: block;
background: url("//s3-us-west-2.amazonaws.com/s.cdpn.io/111167/profile/profile-80_3.jpg");
background-size: cover;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.75);
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="container">
<h2>Material Overlay Animation</h2>
<div class="img-wrapper">
<img src="https://d13yacurqjgara.cloudfront.net/users/2733/screenshots/741958/dribbble-foxes.jpg" alt="Just Background">
</div>
<p class="detail">Click the Button to see the "Material Animation". Works great on modern browser.</p>
<div class="button-wrapper">
<div class="layer"></div>
<button class="main-button fa fa-info">
<div class="ripple"></div>
</button>
</div>
<div class="layered-content">
<button class="close-button fa fa-times"></button>
<div class="content">
<img src="https://d13yacurqjgara.cloudfront.net/users/332135/avatars/normal/52d614ee44e3e21d2b73894c465773d7.png" alt="Balapa">
<p>Crafted by balapa.</p>
<p>See also my other pen</p>
</div>
</div>
</main>
<div class="copyright"><span>Material Overlay Animation by</span></div>

You have to clear the queue using clearQueue() function.
Change your code to this
...
$buttonWrapper.addClass("clicked").clearQueue().delay(1500).queue(function(){
$layer.addClass("active");
});
});
...
Or you can even do it like this which is a way suggested in jQuery documentation.
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
jQuery.dequeue( this );
});
});
Important part directly from jQuery documentation,
Note that when adding a function with jQuery.queue(), we should ensure
that jQuery.dequeue() is eventually called so that the next function
in line executes.

Instead of this:
$buttonWrapper.addClass("clicked").delay(1500).queue(function(){
$layer.addClass("active");
});
Use this:
$buttonWrapper.addClass("clicked");
setTimeout(function(){$layer.addClass("active")},1500);
And it will work.