i'm recently experiencing an issue with white blocks appearing on the top/bottom of site whenever i scroll it a greater bit. The white blocks are part of body background, because changing body backgroundcolor makes blocks change color too.
I have already tried setting opacity for body but this gave no effect at all... Any ideas what could possibly be going wrong? Or maybe i just have too heavy transition/fade content so that rendering doesn't work smooth?
Here's the screenshot of the issue, pretty hard to catch on ss since it only happens for half sec when scrolling. The block is indicated by red arrows.
EDIT:
I'd actually post parts of my css file, maybe this would bright any clue:
html, body {
height: 100%;
position: static;
overflow-x:hidden;
-webkit-transform: translate3d(0, 0, 0);
background-color: rgba(255, 255, 255, 0.06);
transform: translate3d(0,0,0);
}
.heroEffects .bg {
-webkit-backface-visibility: hidden;
transform: scale(1);
-webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
-moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
transform: translate3d(0,0,0);
}
.bgimg {
-webkit-backface-visibility: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
background-repeat: no-repeat;
background-position: center center;
transform: scale(1);
overflow: hidden;
-webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
-moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url("../img/gallery/slonecz.jpg");
animation-name: backgroundchangeFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 15s;
animation-delay: 5s;
-webkit-animation-delay: 5s
-webkit-animation-name: backgroundchangeFadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 15s;
transform: translate3d(0,0,0);
}
#keyframes backgroundchangeFadeInOut {
0% {
background-image: url("../img/gallery/slonecz.jpg");
}
15% {
background-image: url("../img/gallery/slonecz.jpg");
}
30% {
background-image: url("../img/gallery/slonecz.jpg");
}
42% {
background-image: url("../img/gallery/slonecz.jpg");
}
50% {
background-image: url("../img/gallery/motyl.jpg");
}
68% {
background-image: url("../img/gallery/motyl.jpg");
}
80% {
background-image: url("../img/gallery/motyl.jpg");
}
95% {
background-image: url("../img/gallery/motyl.jpg");
}
100% {
background-image: url("../img/gallery/slonecz.jpg");
}
}
.heroEffects .shade {
opacity: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 3;
height: 100vh;
position: fixed;
width: 100%;
}
And here's Vimeo vid, the screen recorder seems to be on top and you can actually see what happens when the browser with this site is in the background... https://vimeo.com/198493320
In my case using overflow: hidden; on body worked.
body {
overflow: hidden;
}
this works for me on chrome 76.0.3809.87
overflow: auto;
hope it can help.
Related
I'm building a very simple bounce card animation, however at some point the animation got reseted and the result is not fluent.
Please check:
div{
width: 110px;
height: 50px;
background: #EEE;
border: 1px solid #BBB;
border-radius: 3px;
padding: 3px 5px;
font-family: sans-serif;
left: 200px;
position: absolute;
}
#keyframes cardBouncing {
20%, 60%, to {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
0%, 40%, 80% {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
}
div{
box-shadow: 3px 3px 10px grey;
animation: 1.5s cardBouncing infinite; //flipInX;
}
<div>HOla!</div>
How I can make it bouncing without that "jump"
This is for a drag animation, how can I center in the mouse cursor position? It seems like it go to much at the left. It's possible?
The solution is with: animation-direction: alternate-reverse;
div{
width: 110px;
height: 50px;
background: #EEE;
border: 1px solid #BBB;
border-radius: 3px;
padding: 3px 5px;
font-family: sans-serif;
position: absolute;
left: 180px;
}
#keyframes cardBouncing {
from {
transform: rotate3d(0, 0, 1, 60deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
to {
transform: rotate3d(0, 0, 1, 80deg);
transform-origin: top left;
animation-timing-function: ease-in-out;
}
}
div{
box-shadow: 3px 3px 10px grey;
animation: 0.4s cardBouncing infinite;
animation-direction: alternate-reverse;
}
<div> Hola! </div>
In firefox pseudo elements are behind the div (this is what I wanted to achieve) but in chrome they are on top. Is this a bug in chrome? Anyone knows how to fix this? Adding z-index to the div didn't help me to solve this problem.
I've also tried to apply some styles to div:hover but then when I hover over the div element it falls behind pseudo elements (in Firefox, in Chrome pseudo elements are already on top).
Demo on codepen https://codepen.io/mariuszdaniel/pen/rzdyRV?editors=1100
#keyframes spin {
from {
transform: rotate(0turn)
translateY(-100%) translateY(50%)
rotate(1turn)
}
to {
transform: rotate(1turn)
translateY(-100%) translateY(50%)
rotate(0turn);
}
}
#keyframes spin-rev {
from {
transform: rotate(1turn)
translateY(-100%) translateY(50%)
rotate(0turn)
}
to {
transform: rotate(0turn)
translateY(-100%) translateY(50%)
rotate(1turn);
}
}
#keyframes glow {
from {
filter: blur(100px);
opacity: 0.8
}
to {
filter: blur(200px);
opacity: 0.4;
}
}
.path {
width:300px;
height: 300px;
padding: 20px;
margin: 100px auto;
border-radius: 50%;
background-image: url(https://unsplash.it/300);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
transition: transform 0.5s, box-shadow 0.5s;
}
.path:hover {
transform: scale(1.25);
box-shadow: 0 0 50px 0 #3333;
}
.path::before, .path::after {
content: "";
position:aboslute;
display: block;
width: 75%;
height: 75%;
margin: 25% auto 0;
border-radius: 50%;
/*filter: blur(100px); */
/*opacity: 0.5;*/
}
.path::before {
/*mix-blend-mode: hue;*/
z-index: -200;
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
animation: spin 9s infinite /*alternate*/ linear, glow 3s infinite alternate linear;
}
.path::after {
margin-top: -100%;
z-index: -100;
background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);
animation: spin-rev 6s infinite /*alternate-reverse*/ linear, glow 6s infinite alternate linear;
}
<div class="path"></div>
I've created this snippet on Codepen: the earth rotates and the car moves. However, when car moves it makes the earth rotate too. I want all elements to go their own path.
Why does the car affect the earth, and how can that be avoided?
body {
background: url(https://news.vanderbilt.edu/files/NASA_SMBH1.jpg);
background-size: 1000px;
}
#firstimg {
background-image: url(http://www.21tech.ir/dfxhfgh.gif);
position: absolute;
background-repeat: no-repeat;
background-size: 100px;
animation: anim1 14s infinite linear;
margin: 40px;
}
#earth {
margin-left: 100px;
width: 500px;
height: 500px;
background: url(http://www.drodd.com/images14/map-of-earth1.jpg);
border-radius: 50%;
background-size: 1000px;
box-shadow: inset 16px 0 40px 6px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
animation-name: rotate;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
filter: brightness(50%);
}
#keyframes rotate {
from {
background-position-x: 0px;
}
to {
background-position-x: 1000px;
}
}
#keyframes anim1 {
0%,
100% {
transform: translate(0, 0) rotate(0deg)
}
50% {
transform: translate(20px, 20px) rotate(10deg)
}
}
<div id="firstimg">
<div>
<div id="earth"></div>
You have not closed you firstimg div tag, hence it runs under a single div
<div id="firstimg"></div>
<div id="earth"></div>
Follow Codepen
The following animation is run over three different elements.
How could I randomize the animation such that they occur at different times?
#keyframes shine{
10% {
opacity: 1;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
transition-duration: 0.7s, 0.7s, 0.15s;
transition-timing-function: ease;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
transition-property: left, top, opacity;
}
}
http://jsfiddle.net/nqQc7/1186/
Also, there appears to be a delay between the animations. How can I speed up the duration between animations without increasing the speed of the transition itself?
I have tried adding more keyframes but it doesn't seem to increase the time between animations.
You can use different animation-delay and animation-duration values for each button like below:
/**
* Icon
*/
.icon {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
display: inline-block;
margin: 25px 0 25px 25px;
border-radius: 5px;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 50px;
font-size: 12px;
font-family: sans-serif;
}
.icon:nth-child(1) { background: cornflowerblue; }
.icon:nth-child(2) { background: salmon; }
.icon:nth-child(3) { background: gray; }
/**
* The "shine" element
*/
.icon:after {
animation: shine 1s ease-in-out alternate infinite;
animation-fill-mode: forwards;
content: "";
position: absolute;
top: -110%;
left: -210%;
width: 200%;
height: 200%;
transform: rotate(30deg);
background: rgba(255, 255, 255, 0.13);
background: linear-gradient(
to right,
rgba(255, 255, 255, 0.13) 0%,
rgba(255, 255, 255, 0.13) 77%,
rgba(255, 255, 255, 0.5) 92%,
rgba(255, 255, 255, 0.0) 100%
);
}
.icon:nth-child(1):after { animation-delay: .1s; }
.icon:nth-child(2):after { animation-delay: .3s; }
.icon:nth-child(3):after { animation-delay: .5s; }
/* Hover state - trigger effect */
/* Active state */
#keyframes shine{
60% {
top: -30%;
left: -30%;
}
100% {
opacity: 0;
top: -30%;
left: -30%;
}
}
let
it
shine
<!--
Forked by:
Nicolas Gallagher - http://jsfiddle.net/KbNq7/
Chris Coyier - http://jsfiddle.net/chriscoyier/hk6z9/1/
-->
I'm trying to created a continuous wobble animation on a div id, and its not working for me. Any help would be greatly appreciated.
This is my code:
.figure {
display: inline-block;
width: 200px;
height: 200px;
background: rgb(23, 147, 219);
padding: 40px;
box-shadow: inset -5px -15px rgba(0, 0, 0, .06);
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 50%;
animation: wobble 5s ease-in-out infinite;
transform-origin: center bottom;
transition: padding .3s, bottom .3s;
text-align: center;
}
#keyframes wobble {
33% {
transform: rotate(5deg);
}
66% {
transform: rotate(-5deg);
}
}
<div class="figure" ></div>
Actually it is working , but since it is a sphere you can't notice it rotating , remove border-radius to see it. Also use alternate to see better effect
animation:wobble 5s ease-in-out infinite alternate;
also use 0% to 100% animation for better result.