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

Receiving a commitment from an Angular Resource

When working with $resource in Angular for CRUD operations, I'm encountering some confusion regarding the usage of different resource methods. From what I've observed, the "regular" methods like save() and get() appear to execute synchronously. ...

javascriptangularjspromiseangular-resource

Display radio options when clicked upon

I am in the process of creating a set of radio buttons that will be utilized for capturing values to generate a subscription/modal checkout. My current situation involves having the radio button options visible. However, I aim to achieve a functionality wh ...

javascripthtmlradio-button

Leverage jQuery/JS to divide a lone <ul> element into four distinct <ul> lists

I'm working with a dynamically generated single list (<ul>) that can have anywhere between 8 and 25 items (<li>'s). Here's an example of the HTML structure: <ul id="genList"> <li>one</li> <li>two</l ...

javascriptjquery

"Is it possible to selectively load only a few images on a website that contains numerous

My website displays numerous images hosted on a server. Each page contains a maximum of 100 images, each within its own div element. At any given moment, only one div is visible due to the CSS "display" property, while the others are hidden using display:n ...

javascripthtml

Nextjs exposes a bug in react-bootstrap's navbar component

After integrating react-bootstrap with nextjs, I encountered a strange issue with the NavBar component. The problem arises when I first load the navbar - everything appears as expected, https://i.stack.imgur.com/R9guE.png but upon refreshing the page, CS ...

cssreactjsnext.jsreact-bootstrap

What are the steps to creating a unique event within an AngularJs service?

In the midst of my AngularJs project, I find myself faced with a dilemma. I have a service designed to manage button events, but I want another service to handle these events indirectly without directly interacting with the buttons themselves. So, my goal ...

javascriptangularjseventscustom-events

PHP is experiencing issues when trying to insert data into the database

When I run a query in phpMyAdmin such as INSERT INTO table('نچجاعجان'); it appears correctly, but when I try to insert data through my PHP page, it displays in the field like this: ÙاننناÙنعن The col ...

phphtmlmysqlutf-8

ng-table Filtering with dropdown selection

Hello, I am currently working on creating a Ng-table with a select dropdown menu for filtering the results. Here is where I am at so far. 1) How can I remove one of the pagination options that appear after applying the filter? I only want to keep one pagi ...

javascripthtmlangularjsngtable

Managing object methods in ReactJS state

Currently, I am utilizing the Google Maps API and have the following piece of code implemented: class App extends React.Component { state = { polygon: null, }; checkPoly() { if (this.state. ...

javascriptreactjs

What is the best way to enforce a required selection from one of the toggle buttons in a React form?

Is there a way to require the user to click one of the toggle buttons in a react form? I need to display an error message if the user submits the form without selecting a button. I tried using the "required" attribute in the form but it didn't work. H ...

javascriptnode.jsreactjs

Transferring information to the specified link using AJAX and PHP

I'm having trouble sending data to a link that I click on. Whenever I try, I just end up with an undefined index error in my PHP file. <a href="output.php"> Click me </a> ('a').click(function(){ href = "output.php"; ...

javascriptphpajaxurl

Assistance needed in creating a MVC3 and Razor 2-level horizontal navigation menu

I am attempting to create a 2-level horizontal menu, similar to the one featured on the following site: TV.Com Despite searching on google, I am struggling to put it all together. Below is the sample code I am working with: <div id="divNav"> <u ...

cssasp.net-mvc-3razor

Converting a Javascript object to JSON format only once using AngularJS

Is it possible to convert a JavaScript object to JSON using angular.toJson only once in my code? Here is an example: $scope.task.tags = [{"id":22,"tag":"printer","created_at":"2016-03-15" }]; $scope.create = function(task) { tmp.tags = angular.toJson( ...

javascriptangularjsjson

Python Selenium: Strategies for Iteratively Waiting for a Clickable Element

My task involves downloading images from website pages using Python Selenium. I need to select the web elements of these images and click on them one by one: ... THUMBNAILS = browser.find_elements_by_xpath("//div[contains(@class, 'lg-thumb-item&a ...

pythonhtmlseleniumwebdriverwait

Whenever I work with NPM, node.js, and discord.js, I consistently encounter the error message stating "TypeError: Cannot read property 'setPresence' of null."

I'm developing a Discord bot with NPM and discord.js, but I keep encountering an error that says "TypeError: Cannot read property 'setPresence' of null". Here is my bot code: const Discord = require('discord.js'); const { prefix, ...

javascriptnode.js

SASS - centering timeline content vertically

I am a beginner in frontend development and I am currently using sass. I have created a custom timeline, but I need assistance in properly aligning the location with the year and timeline marker. Additionally, I would like to position the image description ...

htmlcsssass

Excessive notification events are currently causing a blockage in the Angular app

Currently, I am utilizing Angular 7 in combination with SignalR on the backend for push notifications. At certain times, an overwhelming amount of notifications flood in, causing my application to become completely unresponsive. The SignalR service compon ...

javascriptangularsignalr

What is the best way to implement dragging functionality for an image within a specific area?

Here's a snippet of the code I'm working with: link This is the HTML code: <div class="border"> <div id="i-choose"> <input type="file" name="file" id="file" class="inputfile"> <label for="file"& ...

htmlcssdrag-and-drop

Troubleshooting error handling in Node.js using Express and MongoDB

hey there, I'm new to Node.js and I'm working on creating a basic notes app using express and MongoDB. However, I'm encountering an issue when trying to update a note which displays "Cannot PUT" followed by the note's ID. Below is the ...

javascriptnode.jsmongodbexpressmongoose

In this guide, we will explore the process of designing unique styles for ng

What is the proper way to customize CSS for a specific element? &.ng-select-focused { &:not(.ng-select-opened) > .ng-select-container { border-color: $ng-select-highlight; box-shadow: $ng-select-box-shadow; } } The offi ...

cssangularsass