Unlimited highway CSS3 motion

I have come across a stunning 2D Highway background image that I plan to use for my mobile racing game project which involves JS and CSS3. The image can be found at this link.

My goal is to create an animation of the road in order to give players the illusion of movement. However, I am currently facing issues with the smoothness of the animation, particularly when viewed on mobile browsers.

Could anyone provide me with some guidance on the best practices for handling this type of scenario?

The current approach I am using involves the following code snippet:

.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%
    }
  }
javascripthtmlcsscss-animations

Answer №1

Utilize

background-position: 0 0;
background-position: 0 -100000px;

for 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" />

Answer №2

Set up a container with the appropriate aspect ratio for the road image to maintain proportions while adjusting the width of the container.

Make the image twice the height of the container to allow for a 50% upward transformation, revealing the top half at the start of the animation and the bottom half at the end, creating the illusion when looped.

The transform property is ideal for smooth animations as it only requires the browser to repaint the transformed element rather than the entire page.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing asynchronous validation in Angular 2

Recently started working with Angular 2 and encountered an issue while trying to validate an email address from the server This is the form structure I have implemented: this.userform = this._formbuilder.group({ email: ['', [Validators.requir ...

javascriptangulartypescript

How can I go about refreshing my mapbox gl source data?

Hey there, I'm encountering an issue when attempting to update my mapbox source on click. I currently have two sources (cells, heatmap), and I am trying to add a new source using this code snippet: this.map.addSource("points", { type: "geojson", ...

javascriptvue.jsfrontendmapboxrender

What is the method to dynamically modify the value of location.href using vanilla javascript?

I have a button that looks like this: <button type="button" class="play-now-button" onclick="location.href='www.yahoo.com'">Play Now</button> However, I want to change the location.href value using vanilla JavaScript. The code below ...

javascripthtmldebugging

Send a PHP array back to jQuery AJAX and dynamically populate a list using conditional statements

Looking to create a dynamic contact list that can be sorted using AJAX. When selecting one of the 3 menu options, a new list with updated information should be displayed. I've been doing some research but haven't come across useful information o ...

phpjavascriptjqueryajaxjson

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

htmlcssangularangularjsprimeng

Expanding the input focus to include the icon, allowing it to be clicked

Having trouble with my date picker component (v-date-picker) where I can't seem to get the icon, a Font Awesome Icon separate from the date-picker, to open the calendar on focus when clicked. I've attempted some solutions mentioned in this resour ...

csshtmlvue.jssass

The state in Reactjs is not displaying as expected

Check out my ReactJS todo app that I created. However, I am facing an issue with deleting todos. Currently, it always deletes the last todo item instead of the one I click on. For example, when trying to remove 'Buy socks', it actually deletes ...

javascriptreactjs

lengthy conditional statement in JavaScript

Is there a more efficient way to handle a long series of if-else statements in JavaScript? I'm not experienced enough with the language to optimize this code. Any suggestions or guidance would be greatly appreciated. $('#webform-component-primar ...

javascriptjqueryif-statementrefactoring

What is the best way to arrange the keys of a JavaScript object in a customized

I am struggling to find a way to custom sort a JavaScript object properly. For example, I have the following object: var test = { 'yellow': [], 'green': [], 'red': [], 'blue': [] } And an array with values ...

javascriptsortinghandlebars.jsjavascript-objects

The options object provided for Ignore Plugin initialization in Webpack 5.21.2 does not conform to the API schema, resulting in an error

Here is the setup of my webpack.config.js on a backend server running webpack version 5.21.1: /* eslint-disable */ const path = require('path'); const webpack = require('webpack'); module.exports = { target: 'node', modul ...

javascriptwebpackwebpack-dev-server

Using the IE method getelementbyid to target an object within the document

Is there a way to use getElementById to access an object that already exists in the document? I am specifically trying to target the element "test" which is nested within parentDiv1. While this code works in Firefox, it's not functioning properly ...

javascriptinternet-explorer

What is the best way to design a webpage that adapts to different screen heights instead of widths?

I'm in the process of designing a basic webpage for a game that will be embedded using an iframe. The game and text should always adjust to fit the height of your screen, so when the window is small, only the game is displayed. The game will be e ...

javascriptcssiframeresponsive-designmedia-queries

Achieving 10 touchdowns within a set of 5 plays during a football game

Receiving a page from an external site where I have no control. The table structure is as follows: <table><tbody> <!-- headers --> <tr><td></td> <td></td> <td></td> <td>< ...

javascriptjqueryhtml

Automatic popup updates when submitting a form in a Chrome extension

Looking to develop a chrome extension popup window that, when clicked, will present a form for users to input their name and college. The goal is to save this data in chrome storage and then replace the popup with a new window displaying a greeting message ...

javascripthtmlformsgoogle-chrome-extensionpopup

Having trouble with CSS messing up your gridview button display?

Oddly enough, whenever I place buttons inside a gridview, they end up looking very small (as shown in the image below), even though the gridview itself has no CSS applied to it. Is it possible that some other CSS is affecting the buttons? I have too much ...

asp.netcss

Beautiful Web Address Exclusively for .html Files

The other day I experimented with converting my html pages into clean urls using some [.htaccess] code: RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^([^\.]+)$ $1.html [NC,L] While this successfully worked for my html pages, it c ...

phphtml.htaccesspretty-urls

Dealing with 401 Errors: Navigating Redirects using Vue.js and

Currently, I am utilizing Vue.js along with axios in an attempt to create a generic API object as shown below: import router from './router' import auth from './auth' const axios = require('axios') export const API = axios.c ...

javascriptvue.jsaxiosvue-router

Trouble with Datatables when displaying data in input fields

I have been working on a project that involves using Datatables and encountered an issue with column export. The column displays successfully on the webpage but fails to display after using render as shown below: this._dataTable = this.$mainTable.DataTa ...

javascriptjquerydatatables

Use Node.js with Selenium and WebdriverIO to simulate the ENTER keypress action on

I have put in a lot of effort trying to find the solution before resorting to asking this question, but unfortunately I have not been successful. All I need to know is how to send special characters (such as the enter key and backspace) with Node.js using ...

javascriptnode.jsseleniumwebdriver-io

Learn the process of sending notifications upon clicking on an advertisement by a user

I'm currently working on a system that displays ads on mobile devices. Our clients have the option to use their own custom HTML code for their advertisements. We want to be able to track when a user clicks on these ads. I am considering wrapping the u ...

javascripthtmlajaxclickads