I have this website
On desktop everything works fine, but on iPhone (Safari and Chrome both) I have problem with preloader:
Bug screenshot
CSS:
.preloader_wrapper {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
z-index: 100500;
}
.preloader {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
width: 50px;
height: 50px;
}
.preloader::before {
content: '';
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 4px solid #951b25;
border-left-color: transparent;
border-right-color: transparent;
animation: spin 1s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(45deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
HTML:
<div class="preloader_wrapper">
<div class="preloader"></div>
</div>
Due to my googling I think the problem is in position fixed. How to solve it?
Hmm, I think .preloader absolute positing might fix it. I'm on a phone right now so can't test it. Otherwise I suggest to try display; flex; with justify and alignment props on the .preloader_wrapper and remove all the positioning stuff from the .preloader itself.
Related
I'm making a HTML program where I want to have two circles traveling on a circular path, in opposite directions. That's the main idea. Here's my code so far (I followed this tutorial on circular movement coding, and stopped right at 8:35 when it's just the red circle in motion):
styles.css:
body{
margin: 0;
padding: 0;
}
.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line{
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before{
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Two Circles in Circular Motion</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = "circle">
<div class = "line"></div>
</div>
</body>
</html>
Right now I only have 1 circle. I want to create another one, and animate it so that it travels in the same circular path but in the opposite direction. I'm relatively new to CSS and HTML, so can someone please help? Thanks!
You can optimize your code and use only one div and its pseudo element for the small circles:
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
border-radius: 50%;
border: 2px solid #262626;
/* place both item to the center */
display:grid;
align-content:center;
justify-content:center;
}
.circle::before,
.circle::after {
content: '';
grid-area:1/1; /* both will overlap */
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
transform:rotate(0deg) translate(200px) rotate(0deg);
animation:animate 2s linear infinite;
}
.circle::after {
animation-direction:reverse; /* the opposite animation for the after */
background:blue;
}
#keyframes animate {
100% {transform:rotate(360deg) translate(200px) rotate(-360deg);}
}
<div class="circle">
</div>
Another solution is you could have made another line and used
animation-direction: reverse; on it.
Example;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line, .line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
.line2 {
animation-direction: reverse;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
You also could have created another line (like I did in my example (line2)), and bound a different animation keyframe to it like below;
body {
margin: 0;
padding: 0;
}
.circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background: transparent;
border-radius: 50%;
border: 2px solid #262626;
}
.line {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate 1s linear infinite;
}
.line2 {
width: 50%;
height: 2px;
background: transparent;
position: absolute;
top: calc(50% - 1px);
transform-origin: right;
animation: animate2 1s linear infinite;
}
.line:before, .line2:before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: #f00;
border-radius: 50%;
top: -10px;
left: -11px;
}
#keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes animate2 {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
<div class="circle">
<div class="line"></div>
<div class="line2"></div>
</div>
There are many possibilities to achieve what you are looking for :)
Because you say you are new to HTML and CSS I figured I'd show you some alternatives.
Basically, I want my div to show from left to right by altering it's width. But when transform: translate(-50%,-50%); is present, the div's width animates from it's center to the assigned position.
I can't really change the position to anything but absolute since the div is placed in a specific spot.
.Container{
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
height: 150px;
animation: Animate 3s forwards;
}
.Container:after{
content: '';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 150px;
background-color: rgb(110, 110, 110);
transform: skew(-35deg);
transform-origin: 100% 0;
z-index: 99;
}
#keyframes Animate{
from{
width: 0px;
}
to{
width: 250px;
background-color: red;
}
}
<div class="Container">
<div class="projDescription">
<h2>Hi</h2>
<p>Hello</p>
<br>
Help?
</div>
</div>
Would it be better if I used Jquery instead?
Also, I'll ask this here too since it has to do with the same div; can I animate the :after pseudo element? It's mostly just there to give the div an angled style, and I know I could've just used something else to style it. But I was just curious if it is possible.
Just remove the transform property from your .Container class and use calc() if you know the exact value of the width and height
.Container{
z-index: 100;
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 125px);
height: 150px;
animation: Animate 3s forwards;
}
.Container:after{
content:'';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 150px;
background-color: rgb(110, 110, 110);
transform: skew(-35deg);
transform-origin: 100% 0;
z-index: 99;
}
#keyframes Animate{
from{
width: 0px;
}
to{
width: 250px;
background-color: red;
}
}
I'd move some attributes to inner classes and made small modifications to achieve it; and also I used scale for width expansion animation instead of animation width property, to avoid an unnecessary reflow
.Container{
z-index: 100;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 250px;
height: 150px;
}
.projDescription{
height: 100%;
transform: scaleX(0);
position: absolute;
top: 0;
width:100% ;
animation: Animate 3s forwards;
}
.Container:after{
content: '';
position: absolute;
top: 0;
left: 90%;
width: 200px;
height: 100%;
box-sizing: border-box;
background-color: rgb(110, 110, 110);
transform: skew(-35deg) translateX(-50%);
transform-origin: 100% 0;
z-index: 99;
animation: move 3s forwards;
}
#keyframes Animate{
to{
transform: scaleX(1);
background-color: red;
}
}
#keyframes move{
to{
transform: skew(-35deg) translateX(0%);
}
}
<div class="Container">
<div class="projDescription">
<h2>Hi</h2>
<p>Hello</p>
Help?
</div>
</div>
I'm trying to make a 'dot' orbit around another object (circle) but due to the z-index the dot always appears above the circle it is meant orbiting around.
CodePen link: https://codepen.io/moy/pen/ROVZXd?editors=1100
Ideally the 2nd half of the animation would take place behind the object so it's not seen until it comes out the other side - is that possible?
I thought about fading out the object that is moving around but I don't think that would give a smooth/masked effect?
A bit stuck as to how I'd mask this area as I can't see a way the CSS would know it's meant to be hidden. I thought maybe I could change the z-index 50% though the animation it and reset it at 0%/100% but that doesn't appear to do anything.
Any ideas? Thanks in advance!
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 30px auto;
position: relative;
width: 100px;
z-index: 20;
}
.orbit {
border: 2px #eee transparent;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
z-index: 10;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
z-index: 10;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); z-index: 20;
}
50% {
z-index: -20;
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); z-index: 20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
I seem to have solved this by adding a negative z-index to an animation applied to the parent .orbit
Link: https://codepen.io/moy/pen/wZdpRw?editors=1100
I initially applied this at 50% through the animation as that should be the furthest away the dot is before it comes back behind the larger circle. However this didn't work, setting it on 100% did work. Not entirely sure why but it seems to work!
The initial issue was due to the fact that you are applying z-index to the parent element and doing so it will impossible to make the child to move behind it (Why elements with any z-index value can never cover its child?) thus changin z-index is useless
Even if you remove the z-index from the parent you still have the transform that is also creating a stacking context making impossible to the child element to move behind so you cannot make the .moon to move behind the .earth.
The only way to do it (like you already noticed) is to remove z-index from the .earth to avoid the earth creating a stacking context and animate z-index of orbit to make the orbit AND the moon moving behind the earth (not only the moon).
Add some coloration to better see this:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 60px auto;
position: relative;
width: 100px;
}
.orbit {
animation: hide ease-in-out infinite;
animation-duration: 2s;
background:red;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
}
}
#keyframes hide {
0% {
z-index: 20;
}
100% {
z-index: -20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
Now if you add back z-index to earth it will stop working because of the stacking context:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 60px auto;
position: relative;
width: 100px;
z-index:2;
}
.orbit {
animation: hide ease-in-out infinite;
animation-duration: 2s;
background:red;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg);
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg);
}
}
#keyframes hide {
0% {
z-index: 20;
}
100% {
z-index: -20;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
You can try key-framing the opacity:
.earth {
background: white;
border: 1px solid black;
border-radius: 50%;
display: block;
height: 100px;
margin: 30px auto;
position: relative;
width: 100px;
z-index: 20;
}
.orbit {
border: 2px #eee transparent;
border-radius: 50%;
height: 140px;
margin: auto;
position: absolute;
top: -20px;
left: -20px;
transform: rotateZ(60deg) rotateY(60deg);
transform-style: preserve-3d;
width: 140px;
z-index: 10;
}
.orbit .moon {
animation: move ease-in-out infinite;
animation-duration: 2s;
background: black;
border-radius: 50%;
height: 15px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 15px;
z-index: 10;
}
#keyframes move {
0% {
transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); opacity: 1;
}
56% {
opacity: 1;
}
58% {
opacity: 0;
}
77% {
opacity: 0;
}
78% {
opacity: 1;
}
100% {
transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); opacity: 1;
}
}
<div class="earth">
<div class="orbit">
<div class="moon"></div>
</div>
</div>
Here's a simple example of what I mean.
HTML
<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>
CSS
.main-container {
width: 100%;
height: 200px;
margin: 250px 0 0 0;
position: relative;
background-color: yellow;
}
.headtest {
font-family: 'quicksand', helvetica;
background-color: #a2aba2;
width: 100%;
height: 200px;
position: absolute;
top: 0;
right: 0;
}
.ht-tx1 {
width: 100%;
height: 20px;
text-align: center;
background-color: #000;
animation: test-ani1 2s forwards;
position: absolute;
top: 0;
right: 0;
}
.ht-tx2 {
width: 100%;
height: 20px;
text-align: center;
background-color: #000;
animation: test-ani2 2s forwards;
position: absolute;
bottom: 0;
right: 0;
}
#keyframes test-ani1 {
100% {
transform: translateY(-20px);
}
}
#keyframes test-ani2 {
100% {
transform: translateY(20px);
}
}
-
If you view in Chrome, both black bars slide out perfectly. The one transitioning from behind, and the one in front.
If you view it in Firefox, the bar transitioning from behind is broken. It sometimes works, but mostly it ignores the slide animation and just appears at the end of the animation duration.
I've re-created this a number of times and it seems that items that transition from behind another element are broken in firefox.
I've tried using -moz- which doesn't work. IS there anything else you can think of?
I've tried it without the absolute positioning, with z-indexs. and nothing seems to work.
EDIT ----
I appreciate work-around ideas, but I'd really like to know the route cause of this if anyone knows?
Thanks very much.
It seems Firefox is inconsistent when animate the transform property, and I can't say why (yet), most likely a bug though.
Here is 2 workarounds to achieve the same effect
.main-container {
width: 100%;
height: 200px;
margin: 50px 0 0 0;
position: relative;
background-color: yellow;
}
.headtest {
font-family: 'quicksand', helvetica;
background-color: #a2aba2;
width: 100%;
height: 200px;
position: absolute;
top: 0;
right: 0;
}
.ht-tx1 {
width: 100%;
height: 20px;
text-align: center;
background-color: #000;
animation: test-ani1 2s forwards;
position: absolute;
top: 0;
right: 0;
}
.ht-tx2 {
width: 100%;
height: 20px;
text-align: center;
background-color: #000;
animation: test-ani2 2s forwards;
position: absolute;
bottom: 0;
right: 0;
}
#keyframes test-ani1 {
0% {
transform: translateY(-1px);
}
0.1% {
transform: translateY(0px);
}
100% {
transform: translateY(-20px);
}
}
#keyframes test-ani2 {
100% {
transform: translateY(20px);
}
}
<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>
.main-container {
width: 100%;
height: 200px;
margin: 50px 0 0 0;
position: relative;
background-color: yellow;
}
.headtest {
font-family: 'quicksand', helvetica;
background-color: #a2aba2;
width: 100%;
height: 200px;
position: absolute;
top: 0;
right: 0;
}
.ht-tx1 {
width: 100%;
height: 20px;
text-align: center;
background-color: #000;
animation: test-ani1 2s forwards;
position: absolute;
top: 0;
right: 0;
}
.ht-tx2 {
width: 100%;
height: 0px;
text-align: center;
background-color: #000;
animation: test-ani2 2s forwards;
position: absolute;
bottom: 0;
right: 0;
}
#keyframes test-ani1 {
100% {
top: -20px;
}
}
#keyframes test-ani2 {
100% {
height: 20px;
bottom: -20px;
}
}
<div class="main-container">
<div class="ht-tx1"></div>
<div class="headtest"></div>
<div class="ht-tx2"></div>
</div>
The solution relies on the z-index property of your elements: if you don't specify it the elements lay out one on top of the others, following the flow of the HTML document, when their "position" is set to "absolute". So "ht-txt1" is underneath "headtest" and "ht-tx2" is on top of "headtest".
To correct this "ht-tx1" and "ht-tx2" should take a "z-index" value of -1, so they are hidden underneath "headtest".
As for FF compatibility you need to prefix your "transform" effect with -moz-, check http://caniuse.com/#feat=transforms2d for more details.
Here's the CSS style code:
.main-container {
width: 100%;
height: 200px;
margin: 250px 0 0 0;
position: relative;
background-color: yellow;
}
.headtest {
font-family: 'quicksand', helvetica;
background-color: #a2aba2;
width: 100%;
height: 200px;
position: absolute;
top: 0;
right: 0;
}
.ht-tx1 {
width: 100%;
height: 20px;
text-align: center;
background-color: #000;
animation: test-ani1 2s forwards;
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
.ht-tx2 {
width: 100%;
height: 20px;
text-align: center;
background-color: #000;
animation: test-ani2 2s forwards;
position: absolute;
bottom: 0;
right: 0;
z-index: -1;
}
#keyframes test-ani1 {
100% {
-ms-transform: translateY(-20px);
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
transform: translateY(-20px);
}
}
#keyframes test-ani2 {
100% {
-ms-transform: translateY(20px);
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
}
I have a couple sets of layers that are all set to position: absolute; and they display over each other. I have delays and fadeOut's in place so it acts in sequence. For some reason on my last display layer, if I set the z-index to a number that is displays, it effects all of the others, even though it is not showing. There will just be a blank section with my background-color, sort of like a block.
Here is the code for it. The div in question is home-learn. I have tried changing the z-index to be above the other layers, equal and less than equal. Each different way causes its own separate issue.
For example, right now I have it set to 1 z-index number less than the layer over top of that. Doing this causes it not to show, but if I make it equal or more, the background-color will go over-top of blue-home-text in the size of the wording for home-learn.
Does anyone see what I am doing wrong? To see this live may help. In a comment below, I will add the live site. You will see it right on page load, after the sequence completes.
<div class="red">
<div id="hand-wrap"><img src="/images/hand.png" class="hand" alt="HELLO"></div>
<span class="hand-text">HELLO</span>
<div class="circle">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
<div id="circle-text">We're Optimum
<br>Designs</div>
<div id="blue-home-text">We build beautiful, engaging sites for companies both large and small.</div>
<!-- <div id="text-button"><span class="border-span">More About Us</span></div> -->
<div id="home-learn">
<div id="curtain-div"></div>
Learn more...
</div>
</div>
.red {
background-color: #0085A1;
width: 100%;
height: 100vh;
position: relative;
text-align: center;
}
.hand {
width: auto;
height: auto;
position: absolute;
z-index: 100;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
top: 60%;
left: 50%;
-webkit-animation: wave 4s 1 normal forwards;
animation: wave 4s 1 normal forwards;
}
.hand-text {
position: absolute;
text-align: center;
left: 0;
right: 0;
top: 42%;
color: #FFF;
font-size: 2em;
font-weight: bold;
opacity: 0;
-webkit-animation: waveTxt 2s 0s 2 alternate;
animation: waveTxt 2s 0s 2 alternate;
}
.circle {
display: none;
z-index: 99;
width: 500px;
height: 500px;
position: absolute;
background: inherit;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 250px;
height: 250px;
position: absolute;
border: 5px solid #b5f2ff;
z-index: 10;
}
#circle-text {
display: none;
position: absolute;
color: #FFF;
font-size: 2.3em;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}
#blue-home-text {
color: #FFF;
display: none;
text-align: center;
position: absolute;
margin: 0 25%;
top: 50%;
font-size: 2.3em;
z-index: 99;
}
#home-learn {
color: #FFF;
position: absolute;
text-align: center;
/*margin: 0 25%;*/
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 2.3em;
z-index: 98;
}
After reviewing your code I believe the following CSS should help with the laying issue. This should avoid the curtain layer from showing on top of the blue-home-text.
#home-learn {
z-index: 99;
}
#blue-home-text {
z-index: 100;
}