The goal is to have the text transition to 3 different words. I want them to be in sync with the animated rings(text change after every two rings animate fading in and fading out) I'm not sure what is the best way to set the timing for the rings and the text - should this be done with javascript or CSS animation keyframes? Below is a link to my codepen and HTML/CSS.
Codepen - https://codepen.io/pizzapgh/pen/RygPQJ
body {
background-color: gray;
}
#circles {
width: 1000px;
height: 1000px;
display: inline-block;
position: relative;
margin: auto;
border: 1px solid blue;
}
#circles div {
position: absolute;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
width: 0;
height: 0;
opacity: 0;
animation-name: growCircles;
animation-duration: 8s;
transition-timing-function: ease-out;
animation-iteration-count: infinite;
}
#circles div:nth-child(1) {
animation-delay: 0s;
}
#circles div:nth-child(2) {
animation-delay: 1s;
}
#circles div:nth-child(3) {
animation-delay: 2s;
}
#circles div:nth-child(4) {
animation-delay: 3s;
}
#circles div:nth-child(5) {
animation-delay: 4s;
}
#circles div:nth-child(6) {
animation-delay: 5s;
}
#keyframes growCircles {
0% {
top: 500px;
left: 500px;
}
20% {
opacity: 0.5;
}
80% {
opacity: 0;
top: 0;
left: 0;
width: 1000px;
height: 1000px;
}
100% {
opacity: 0;
}
}
/*================================
Text Transition
================================== */
#spin:after {
content: "";
animation: spin 5s ease-in infinite;
}
#keyframes spin {
0% {
content: "From The Classroom";
}
60% {
content: "To the City";
}
100% {
content: "To the World";
}
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 6;
color: white;
width: 500px;
overflow: hidden;
text-align: center;
font-family: 'RockwellMT' !important;
}
<div class="circle-container">
<div id="circles">
<h2 id="spin"></h2>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
Related
I have created a ripple full page loader. I'm trying to create the one like here.
I want the code to be simple with no plugins ideally.
I can load the page preloader but am wondering how I get the loading page to disappear once the main page has loaded? The page just will not fade! Have researched and tried all sorts of methods.
This is the code so far:
// Page loading animation
$(window).on('load', function() {
if ($('.cover').length) {
$('.cover').parallax({
imageSrc: $('.cover').data('image'),
zIndex: '1'
});
}
$("#preloader").animate({
'opacity': '0'
}, 600, function() {
setTimeout(function() {
$("#preloader").css("visibility", "hidden").fadeOut();
}, 300);
});
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper>div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper>div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper>div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
You can do it as below, using vanilla JavaScript. You can adapt it for jQuery. Also you can remove that setTimout, added just for testing purpose.
window.addEventListener("load", () => {
setTimeout(() => {
document.getElementById("preloader").classList.add("hide");
}, 1000);
});
#preloader {
overflow: hidden;
background-color: #fb5849;
left: 0;
right: 0;
top: 0;
bottom: 0;
position: fixed;
z-index: 99999;
color: #fff;
opacity: 1;
transition: opacity 1s;
}
#preloader.hide {
opacity: 0;
pointer-events: none;
}
#preloader .jumper {
left: 0;
top: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
margin: auto;
width: 50px;
height: 50px;
}
#preloader .jumper > div {
background-color: #fff;
width: 10px;
height: 10px;
border-radius: 100%;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
position: absolute;
opacity: 0;
width: 50px;
height: 50px;
-webkit-animation: jumper 1s 0s linear infinite;
animation: jumper 1s 0s linear infinite;
}
#preloader .jumper > div:nth-child(2) {
-webkit-animation-delay: 0.33333s;
animation-delay: 0.33333s;
}
#preloader .jumper > div:nth-child(3) {
-webkit-animation-delay: 0.66666s;
animation-delay: 0.66666s;
}
#-webkit-keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
#keyframes jumper {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
}
5% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div id="preloader">
<div class="jumper">
<div></div>
<div></div>
<div></div>
</div>
</div>
I have some code here that animates a full day (from sun rise to sunset):
(demo)
I'm curious to know if it is possible to make this even more dynamic, such that the animation moves with the time of day.
For Example: if it is noon, the sun should be at the highest point in the sky. Conversely, if it is midnight, the moon would be at the highest point in the sky.
I have a suspicion it can be done with a few lines of javascript:
<script type="text/javascript">
var currentTime = new Date().getHours();
if (document.html) {
'''psuedo_code'''
while true
for hour in day
move sun and moon according to currentTime
}
</script>
HTML & CSS:
<html>
<div class="canvas">
<div class="cloud"></div>
<div class="cloud a"></div>
<div class="cloud b"></div>
<div class="cloud c"></div>
<div class="land">
<div class="tree"></div>
<div class="tree a"></div>
<div class="tree b"></div>
<div class="tree c"></div>
<div class="tree d"></div>
</div>
<div class="star"></div>
<div class="star a"></div>
<div class="star b"></div>
<div class="star c"></div>
<div class="star d"></div>
<div class="wind"></div>
<!-- <div class="swirly-wind">
<span></span>
<span></span>
<span></span>
</div>
<div class="swirly-wind a"></div>
<div class="swirly-wind b"></div> -->
<div class="eclipse">
<div class="sun"></div>
<div class="sun a"></div>
<div class="moon"></div>
<div class="moon a"></div>
</div>
</div>
</html>
<style>
/*body {
position: relative;
}*/
.canvas {
width: 600px;
height: 600px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
animation-delay: 1s;
background: #70c4c6;
animation-name: daylight;
animation-duration: 20s;
animation-iteration-count: infinite;
overflow: hidden;
animation-timing-function: linear;
}
.eclipse {
width: 600px;
height: 600px;
/*border: 1px solid #000;*/
position: absolute;
left:60%;
top:20%;
animation-name: time;
animation-duration: 40s;
animation-iteration-count: infinite;
z-index: 0;
animation-timing-function: linear;
}
.sun {
width:70px;
height:70px;
border-radius: 50%;
background-color: #ffa;
position: absolute;
top: -35px;
left: -35px;
}
.sun.a {
bottom: -35px;
right: -35px;
left: auto;
top:auto;
}
.moon {
position: absolute;
top: -35px;
right: -35px;
width:70px;
height:70px;
border-radius: 50%;
background-color: #fff;
}
.moon.a {
bottom: -35px;
left: -35px;
top:auto;
right: auto;
}
.cloud {
width: 50px;
height: 45px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top:20px;
left: -20%;
animation-name: cloud;
animation-duration: 70s;
animation-iteration-count: infinite;
z-index: 1;
}
.cloud::before {
content:'';
width: 35px;
height: 30px;
background-color: #fff;
margin-left: -20px;
margin-top: 10px;
display: block;
border-radius: 50%;
}
.cloud::after {
content:'';
width: 20px;
height: 20px;
background-color: #fff;
position: absolute;
right: -10px;
top: 17px;
border-radius: 50%;
}
.cloud.a {
top:150px;
animation-duration: 55s;
}
.cloud.b {
top:100px;
left:-15%;
animation-duration: 38s;
}
.cloud.c {
top:250px;
left:-10%;
animation-duration: 25s;
}
.land {
width: 100%;
height: 320px;
position: absolute;
left:-50px;
bottom: -120px;
background-color: #83a81c;
border-radius: 50%;
z-index: 1;
animation-name: land;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.land::before {
width: 100%;
height: 200px;
content: '';
position: absolute;
left: 40%;
top: 20%;
border-radius: 50%;
background-color: #96be29;
transform: rotate(-15deg);
animation-name: land1;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.tree {
width:10px;
height:40px;
background-color: #766257;
left: 200px;
position: absolute;
}
.tree::before {
content: '';
position: absolute;
bottom: 125%;
left: -7px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 43px 20px;
border-color: transparent transparent #bfde3b transparent;
z-index: 1;
animation-name: windy;
animation-duration: 5s;
animation-iteration-count: infinite;
}
.tree::after {
content: '';
position: absolute;
bottom:100%;
left:-25px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 30px 60px 30px;
border-color: transparent transparent #93ae29 transparent;
}
.tree.a {
transform: scale(0.5);
left: 250px;
}
.tree.b {
transform: scale(0.75);
left: 280px;
}
.tree.c {
transform: scale(1.5);
left:450px;
top: 100px;
}
.tree.d {
transform: scale(1.25);
left: 530px;
top: 80px;
z-index: 0;
}
.star {
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 50px;
left: 100px;
animation-name: fader;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::before {
content: '';
width:3px;
height:3px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:20px;
top:20px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star::after {
content: '';
width:2px;
height:2px;
border-radius: 50%;
background-color: #fff;
position: absolute;
left:-200px;
top:50px;
animation-name: blinker;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.star.a {
top:30px;
left:90%;
}
.star.b {
top:120px;
left:70%;
}
.star.c {
top:100px;
left:65%;
}
.star.d {
top:200px;
left:15%;
}
.swirly-wind {
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 12s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.swirly-wind > span {
width: 150px;
background-color: #eee;
height: 2px;
display: block;
position: relative;
}
.swirly-wind > span:first-child {
width: 200px;
}
.swirly-wind > span:nth-child(1)::before {
display: none;
}
.swirly-wind > span:nth-child(2) {
margin-top: -10px;
float: right;
}
.swirly-wind > span:nth-child(3) {
margin-top: 15px;
width: 75px;
float: right;
}
.swirly-wind span::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
border: #fff 2px solid;
bottom: calc(100% - 2px);
right: -15px;
-webkit-clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
clip-path: polygon(100% 0, 100% 100%, 50% 100%, 0 0);
}
.swirly-wind > span:nth-child(3)::before {
top: calc(100% - 2px);
-webkit-clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
clip-path: polygon(100% 0, 100% 100%, 14% 100%, 35% 0);
}
.swirly-wind.a {
top:20%;
width: 75px;
animation-duration: 8s;
}
.swirly-wind.b {
top:45%;
width: 120px;
animation-duration: 15s;
height :1px;
}
.swirly-wind.b::before {
border: #fff 1px solid;
bottom: calc(100% - 1px);
}
.wind {
width: 150px;
background-color: #eee;
height: 2px;
position: absolute;
top:30%;
animation-name: wind;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.wind::before {
content: '';
position: absolute;
left: 200px;
width: 100px;
height: 1px;
background-color: #eee;
top:100px;
}
.wind::after {
content: '';
position: absolute;
left: 400px;
width: 180px;
height: 1px;
background-color: #eee;
top:30px;
}
#keyframes time {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes daylight {
0% { background-color: #70c4c6; }
15% { background-color: #524b64; }
40% { background-color: #354a4a; }
70% { background-color: #354a4a; }
80% { background-color: #e2b553; }
100% { background-color: #70c4c6;}
}
#keyframes land {
40% { background-color: #4d6932; }
70% { background-color: #4d6932;}
}
#keyframes land1 {
40% { background-color: #5b793e; }
70% { background-color: #5b793e;}
}
#keyframes cloud {
0% { transform: translateX(0); }
100% { transform: translateX(850px); }
}
#keyframes rotate {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#keyframes fader {
0% { opacity: 0; }
15% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 0.4; }
70% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes blinker {
0% { opacity: 0; }
18% { opacity: 0; }
25% { opacity: 1; }
40% { opacity: 0; }
60% { opacity: 1; }
70% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes blinker-1 {
0% { opacity: 0; }
30% { opacity: 0; }
40% { opacity: 1; }
60% { opacity: 1; }
80% { opacity: 0; }
100% { opacity: 0; }
}
#keyframes windy {
15% { transform: translateX(5px); transform: rotate(5deg); }
80% { transform: translateX(7px); transform: rotate(7deg);}
80% { transform: translateX(5px); transform: rotate(5deg);}
}
#keyframes wind {
0% { left: -800px; opacity: 0 }
15% { opacity: 1; }
70% { left: 800px; opacity: 1;}
80% { left: 800px; opacity: 0;}
100% { left: -1000px; opacity: 0;}
}
#keyframes snowday {
0% {
top: 0;
}
100% {
top: 100%;
}
}
.snow {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
position: absolute;
top: 0;
}
.snow.fall {
animation-name: snowday ;
animation-duration: 5s;
}
</style>
I want to make a loading screen and a fading up page like here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5. The problem is that I don't know how to end the loading loop and make that fading.
Codes
<body>
<div class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
</body>
body {
background-color: #636e72;
}sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: 50%;
left: 50%;
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
#keyframes sk-chase {
100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot {
80%, 100% { transform: rotate(360deg); }
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
} 100%, 0% {
transform: scale(1.0);
}
}
You need the JavaScript that tells the browser when to hide the loader and show the content. See snippet below
var myVar;
function myFunction() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.querySelector("#loader").style.display = "none";
document.querySelector("#myDiv").style.display = "block";
document.querySelector("body").style.backgroundColor = "white";
}
body {
background-color: #636e72;
}
.sk-chase {
width: 40px;
height: 40px;
animation: sk-chase 2.5s infinite linear both;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
top: calc(50% - 20px);
left: calc(50% - 20px);
position: absolute;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2.0s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: #fff;
border-radius: 100%;
animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3) {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2):before {
animation-delay: -1.0s;
}
.sk-chase-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6):before {
animation-delay: -0.6s;
}
#keyframes sk-chase {
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot {
80%,
100% {
transform: rotate(360deg);
}
}
#keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
}
100%,
0% {
transform: scale(1.0);
}
}
<body onload="myFunction()">
<div id="loader" class="sk-chase">
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
<div class="sk-chase-dot"></div>
</div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Tada!</h2>
<p>Some text in my newly loaded page..</p>
</div>
</body>
animation: sk-chase 2.5s infinite linear both;
Word infinite is your problem. Use a number of reps instead infinite. In your case is 1.
I want to had a delay with a keyframe animation, but it doesn't work.
It's a div with an opacity animation on a click button. The problem is that the opacity is 100% before the animation start.
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
opacity: 1;
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
Here's MY JSFIDDLE with a problem.
Use transition instead of animation and you will also have an easier code:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$(this).text("Open ↓");
} else {
$(this).text("Close ↑");
}
$('div.box').toggleClass('In');
$(this).toggleClass("clicked");
});
body {
text-align: center
}
div.box {
display: inline-block;
background: pink;
height: 0;
width: 300px;
opacity: 0;
transition: .8s .3s;
}
button {
font-size: 16px;
}
div.In {
opacity: 1;
height: 300px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div class="box"> </div>
Considering your code you may correct it like this:
$('button').click(function() {
if ($(this).hasClass("clicked")) {
$('div').removeClass('In');
$('div').addClass('Out');
$(this).text("Open ↓");
$(this).removeClass("clicked");
} else {
$('div').addClass('In');
$('div').removeClass('Out');
$(this).text("Close ↑");
$(this).addClass("clicked");
}
});
body {
text-align: center
}
div {
display: inline-block;
background: pink;
height: 300px;
width: 300px;
opacity: 0;
}
button {
font-size: 16px;
}
#keyframes In {
0% {
opacity: 0;
height: 0
}
100% {
opacity: 1;
height: 300px
}
}
#keyframes Out {
0% {
opacity: 1;
height: 300px
}
100% {
opacity: 0;
height: 0
}
}
.In {
animation-duration: 800ms;
animation-name: In;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
/* opacity:0; removed*/
}
.Out {
animation-duration: 800ms;
animation-name: Out;
animation-delay: 0.3s;
animation-fill-mode:forwards; /*Added this*/
opacity:1;
height:300px; /*Added this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Open ↓ </button> <br>
<div> </div>
I was adding some background styles and the problem is i could not select the input tags, buttons using mouse, so the problem starts after adding the style.
Here is my code : Input tags not working
<div class="bla">
<div class="test-continer">
<span>Problem: Input tags, Buttons and link tags are <b>not working</b></span>
<h4>when "test-continer" div , h4 (header) and above span is removed its working!</h4>
<input id = "input" type="text">
<button id = "button" onClick = "check()" >Submit</button>
<strong>What makes this problem ?</strong>
</div>
</div>
When the <div class="test-continer">, <h4> and <span>were removed then the <input> is working properly, i am confused ?
Your .big-bubbles element is appearing on top of your .test-continer form. This means that you're clicking on the .big-bubbles element and not within your form control.
You can fix this by giving your .test-continer element a relative position and a z-index greater than 1 (which is the z-index on your .big-bubbles element:
.test-continer {
position: relative;
z-index: 2;
}
Modified Codepen demo.
It because your bubble div was overlay on that. It have position: absolute and z-index so that it was overlay to your continer.
So, that you need fix .test-continer div position: absolute or relative with z-index more then 1.
.test-continer {
position: absolute;
z-index: 2;
}
Another solution is disabling pointer event for bubble div.
.bg-bubbles {
z-index: 1;
pointer-events: none;
}
change bg-bubbles class position property from absolute to relative.
.bg-bubbles {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
Every thing is working whats the problem
Snippet
.bla {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-top: 0px;
overflow: hidden;
background: #4d4d4d;
background: -webkit-linear-gradient(top left, #4d4d4d 0%, #999999 100%);
background: linear-gradient(to bottom right, #4d4d4d 0%, #999999 100%);
}
.bg-bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.bg-bubbles li {
position: absolute;
list-style: none;
display: block;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.15);
bottom: -160px;
-webkit-animation: square 25s infinite;
animation: square 25s infinite;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.bg-bubbles li:nth-child(1) {
left: 10%;
}
.bg-bubbles li:nth-child(2) {
left: 20%;
width: 80px;
height: 80px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 17s;
animation-duration: 17s;
}
.bg-bubbles li:nth-child(3) {
left: 25%;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.bg-bubbles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
-webkit-animation-duration: 22s;
animation-duration: 22s;
background-color: rgba(255, 255, 255, 0.25);
}
.bg-bubbles li:nth-child(5) {
left: 70%;
}
.bg-bubbles li:nth-child(6) {
left: 80%;
width: 120px;
height: 120px;
-webkit-animation-delay: 3s;
animation-delay: 3s;
background-color: rgba(255, 255, 255, 0.2);
}
.bg-bubbles li:nth-child(7) {
left: 32%;
width: 160px;
height: 160px;
-webkit-animation-delay: 7s;
animation-delay: 7s;
}
.bg-bubbles li:nth-child(8) {
left: 55%;
width: 20px;
height: 20px;
-webkit-animation-delay: 15s;
animation-delay: 15s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
}
.bg-bubbles li:nth-child(9) {
left: 25%;
width: 10px;
height: 10px;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-duration: 40s;
animation-duration: 40s;
background-color: rgba(255, 255, 255, 0.3);
}
.bg-bubbles li:nth-child(10) {
left: 90%;
width: 160px;
height: 160px;
-webkit-animation-delay: 11s;
animation-delay: 11s;
}
#-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
#keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
<div class="bla">
<div class="test-continer">
<span>Problem: Input tags, Buttons and link tags are <b>not working</b></span>
<h4>when "test-continer" div , h4 (header) and above span is removed its working!</h4>
<input id = "input" type="text">
<button id = "button" onClick = "check()" >Submit</button>
<strong>What makes this problem ?</strong>
</div>
</div>