I am trying to create a different loading animation (revealing content). I managed to get it to work pretty well on the desktop, but it doesn't want to work well on mobiles. On a mobile it will jerk or when it does catch up the animation has completed.
The animation is just 2 divs like this:
<div id="loader-wrapper">
<div class="loader-background"></div>
</div>
And the CSS is like this:
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader-wrapper .loader-background {
position: fixed;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
background-color: #000000;
}
#loader-wrapper .loader-background::after {
content: "";
position: absolute;
border-radius: 100%;
top: -750px;
right: 0;
width: 2000px;
height: 2000px;
box-shadow: 0 0 0 20000px #000000;
transition: all 3s;
transform: scale(0.1);
opacity: 1;
/* Start off-screen */
}
.loaded #loader-wrapper {
visibility: hidden;
}
.loaded #loader-wrapper .loader-background::after {
transform: scale(1);
opacity: 0;
}
I have created this on code pen so you can see it in action:
https://codepen.io/r3plica/pen/rwLagV
Does anyone know of a way I can get this working without having the jerking motion?
Related
I am working a project on my favorite science stories animated using HTML. While I was working on it By just changing the position to fixed or nothing position of all my objects was changing. If you remove the position property from #Guy, you will notice that the image of Galileo will shift drastically. I just want to know why this happens.
:root {
--initX: 280px;
--initY: 70px;
--finalY: 600px;
}
body {
background-color: aqua;
padding: 0px;
margin: 0px;
}
#Guy {
z-index: 4;
height: 200px;
position: fixed;
width: auto;
transform: translate(800px, 450px);
}
#Galilo {
height: 50px;
width: auto;
z-index: -1;
transform: translate(290px, 5px) rotateZ(4deg);
}
#tower {
height: 650px;
width: 150px;
z-index: 0;
transform: translate(250px, 50px) rotateZ(4deg);
position: absolute;
background-color: grey;
}
#Lball {
height: 40px;
width: 40px;
z-index: 2;
border-radius: 50%;
transform: translate(var( --initX), var(--initY));
background-color: blue;
position: absolute;
animation: lite 2s linear 1s infinite forwards;
}
#Hball {
height: 50px;
width: 50px;
z-index: 3;
transform: translate(calc(var( --initX) + 75px), var(--initY));
border-radius: 50%;
background-color: red;
position: absolute;
animation: heavy 2s linear 1s infinite forwards;
}
#floor {
height: 25%;
width: 100%;
background-color: green;
position: absolute;
z-index: -1;
transform: translate(0px, 565px);
}
#hide {
height: 12%;
width: 100%;
background-color: green;
position: absolute;
z-index: 1;
transform: translate(0px, 650px);
}
#keyframes lite {
0% {
transform: translate(var( --initX), var(--initY))
}
90% {
transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
}
100% {
transform: translate(var(--initX), calc(var(--finalY) + 12.5px))
}
}
#keyframes heavy {
0% {
transform: translate(calc(var( --initX) + 75px), var(--initY))
}
90% {
transform: translate(calc(var( --initX) + 75px), var(--finalY))
}
100% {
transform: translate(calc(var( --initX) + 75px), var(--finalY))
}
}
<div id="tower"></div>
<div id="Hball"></div>
<div id="Lball"></div>
<div id="floor"></div>
<div id="hide"></div>
<img src="stick fidure.png" alt="Dude thinking" id="Guy">
<img src="galileo-galilei.png" alt="gallilo" id="Galilo">
P.S.
The link for the image of Galileo is https://cdn.images.express.co.uk/img/dynamic/109/590x/galileo-galilei-819977.jpg and the stick figure was made in Paint 3D
position: fixed takes the element out of the document flow and places it in relation to the viewport/window. Usually that also causes this element to overlap other elements. The other elements however will be rearranged in a way like the fixed element wouldn't be there (it's not in the document flow). So adding/removing position: fixed to/from an element will have all these effects on the overall document.
Once I go on the element which holds screen-transition class,
the following code just turns the background color from transparent
to green through hover:
.screen-transition{
position: relative;
display: block !important;
background-color: transparent;
z-index: 1;
}
.screen-transition::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
z-index: -1;
transition: 1s;
opacity: 0;
}
.screen-transition:hover::before {
opacity: 1;
}
and now I just want to replace hover with sth else so that background color turns to green when the page is loaded
any workaround please?
Try setting the body of the page in the css file?
body {
background-color: green;
}
js code
document.body.onload=function ()
{
setTimeout(function()
{document.body.classList.add('animation_class')},1000);
}
CSS code
. animatin_class
{
background-color:green ! important;
}
body
{
background-color:red;
transition:all .4s;
}
If you want this fadeIn to happen on page Load, simply define a keyframe and add the animation to before class. Let me know if this works
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.screen-transition{
position: relative;
display: block !important;
background-color: transparent;
z-index: 1;
width: 100vw;
height: 100px;
}
.screen-transition::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
z-index: -1;
transition: 1s;
animation: fadeIn 2s;
}
I am trying to do something that's fairly straightforward and I've been looking through many examples but can't seem to get this to work as I expect. What I am trying to do if have an image that on hover will scale(1.1) and then add a background-color also. As you can see I have no problem with selecting the image within the image-holder that I created and scaling this on hover but then when I try to add the overlay to this and get that to add on hover it doesn't work. I attached the code below
<div class="image-holder">
<img src="https://cdn2.artbees.net/jupiter5/orthosie/wp-content/uploads/sites/51/bfi_thumb/portfolio-feature-07-msnw0wxnyitxdmhlcfsb7elky0xl4drzq8bc37266o.jpg" width="300" height="200">
<div class="image-overlay"></div>
</div>
.image-holder {
position: relative;
max-width: 33.333%;
float: left;
overflow: hidden;
}
.image-holder img {
width: 100%;
vertical-align: top;
transition: all 0.5s;
z-index: 2;
}
.image-holder:hover img {
transform: scale(1.1);
}
.image-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.9);
opacity: 0;
z-index: 5;
}
.image-overlay:hover > img {
opacity: 1;
}
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);
}
}
Please see the code in the code pen in this link.
I wasted two or three hours on this and decided to not to waste anymore.
I already tried the code right here and it is not working.
.coin {
background-image: url("http://coins.thefuntimesguide.com/images/blogs/presidential-dollar-coin-reverse-statue-of-liberty-public-domain.png");
background-size: 100% 100%;
border-radius: 100%;
height: 100px;
margin: 50px auto;
position: relative;
width: 100px;
-webkit-transition: .5s linear;
-webkit-transform-style: preserve-3d;
}
.coin:after {
background-color: #a37131;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 45px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
-webkit-transform: rotateY(-90deg);
-webkit-transform-origin: 100% 50%;
}
.coin:before {
background-color: #a37131;
background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 100px;
left: 0;
position: absolute;
top: 0;
width: 100px;
-webkit-transform: translateZ(-5px);
}
.coin:hover {
-webkit-transform: rotateY(90deg);
}
All I want to know is how to apply thickness to the door visible to a user.
You need to add -webkit-transform-style: preserve-3d; to 'div.thumb' element.