I have this 2D Highway background image
https://opengameart.org/sites/default/files/background-1_0.png
I'm working on a mobile game (with JS and CSS3) of racing cars,
and I want to make animation of this road to make an illusion of movement
Can someone please guide me what's the best practice for this case?
Currently I do something like that, but it's not smooth enough (especially in mobile browser) -
.main {
background-image: url(https://opengameart.org/sites/default/files/background-1_0.png);
background-repeat-x: no-repeat;
background-size: 103%;
background-repeat-y: repeat;
background-position-y: 27px;
animation: loopingRoad 0.1s infinite;
height: 100%;
width: 100%;
}
#keyframes loopingRoad {
100% {
background-position-y: 1000%;
}
0% {
background-position-y: 0%
}
}
Use
background-position: 0 0;
background-position: 0 -100000px;
as the keyFrame keys:
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.main {
background-image: url(https://opengameart.org/sites/default/files/background-1_0.png);
background-repeat-x: no-repeat;
background-size: 103%;
background-repeat-y: repeat;
background-position-y: 27px;
animation: loopingRoad 250s linear infinite;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
#keyframes loopingRoad {
from {
background-position: 0 0;
}
to {
background-position: 0 -100000px;
}
}
<div class="main" />
Create a container in which you set the aspect ratio that corresponds with the road image. This allows you to play with the width of the container while keeping the image in the right proportions.
For the image itself. Make it twice the height of the container. This allows you to transform the entire road 50% upwards. When starting the animation, the top half of the road is exposed. At the end of the animation the bottom half is exposed. Loop this proces to create the illusion.
The transform property animates very well as it doesn't ask the browser to repaint the entire page, but only the element that is transformed.
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
.view {
max-width: 840px;
max-height: 100%;
overflow: hidden;
}
.road {
aspect-ratio: 840 / 650; /* Dimensions of the road image */
overflow: hidden;
}
.road::before {
content: "";
display: block;
animation: loopRoad 1.5s infinite linear;
height: 200%; /* Twice the height */
background-size: auto 50%; /* Fit into 1 vertical half */
background-image: url(https://opengameart.org/sites/default/files/background-1_0.png);
background-repeat: repeat-y;
}
#keyframes loopRoad {
from {
transform: translate3d(0, 0%, 0);
}
to {
transform: translate3d(0, -50%, 0);
}
}
<div class="view">
<div class="road"></div>
</div>
Related
My preferred end goal is to have a performance friendly background that smoothly loops without jumping. All the resources that I have found online either are not very performance friendly or they only work with elements that have a set width.
Currently everything looks okay, but the background scales poorly on different screens, and will make large jumps occasionally. I assume the jumping is due to an error in the translation of the elements, but I haven't yet seen a good solution. Setting the width of the elements to 200% and translating them over -50% seems like a hacky solution, and I feel as if there should be a much better way of doing it.
I would prefer to find an all CSS solution, but if nothing else is feasible, resorting to JS is fine.
Fiddle: https://jsfiddle.net/r4fz0Lot/3/
Code:
* { box-sizing: border-box; }
html, body, #container { width: 100%; height: 100%; }
body { margin: 0; }
#container {
background-color: rgba(0, 0, 0, 0.9);
image-rendering: pixelated;
overflow: hidden;
position: fixed;
}
#stars {
background: url('https://i.imgur.com/Ym03Zkf.png') repeat 0 0;
animation: loop 25s linear infinite;
z-index: 1;
}
#mountains {
background: url('https://i.imgur.com/jfef1r3.png') repeat-x 0 bottom;
animation: loop 20s linear infinite;
z-index: 2;
}
#ground {
background: url('https://i.imgur.com/P13CzUo.png') repeat-x 0 bottom;
animation: loop 15s linear infinite;
z-index: 3;
}
#stars, #mountains, #ground {
width: 200%; height: 100%;
background-size: 30%;
bottom: 0; left: 0;
position: fixed;
}
#keyframes loop {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
<div id="container">
<div id="ground"></div>
<div id="mountains"></div>
<div id="stars"></div>
</div>
You set background-size to 30% so you need to translate some multiple of 30% to translate "one image unit"
* { box-sizing: border-box; }
html, body, #container { width: 100%; height: 100%; }
body { margin: 0; }
#container {
background-color: rgba(0, 0, 0, 0.9);
image-rendering: pixelated;
overflow: hidden;
position: fixed;
}
#stars {
background: url('https://i.imgur.com/Ym03Zkf.png') repeat 0 0;
animation: loop 8s linear infinite;
z-index: 1;
}
#mountains {
background: url('https://i.imgur.com/jfef1r3.png') repeat-x 0 bottom;
animation: loop 6s linear infinite;
z-index: 2;
}
#ground {
background: url('https://i.imgur.com/P13CzUo.png') repeat-x 0 bottom;
animation: loop 5s linear infinite;
z-index: 3;
}
#stars, #mountains, #ground {
width: 200%; height: 100%;
background-size: 30%;
bottom: 0; left: 0;
position: fixed;
}
#keyframes loop {
from { transform: translateX(0); }
to { transform: translateX(-30%); }
}
<div id="container">
<div id="ground"></div>
<div id="mountains"></div>
<div id="stars"></div>
</div>
I have tried a lot of different ways using animation keyframes. I cannot seem to be able to do it.
I basically want my background animate left to right and repeat, like a marquee but as my background.
It seems like the only solution for me is to make a gif for my background, but that is really time extensive for me.
to avoid jumps in the animation (once it reachs the end and start again) I would move the image with repeat-x to an exagerated amount of x coordenates like this:
html {
margin:0;padding:0; height:100%;
}
body {
height:100%;
background-image:url(https://i.imgur.com/aCDecXL.jpg);
background-size: auto 100%;
overflow:hidden;
background-repeat:repeat-x;
animation: scroll 700000s infinite linear;
}
#keyframes scroll {
from { background-position: 0%; }
to { background-position: 90000000%; }
}
Try this.
#animate-area {
width: 560px;
height: 400px;
background-image: url('http://labs.designoptimizer.net/snip/bg-clouds.png');
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 40s linear infinite;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
<div id="animate-area"></div>
Use animation keyframe to make it work
.background{
background: url(https://dummyimage.com/1500x700/);
width: 560px;
height: 400px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-size: cover;
animation: animation_back 2s linear infinite;
}
#keyframes animation_back {
from { background-position: 0 0; }
to { background-position: 200% 0; }
}
<div class="background">
</div>
css code
#intro {
position: relative;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
padding-top: 15.6rem;
overflow: hidden;
}
#intro > figure {
animation: imageAnimation 30s linear infinite 0s;
backface-visibility: hidden;
background-size: cover;
background-position: center center;
color: transparent;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
margin-left: 0px;
}
#intro > figure:nth-child(1){
background-image: url('../images/1.jpg');
}
#intro > figure:nth-child(2){
animation-delay: 6s;
background-image: url('../images/2.jpg');
}
#intro > figure:nth-child(3){
animation-delay: 12s;
background-image: url('../images/3.jpg');
}
html code:
<section id="intro">
<figure></figure>
<figure></figure>
<figure></figure>
</section>
In this code I am going to display background image one by one but here when background image fade out one by one after third image its display black background. So, How can I remove black color background I want to display only images using css.
Thank You
If there isn't reason avoid jQuery plugins, just try to use Slick carousel.
Take a look to "fade", it works great.
Im trying to layer 2 images 1 on top of the other and make them scroll infinitely using jQuery. I am able to make the images scroll and layer in CSS but the animation becomes very jerky. How could I create an infinite horizontal scroll on an image using jQuery and keep the animations smooth?
My code so far:
CSS:
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 100vw;
height: 100vw;
background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
animation: animatedBackground 135s linear infinite;
}
#animate-area2 {
width: 100vw;
height: 100vw;
background-image: url(http://oi67.tinypic.com/2niy905.jpg);
background-repeat: repeat-x;
position: relative;
animation: animatedBackground 80s linear infinite;
}
and HTML:
<div id="animate-area"></div>
<div id="animate-area2"></div>
JSFiddle
Check it out. Maybe you will like it.
https://jsfiddle.net/hnxnjzaq/3/
Basically just used translate instead of background-position.
#keyframes animatedBackground {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
Just adjust the speed as you wish.
Change your
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
to:
#keyframes animatedBackground {
from { background-position: -100% 0; }
to { background-position: 100% 0; }
}
The snippet:
body {
background-color: black;
}
#keyframes animatedBackground {
from { background-position: -100% 0; }
to { background-position: 100% 0; }
}
#animate-area {
width: 100vw;
height: 100vw;
background-image: url(http://oi64.tinypic.com/2r7ri29.jpg);
background-position: 0px 0px;
background-repeat: repeat-x;
position:absolute;z-index:-2;
animation: animatedBackground 135s linear infinite;
}
#animate-area2 {
width: 100vw;
height: 100vw;
background-image: url(http://oi67.tinypic.com/2niy905.jpg);
position:absolute;z-index:-1;
background-repeat: repeat-x;
position: relative;
animation: animatedBackground 80s linear infinite;
}
<div id="animate-area"></div>
<div id="animate-area2"></div>
Was goofing around with css3 animation
check it up http://codepen.io/rokki_balboa/pen/eNVEyq
<section>
<div></div>
<div></div>
</section>
Change
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
* {
margin: 0;
padding: 0;
}
html {
overflow: hidden;
}
body {
height: 100vh;
width: 100vw;
background-color: #000;
position: relative;
}
section {
width: 100%;
height: 100%;
position: relative;
perspective: 500px;
}
section:hover {
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
#keyframes cool {
0% {
transform: perspective(1000px) translateZ(0px);
}
45% {
transform: perspective(1000px) translateZ(-400px);
}
55% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn);
}
100% {
transform: perspective(1000px) translateZ(-400px) rotateY(.5turn) translateZ(-400px);
}
}
div {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
div:nth-child(1) {
background: url(http://i.imgur.com/dLBSLQu.jpg) top center no-repeat;
background-size: cover;
}
div:nth-child(2) {
background: url(http://i.imgur.com/uL0mXb6.jpg) top center no-repeat;
background-size: cover;
transform: rotateY(.5turn);
backface-visibility: hidden;
}
#trigger {
position: absolute;
bottom: 10px;
left: 10px;
color: #fff;
font-size: 14px;
}
.ghoster {
display: none;
}
As you can see it works when hovering section. But my goal is to trigger hovering on section when you click an anchor.
1. you click on change anchor
2. animation comes on section element
3. click again
4. animations comes again
I have no idea how to achieve such a result. Can you please help me.
p.s. It would be better if you do it on pure javascript.
CSS
<style>
section.activateHover
{
transform-style: preserve-3d;
animation: cool 5s ease-in-out forwards;
}
</style>
HTML
<section id="sectionToChange">
<div></div>
<div></div>
</section>
Change
Javascript
<script type="text/javascript">
var trigger = document.getElementById('trigger');
var sectionToChange = document.getElementById('sectionToChange');
trigger.onclick = function(e)
{
//toggle hover
sectionToChange.className = (sectionToChange.className == 'activateHover') ? '' : 'activateHover';
//restart animation
if(sectionToChange.className != 'activateHover')
{
sectionToChange.className = 'activateHover';
}
}
</script>