Hi I've been looking for answers on my problem now for maybe a few weeks now and I find nothing. I'm trying to make a reaction test to check how long time it takes for the user before they react and it will popup either a square or a circle and I hit a problem...
My question is if there's any way to start an animation when the user clicks the button on the screen ?
Here's my code so far:
HTML:
<div id="first-child"></div>
<button id="Second-parent">Click me !</button>
CSS:
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
#-webkit-animation myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
I prefer CSS, HTML, jQuery or Javascript. But if there's another way to do it I'll gladly hear that too.
$(function(){
$('#second-parent').click(function(){
e1 = $('#first-child');
e1.addClass('animate');
e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
e1.removeClass('animate');
});
});
});
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.animate {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
}
#keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#-webkit-keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
<div id="first-child"></div><button id="second-parent">Click me !</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(function(){
$('#second-parent').on('click',function(){
$('#first-child').addClass('animate');
});
});
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.animate {
-webkit-animation: myfirst 3s;
animation: myfirst 3s;
}
#keyframes myfirst {
0% {background: white;}
40% {background: gray;}
70% {background: yellow;}
100% {background: red;}
}
#second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first-child"></div>
<button id="second-parent">Click me !</button>
Use a css class for the animation and add the class to div when button clicked. (use #keyframes to define css animations.)
Here is a solution using pure javascript and CSS #keyframes:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="utf-8" />
<title>CSS Animations</title>
<style>
/* <![CDATA[ */
div {
height: 2em;
width: 50%;
border: 1px solid black;
background-color: black;
color: yellow;
}
.animate {
animation-name: slide-right;
animation-duration: 2s;
/* Preserve the effect of the animation at ending */
animation-fill-mode: forwards;
}
#keyframes slide-right {
from {
margin-left: 0px;
}
50% {
margin-left: 110px;
opacity: 0.5;
}
to {
margin-left: 200px;
opacity: 0.2;
}
}
/* ]]> */
</style>
<script>
/* <![CDATA[ */
function DoAnimation() {
var targetElement = document.getElementById("target");
targetElement.className = "animate";
}
/* ]]> */
</script>
</head>
<body>
<h1>CSS Animations</h1>
<div id="target">Super div</div>
<button onclick="DoAnimation();">Go</button>
</body>
</html>
Remove the -webkit-animation and animation definitions from #firstChild and instead create an "anim" class definition:
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
}
.anim{
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
Then when you want to trigger the animation simply add the .anim class to your element with jQUery:
$("#first-child").addClass("anim");
Here the sample for you
#first-child {
height: 200px;
width: 200px;
background: white;
border-radius: 0%;
margin-top: 150px;
margin-bottom: 0px;
margin-left: 500px;
margin-right: 0px;
-webkit-animation: myfirst 1s;
animation: myfirst 1s;
}
#-webkit-animation myfirst {
0% {background: white;}
20% {background: white;}
40% {background: white;}
60% {background: white;}
80% {background: white;}
100% {background: red;}
}
.second-parent {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 415px;
margin-right: 0px;
}
<script>
$(document).ready(function()
{
$('#Second-parent').click(function()
{
$('#first-child').addClass('second-parent');
});
});
</script>
</head>
<body>
<div id="first-child"></div>
<button id="Second-parent">Click me !</button>
</body>
</html>
==> please add the jquery library in the , you can download lirabry in: http://jquery.com/download/
Related
i was wondering how to make a circle that transforms into a wider box in html/css.
I have tried this but it does not transform properly
If you guys have any ideas on how to make this, i would really appreaciate it very much thank you!
.circle{
width: 700px;
height:700px;
margin:0 auto;
background-color: #14b1e7;
animation-name: stretch;
animation-duration:6s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-duration:alternate;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
opacity: 100%;
text-align: center;
text-shadow: 5px;
font-size: 60px;
font-weight: bold;
border-radius: 30px;
}
#keyframes stretch {
0%{
transform: scale(.1);
background-color:#14b1e7;
border-radius: 100%;
}
50%{
background-color: #14b1e7;
}
100%{
transform:scale(.7);
background-color: #14b1e7;
}
}
Here's a live example: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css
.circle {
width: 100px;
border-radius: 50%;
transition: all 1s;
}
.circle:hover {
border-radius: 0;
width: 200px;
}
In the example, the circle initially has 50% border-radius and 100px width. On hover, border-radius is set to 0 and width to 200px. Because of the transition property, the change is animated.
The transition: all 1s property makes every property change gradually and last for 1 second. Check the docs for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
You can simply change border-radius according to the keyframes.
.animation {
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 100px;
background-color: black;
border: 1px solid #337ab7;
border-radius: 100% 100% 100% 100%;
animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
#keyframes circle-to-square {
0% {
border-radius:100% 100% 100% 100%;
background:black;
}
25% {
border-radius:75% 75% 75% 75%;
background:black;
}
50% {
border-radius:50% 50% 50% 50%;
background:black;
}
75% {
border-radius:25% 25% 25% 25%;
background:black;
}
100% {
border-radius:0 0 0 0;
background:black;
}
<div class="container animated zoomIn">
<div class="row">
<div class="animation"></div>
</div>
</div>
From this question ("Rotate objects around circle using CSS?"), I copied the following code, but is it possible to insert pictures into the code? I would like to insert pictures into the circles so that one picture orbits another. For example, Earth orbiting the sun.
Earth: https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand
Sun: https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg
How do I modify the code in such a way as to make the earth orbit the sun instead of the blank circles?
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>
EDIT:
This is the output when I add the images:
<!DOCTYPE html>
<html>
<head>
<style>
.outCircle {
background-image: url("https://media.beam.usnews.com/5a/5e/5a739e244b289049e789d7752975/170531-sun-editorial.jpg");
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: ccircle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: pink;
display: block;
background-image: url("https://i.imgur.com/Eo52CF0_d.webp?maxwidth=760&fidelity=grand");
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
</style>
</head>
<body>
<script>
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
background-color: blue;
display: block;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
</script>
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
</body>
</html>
i just add background-image css to both element. And linking the earth and moon picture from Wikipedia to that element.
body{
background:#000;
}
.earth, .moon{
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: 120%; /* Resize the background image to cover the entire container */
-moz-border-radius: 50%; /* to make circle shape */
-webkit-border-radius: 50%;
border-radius: 50%;
}
.earth {
background-color: blue;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/9/90/Small_Earth.jpg" );
position: absolute;
width: 200px;
height: 200px;
box-shadow:0 0 20px dodgerblue;
margin:50px;
}
.moon {
position: relative;
background-color: white;
background-image:url( "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/631px-FullMoon2010.jpg" );
width: 100px;
height: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
}
.counterrotate {
width: 50%;
height: 50%;
-webkit-animation: ccircle 10s infinite linear;
}
#-webkit-keyframes circle {
from {-webkit-transform: rotateZ(0deg)}
to {-webkit-transform: rotateZ(360deg)}
}
#-webkit-keyframes ccircle {
from {-webkit-transform: rotateZ(360deg)}
to {-webkit-transform: rotateZ(0deg)}
}
<div class="earth">
<div class="rotate">
<div class="counterrotate">
<div class="moon"></div>
</div>
</div>
</div>
You could try adding each image as a background-image right in the CSS rules that define their size/shape.
Add a background image to your elements. Open your inspector and click on the element and it will highlight the elements border-box, identify which element is what and then in your CSS, add a background:url(link to the image) to the selector/element you wish to have an image on.
.outCircle {
width: 200px;
height: 200px;
background-color: blue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation: circle 10s infinite linear;
background: url(https://cdn.pixabay.com/photo/2017/05/12/22/48/mouse-2308339__180.jpg) no-repeat;
border-radius: 50%;
}
.counterrotate {
width: 50px;
height: 50px;
-webkit-animation: circle 10s infinite linear;
}
.inner {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 0px;
display: block;
background: center url(https://as1.ftcdn.net/jpg/00/31/01/02/220_F_31010244_P6FGF9nfBY1oaGFndhdHhUUIfjHqMoib.jpg) no-repeat white;
background-size: 90%;
}
#-webkit-keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
#-webkit-keyframes ccircle {
from {
-webkit-transform: rotateZ(360deg)
}
to {
-webkit-transform: rotateZ(0deg)
}
}
<div class="outCircle">
<div class="rotate">
<div class="counterrotate">
<div class="inner">Hello</div>
</div>
</div>
</div>
I have my code from this site: https://isabelcastillo.com/error-info-messages-css
I want that a css message box is shown for 3 seconds after a button click and then the message is fading out.
Here is my code:
.isa_success,
.isa_error {
margin: 8px 0px;
padding: 8px;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
}
.isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.isa_error {
color: #D8000C;
background-color: #FFD2D2;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
<button id="handle">Fade</button>
<div id="isa_success">Whatever you want here - images or text</div>
Test
<script type="text/javascript">
function start() {
var slideSource = document.getElementById('isa_success');
document.getElementById('handle').onclick = function () {
slideSource.classList.add('fade');
}}
</script>
This script does not work.
Here is my working code. My main fault was that i have forgot to remove the classelement after a specific time.
Thanks for help!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fade{
background: red;
opacity:0;
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
margin: 8px 0px;
padding:8px;
position: absolute;
left: 50%;
top: 20%;
}
.elementToFadeInAndOut {
animation: fadeInOut 3s linear forwards;
}
#keyframes fadeInOut {
0% { opacity:0; }
50% { opacity:1; }
100% { opacity:0; }
}
</style>
</head>
<body onload="javascript:start();">
<body>
<script type="text/javascript">
function start() {
var div = document.querySelector(".fade");
var btn = document.querySelector(".fadeButton");
btn.addEventListener("click", function(){
div.classList.add("elementToFadeInAndOut");
setTimeout(function(){div.classList.remove("elementToFadeInAndOut");}, 3000);
});
}
</script>
<button class="fadeButton">Button</button>
<div class="fade">This is a message!</div>
</body>
</html>
You are adding a class 'fade' to the classist but don't have it in the CSS file.
try this
var slideSource = document.getElementById('isa_success');
document.getElementById('handle').onclick = function () {
slideSource.classList.add('fade');
}
.isa_success,
.isa_error {
margin: 8px 0px;
padding: 8px;
position: absolute;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
}
.isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.isa_error {
color: #D8000C;
background-color: #FFD2D2;
border-radius: .5em;
opacity: 0;
-webkit-animation: fadeInOut 3s;
animation: fadeInOut 3s;
}
.fade{
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
<button id="handle">Fade</button>
<div id="isa_success">Whatever you want here - images or text</div>
Test
There is a possibility to do this without Javascript. What's important though is the sequence of the HTML elements.
Here I am using a hidden checkbox to determine whether or not a button (label) was clicked.
#clickMe {
display: none;
}
#clickMeLabel {
padding: 10px;
background-color: lightgreen;
border: none;
border-radius: 10px;
display: inline-block;
}
#clickMe:checked+#clickMeLabel {
background-color: green;
color: white;
}
#isa_success {
color: #4F8A10;
background-color: #DFF2BF;
border-radius: .5em;
opacity: 0;
transition: opacity 3s;
}
#clickMe:checked~#isa_success {
opacity: 1;
}
<input id="clickMe" type="checkbox">
<label for="clickMe" id="clickMeLabel">Click me</label>
<div id="isa_success">Whatever you want here - images or text</div>
I have 4 rings of circles that are white and I want one of them to change blue for 1 second, the next one for one second, and so on, totalling 4 seconds. I was thinking of trying this with just CSS animations but I think I'll need JavaScript.. any ideas on how to achieve this? Thanks!
Example: http://imgur.com/a/h0Wy0
HTML:
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>
CSS:
.circle {
border-radius: 50%;
background: transparent;
border: 10px solid white;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
}
.c2 {
width: 250px;
height: 250px;
border-color: white;
}
.c3 {
width: 200px;
height: 200px;
border-color: white;
}
.c4 {
width: 150px;
height: 150px;
}
Here is the JSFiddle: https://jsfiddle.net/ydb48372/3/
You can do this with just css animations. First create animation of 4s duration that sets border-color to blue for 1s or 25% of time of those 4 seconds and the rest of animation returns border-color to gray or 75% of full animation time. Now you just need to use animation-delay on each circle so that animation on one circle starts after 1s when color from previous circle has changed to gray.
.circles {
position: relative;
min-height: 100vh;
}
.circle {
border-radius: 50%;
border: 10px solid gray;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-duration: 4s;
animation-name: changeColor;
animation-iteration-count: infinite;
}
.c1 {
height: 300px;
width: 300px;
}
.c2 {
height: 250px;
width: 250px;
animation-delay: 1s;
}
.c3 {
height: 200px;
width: 200px;
animation-delay: 2s;
}
.c4 {
height: 150px;
width: 150px;
animation-delay: 3s;
}
#keyframes changeColor {
0% {
border-color: #1C50A8;
}
24% {
border-color: #1C50A8;
}
25% {
border-color: gray;
}
100% {
border-color: gray;
}
}
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>
You can use css3 key frames to achieve what you are looking for. You might have to play with the numbers to get the exact timings you want but it should be achievable.
div {
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
0% {border-color: white;}
100% {border-color: blue;}
}
/* Standard syntax */
#keyframes mymove {
0% {border-color: white;}
100% {border-color: blue;}
}
Using animation-delay like a commentator mentions is correct.
.circle {
border-radius: 50%;
background: transparent;
border: 10px solid white;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
}
.c2 {
width: 250px;
height: 250px;
border-color: white;
}
.c3 {
width: 200px;
height: 200px;
border-color: white;
}
.c4 {
width: 150px;
height: 150px;
}
.c1, .c2, .c3, .c4 {
animation: 400ms change-border-color forwards;
}
.c2 {
animation-delay: 450ms;
}
.c3 {
animation-delay: 900ms;
}
.c4 {
animation-delay: 1350ms;
}
#keyframes change-border-color {
from { border-color: white; }
to { border-color: blue; }
}
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>
Refer animation and animation-delay property in css
animation: animate 1s;
animation-delay: 1s;
Fiddle
Here's a solution using a pseudoelement on .circles
I've used keyframes to change the height, width and position.
fiddle
body {
background: grey;
}
.circles {
position: relative;
}
.circles::after {
position: absolute;
content: "";
width: 300px;
height: 300px;
top: 0;
left: 0;
right: 0;
margin: auto;
border: 10px solid blue;
border-radius: 50%;
-webkit-animation: blue 5s infinite;
-moz-animation: blue 5s infinite;
-o-animation: blue 5s infinite;
animation: blue 5s infinite;
}
.circle {
border-radius: 50%;
background: transparent;
border: 10px solid white;
width: 300px;
height: 300px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
}
.c2 {
width: 250px;
height: 250px;
border-color: white;
}
.c3 {
width: 200px;
height: 200px;
border-color: white;
}
.c4 {
width: 150px;
height: 150px;
}
#keyframes blue {
25% {
width: 300px;
height: 300px;
top: 0px;
}
25.001% {
width: 250px;
height: 250px;
top: 25px;
}
50% {
width: 250px;
height: 250px;
top: 25px;
}
50.001% {
width: 200px;
height: 200px;
top: 50px;
}
75% {
width: 200px;
height: 200px;
top: 50px;
}
75.001% {
width: 150px;
height: 150px;
top: 75px;
}
100% {
width: 150px;
height: 150px;
top: 75px;
}
}
<div class="circles">
<div class="circle c1">
<div class="circle c2">
<div class="circle c3">
<div class="circle c4"></div>
</div>
</div>
</div>
</div>
I have created a preloader which works fine apart from when it is gone it is still there as a invisible layer covering all the content on the page. So none of the content like links can be clicked. How can this be solved but still keep the animation?
Codepen
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
</div>
<div class="section" id="left_sect">
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
css:
*{
margin: 0;
padding: 0;
}
body{
background-color: #666666;
width: 100%;
}
#preloader_wrap{
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section{
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect{
left: 0;
}
#right_sect{
right: 0;
}
#content{
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img{
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar{
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div{
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
body.loaded .section{
width: 0;
}
body.loaded #content{
opacity: 0;
}
header{
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul{
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li{
display: inline-block;
font-size: 40px;
}
ul li a{
color: white;
}
JS:
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
}, 2000);
});
Change your script to this...
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('#preloader_wrap').remove();
}, 2000);
});
That will completely remove the layer once the page is loaded.
Its basically a z-index problem on preloader_wrap. You can fix the z-index after the loader is loaded with $("#preloader_wrap").css("z-index","-1")
$(document).ready(function() {
setTimeout(function() {
$('body').addClass('loaded');
$("#preloader_wrap").css("z-index", "-1");
}, 2000);
});
* {
margin: 0;
padding: 0;
}
body {
background-color: #666666;
width: 100%;
}
#preloader_wrap {
z-index: 1010;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.section {
position: fixed;
width: 50%;
height: 100%;
background-color: black;
top: 0;
transition: width 1s;
}
#left_sect {
left: 0;
}
#right_sect {
right: 0;
}
#content {
position: relative;
margin: 100px auto 0 auto;
width: 600px;
transition: all 1s;
}
#img {
height: 200px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#loading_bar {
height: 50px;
width: 50px;
margin: 30px auto;
}
#loading_bar div {
height: 100%;
width: 100%;
border-bottom: 4px solid #ffffff;
border-left: 4px solid transparent;
border-radius: 100%;
animation: spin 0.9s linear infinite;
-webkit-animation: spin 0.9s linear infinite;
-moz-animation: spin 0.9s linear infinite;
-o-animation: spin 0.9s linear infinite;
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
body.loaded .section {
width: 0;
}
body.loaded #content {
opacity: 0;
}
header {
width: 100%;
height: 75px;
background-color: blue;
position: fixed;
top: 0;
z-index: 1000;
}
ul {
list-style-type: none;
margin: 10px auto;
width: 300px;
}
ul li {
display: inline-block;
font-size: 40px;
}
ul li a {
color: white;
}
<body>
<div id="preloader_wrap">
<div class="section" id="right_sect">
sdsadsadsa
</div>
<div class="section" id="left_sect">
dasdsadsad
</div>
<div id="content">
<div id="img">
</div>
<div id="loading_bar">
<div></div>
</div>
</div>
</div>
<header>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</header>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Your loader area has a z-index of 1010, which puts it in front of everything else, and you aren't removing that, or removing the element itself. And because its width and height are 100% it blocks the whole page.
You can fix this just using CSS. You're already doing this:
body.loaded .section{
width:0;
}
body.loaded #content{
opacity: 0;
}
However, this only hides the inner parts of the loader, not the whole thing. Do this instead:
body.loaded #preloader_wrap {
display:none;
}
See working example: https://codepen.io/anon/pen/ZKbJEj
I'm not overly clear on which parts of your markup you are trying to hide, but assuming it's all of the stuff within the preloader_wrap element (and if not I would move that markup outside of it), the issue you are having is that this element is stacked on top of the other elements due to it's z-index being higher.
The easiest fix for this is to add the following CSS:
body.loaded #preloader_wrap {
display: none;
}
I can see that this breaks your animation, you could consider the following instead:
body.loaded #content{
opacity: 0;
display: none;
}
However this feels like a bit of a hack given we wouldn't be hiding the wrapper here therefore if anything else in it gave it height it would still overlay part of the page.
I would consider refactoring your markup/CSS transition to make this work for you in a more consistent way.