I want to infinite Scroll Background image animate. How can I set it just go upwards continuously, not come back down? still, it gives a jerk.
How it is possible? Please help anyone know it.
I have a link:
http://herinshah.com/wp/fortiflex/5-2/
CSS:
.et_pb_section.landing-page .et_pb_column_3_5 {
background-color: #f6eb00;
margin-right: 1%;
padding: 0 10px;
height: 100vh;
background-image: url(images/ragazzi-logo.png);
background-position: 0 0;
background-size: cover;
-webkit-animation: upward 15s linear infinite;
animation: upward 15s linear infinite;
border-right: 4px solid #000;
display: block;
background-repeat: repeat-y;
}
#-webkit-keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
#keyframes upward {
to {
background-position: 0 0;
}
from {
background-position: 0 2174px;
}
}
You need to wrap a div inside a div. Here is the working fiddle for the same
HTML
<div class="main">
<div class="holder"></div>
</div>
CSS
*{
margin:0;
padding:0
}
.main {
height: 100vh;
overflow: hidden;
}
.holder {
height: 200vh;
-webkit-animation: upwards 2.5s linear infinite;
animation: upward 2.5s linear infinite;
background: url(http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png) center yellow;
background-size: 100% 50%;
}
#-webkit-keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
#keyframes upward {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
I felt so compelled to answer this because I've done something similar :before (pun intended) and your skipping animation was giving me cancer.
You're gonna need to mess around with the pseudo :after element and get the height right. This should get you started.
Also your image isn't cropped perfectly right, so fix that and you'll be good to go.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body onload="onloaded()">
<div class="foo_section">
<div class="foo_container">
<img class="foo_image" src="http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png" />
</div>
</div>
</body>
</html>
.foo_section {
width: 100vw;
height: 100vh;
position: fixed;
min-height: 400px;
}
.foo_container {
width: 100%;
position: relative;
animation: infiniteScrollBg 10s infinite linear;
}
.foo_container:after {
content: "";
height: 500%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: #f6eb00;
background-image: url('http://herinshah.com/wp/fortiflex/wp-content/themes/Divi/images/ragazzi-logo.png');
background-size: 100% 20%;
}
.foo_image {
width: 100%;
}
#-webkit-keyframes infiniteScrollBg {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(-200%);
}
}
Codepen
I see you're using Elegant Themes too. <3 Divi builder
I suggest you to have two div tags with the same background. Then, animate the same div and play with positioning of the divs and animate to make it look continuously scrolling up.
.container{
width:600px;
height:400px;
background-color:yellow;
margin:0 auto;
position:relative;
overflow:hidden;
}
.bg{
width:100%;
height:400px;
background-repeat:no-repeat;
background-size:contain;
position:absolute;
bottom:0;
}
.bg.bg1{
transform: translate(0,0);
animation: upward 3s linear infinite;
}
.bg.bg2{
transform: translate(0,100%);
animation: upward2 3s linear infinite;
}
#keyframes upward {
to {
transform: translate(0,-100%);
}
from {
transform: translate(0, 0);
}
}
#keyframes upward2 {
to {
transform: translate(0,0);
}
from {
transform: translate(0,100%);
}
}
Here's how I would do it. my codepen.
Related
I have a div with a background image and I'm trying to change its scale infinitely.
I changed the background-size property in the animation but as you can see, there is some noise or vibration when animating. How would I remove it?
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
}
<div class="pre-loader"></div>
Consider a scale transformation to have a better rendring:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform:scale(1.1);
}
}
<div class="pre-loader"></div>
You are centering the background which means applying a background-position equal to 50%. The calculation of this value is related to the background-size so the position is changing slightly when the size is changing creating this bad effect:
If you consider a position using pixel values you will not see this effect:
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
overflow:hidden;
}
.pre-loader:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') 50px 50px/50% auto no-repeat #fff;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
background-size:55%;
}
}
<div class="pre-loader"></div>
Use transform instead of background-size
.pre-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://upload.wikimedia.org/wikipedia/commons/a/ab/Android_O_Preview_Logo.png') center no-repeat #fff;
background-size: 50%;
animation: loading 5s ease-in-out infinite;
}
#keyframes loading {
50% {
transform: scale(1.2);
}
100% {
transform: initial;
}
}
<div class="pre-loader"></div>
There is nothing wrong with your code, the problems lays in the CSS. I think there is a performance issue in your animation with:
#keyframes loading {
0% {
background-size: 50%
}
50% {
background-size: 55%
}
100% {
background-size: 50%
}
The animation will relocate every single pixel from every image. So that will be a bit heavy for the browser to render I think.
Also your animation time with animation: loading 5s ease-in-out infinite; is a factor why its making noises. With the animation time of 5 seconds, it becomes clear that each pixel is reloaded.
If you change this time to 1s, you'll find that it runs smoother as the time between animations goes by faster.
But since the 5 seconds should persist, the simplest solution is to add the code snippets from #Félix or #TemaniAfif answer into your code which are really 2 great answers to your question.
I did the animation to rotate around a button, I do not know the tags so well, so I'll probably have many errors in my codes: '(
What annoys me today is that it is not rotating in IE11, I tested in Windows 7 and Windows 10, any browser opens normally, until Edge performs as programmed, except IE11,
The URL of the page in question is http://hb1virtual.com.br/Grafica/
Could someone tell me where I'm going wrong?
(there will be many errors, but this one especially, laughs)
HTML
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
<div class="menu">
<div class="marquee">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
CSS
There are some CSS mistakes in your animation code.
I try to add a new css code segment and try to apply it on your web page to make it work for IE 11.
Code:
<!doctype html>
<head>
<title></title>
<style>
.menu {
position: absolute;
left: 50%;
top: 50%;
width: 340px;
height: 340px;
margin-left:-170px;
margin-top:-170px;
}
.marquee{
display: block;
position: fixed;
overflow: hidden;
width: 340px;
height: 340px;
animation: scroll 10s linear infinite;
-webkit-animation:spin 20s linear infinite;
-moz-animation:spin 20s linear infinite;
animation:spin 20s linear infinite;
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
#keyframes spin { 100% {-webkit-transform:rotate(-360deg);-webkit-transform:rotate(-360deg); } }
.marquee:hover {
animation-play-state: paused;
}
.menuse {
position: fixed;
background: url('../images/botaoprincipal01.png') no-repeat;
}
.menuse:hover {
background: url('../images/botaoprincipal01hover.png') no-repeat;
}
.menusd {
position: fixed;
margin-left: 170px;
background: url('../images/botaoprincipal02.png') no-repeat;
}
.menusd:hover {
background: url('../images/botaoprincipal02hover.png') no-repeat;
}
.menuie {
margin-top: 170px;
position: fixed;
background: url('../images/botaoprincipal03.png') no-repeat;
}
.menuie:hover {
background: url('../images/botaoprincipal03hover.png') no-repeat;
}
.menuid {
position: fixed;
margin-top: 170px;
margin-left: 170px;
background: url('../images/botaoprincipal04.png') no-repeat;
}
.menuid:hover {
background: url('../images/botaoprincipal04hover.png') no-repeat;
}
.menulogo {
float: none;
position: fixed;
width: 224px;
height: 224px;
margin-top: 59px;
margin-left: 61px;
border-radius: 50%;
background: url('../images/logosombra.png') no-repeat;
}
.clockwise {
-webkit-animation: clockwiseSpin 10s infinite linear;
animation: clockwiseSpin 10s infinite linear;
}
#-webkit-keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}#keyframes clockwiseSpin {
0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class="menu">
<div class="clockwise">
<div class="menuse"><img src="images/botton.png"></div>
<div class="menusd"><img src="images/botton.png"></div>
<div class="menuie"><img src="images/botton.png"></div>
<div class="menuid"><img src="images/botton.png"></div>
</div>
</body>
</html>
Output in IE 11:
Further, you can try to check the code and try to modify it in your site.
You can refer the example below.
JS Fiddle Example
First, you should change your Title from Portuguese to English.
Second, You can always inject code into your html, blocking IE users from seeing your website, redirecting them to download another browser.
Nobody uses IE anyway... It's not solving the problem, it's avoiding the question, but it's a solution.
Cheers
Here is my project I'm working on: http://i385549.hera.fhict.nl/auto.html.
So after every 5 seconds, the road just pops back to its starting point. But that results in an ugly "glitch". It would like that it just goes smooth the whole time. How do I fix this?
#banner{
width: 100%;
height: 300px;
margin-top: 34%;
background: url(../img2/road.jpg) repeat-x;
animation: animate-background linear 5s infinite;
}
#keyframes animate-background {
from { background-position: 0%; }
to { background-position: 100%; }
}
Thanks in advance!
you can change your animation
#banner{
width: 100%;
height: 300px;
margin-top: 34%;
background: url(../img2/road.jpg) repeat-x;
animation: animate-background linear 5s infinite;
}
#keyframes animate-background {
0% { background-position: 0%; }
50% { background-position: 100%; }
100% { background-position: 0%; }
}
I've got this sample sprite grid sheet that I need to run through and animate. I am able to reach a certain point but struggling to make it perfect. The animation is not that smooth and additionally, the image is not aligned properly. During the animation, you can see image elements not centered with other elements in the view. Here is my HTML and CSS3 code so far.
.hi {
width: 910px;
height: 340px;
background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
position: relative;
-webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) infinite;
}
#-webkit-keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 100%; }
}
#-webkit-keyframes playh {
0% { background-position-x: 0px; }
100% { background-position-x: 100%; }
}
<div class="hi">
</div>
Fiddle: http://jsfiddle.net/bf5ckdv9/
I have added a background dimension style, and rearranged some of your properties
the result is almost ok; but your sprite grid seems to be out of order
.hi {
width: 910px;
height: 340px;
background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
position: relative;
animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite;
border: solid 1px blue;
background-size: 500% 500%;
background-repeat: no-repeat;
}
#keyframes playv {
0% { background-position-y: 0px; }
100% { background-position-y: 125%; }
}
#keyframes playh {
0% { background-position-x: 0%; }
100% { background-position-x: 125%; }
}
<div class="hi">
</div>
I'm trying to do css3 animation with sprite sheet for different sizes. Full image size is working fine but it's not working as expected for other sizes(in my case half of the image size). It's shifting.
Here is working code with actual image size
/* ----button------ */
.button {
width: 491px;
height: 451px;
background: url("http://i.imgur.com/vzEZHwu.png");
background-size: auto 100%;
}
.button:hover{
animation: play 3s steps(10) infinite;
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -4960px; }
}
So, now i tried with half of the image size(4960/2= 2480) with below code
(not only half of the image size, need different size. I tried half of the image size)
/* button1 */
.button1 {
width: 250px;
height: 225px;
background: url("http://i.imgur.com/vzEZHwu.png");
/* background-size: 2480px auto; */ ---this one works
background-size: auto 100%; ----here is the problem, image is shifting
}
.button1:hover{
animation: play1 3s steps(10) infinite;
}
#keyframes play1 {
from { background-position: 0px; }
to { background-position: -2480px; }
}
Also, can I use everything as percentage value so that it will work as responsive. I tried background-position: -4960px; into background-position: 100% 0; but unsuccessful.
Here is jsfiddle
This should work. Completely responsive:
.button {
width: 25%;
background: url("http://i.imgur.com/vzEZHwu.png");
background-size: 1000% auto;
}
.button:before {
content: "";
display: block;
padding-top: 90%;
}
.button:hover{
animation: play 3s steps(10) infinite;
}
#keyframes play {
from { background-position: 0% 0; }
to { background-position: -1000% 0; }
}
<div class="button">
<a href="#" class="spriteBtn" ></a>
</div>
Duplicate your image and half the size.
Remove background-size from the button1 class.
HTML:
<div class="button">
<a href="#" class="spriteBtn" ></a>
</div>
<br/>
<div class="button1">
<a href="#" class="spriteBtn2" ></a>
</div>
CSS:
/* ----button------ */
.button {
width: 491px;
height: 451px;
background: url("http://i.imgur.com/vzEZHwu.png");
background-size: auto 100%;
}
.button:hover{
animation: play 3s steps(10) infinite;
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -4960px; }
}
/* button1 */
.button1 {
width: 250px;
height: 225px;
background: url("http://s21.postimg.org/66xjk6391/vz_EZHwu.png");
/* background-size: 2480px auto; */
}
.button1:hover{
animation: play1 3s steps(10) infinite;
}
#keyframes play1 {
from { background-position: 0px; }
to { background-position: -2480px; }
}
JSFiddle