In search of the perfect visual effect, I am eager to develop an infinite animation featuring a car moving horizontally with various landscape layers passing by in SVG format.
Struggling to find a way to seamlessly repeat my SVG landscape layers along the X-axis during the animation playback, leaving me in quandary for a suitable solution.
The animation currently relies on CSS keyframes and translateX, although uncertainties linger about whether this method is truly optimal.
One interesting approach is to replicate the background to create a seamless loop effect. While this may not be the most efficient solution, it's a technique that I have personally found effective in the past.
To begin, we'll duplicate the background SVG with identical properties and refer to it as #back instead of #front.
keyframes frontScroll {
from {transform: translateX(0);}
to {transform: translateX(100%);}
}
keyframes backScroll {
from {transform: translateX(-100%);}
to {transform: translateX(0%);}
}
Next, we define an animation with the same properties as the original one, but it moves from -100% to 0%, while the original animation goes from 0% to 100%.
By combining these elements, here's what happens:
body {
margin : 0;
overflow : hidden;
}
#front {
position : absolute;
left :0;
right:0;
bottom:0;
z-index : 9;
-webkit-animation: frontScroll 2.5s linear infinite;
animation: frontScroll 2.5s linear infinite;
}
#back {
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 9
-webkit-animation: backScroll 2.5s linear infinite;
animation: backScroll 2.5s linear infinite;
}
keyframes frontScroll {
from {transform: translateX(0); }
to {transform: translateX(100%); }
}
@-webkit-keyframes frontScroll {
from {transform: translateX(0); }
to {transform: translateX(100%); }
}
keyframes backScroll {
from {transform: translateX(-100%); }
to {transform: translateX(0%); }
}
@-webkit-keyframes backScroll {
from {transform: translateX(-100%); }
to {transform: translateX(0%); }
}<div id="back">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
<g id="XMLID_173_">
<g id="XMLID_193_">
<g id="XMLID_202_">
... (SVG paths content)
</g>
</g>
</g>
</svg>
</div>
<div id="front">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1200 313.9" xml:space="preserve">
<style type="text/css">
.st0{fill:#602700;}
</style>
<g id="XMLID_171_">
<g id="XMLID_173_">
<g id="XMLID_193_">
<g id="XMLID_202_">
... (SVG paths content)
</g>
</g>
</g>
</g>
</svg>
</div>By overlaying a moving car or similar object on top of the road, you can achieve the illusion of an endless driving scene.
When a page is loaded over HTTPS but the resources are served from an HTTP website, Chrome will display an "insecure content" warning. Is there a way to detect when Chrome has blocked insecure content and if the user has allowed it? There is a shield icon ...
I am facing an issue with an API that I need to integrate. The API provides JSON data, but as it involves a cross domain AJAX call, I have to utilize jsonp. $.ajax({ type: "GET", url: url + query, ...
How can I check which radio button list is clicked and then send a jQuery ajax call for the clicked item? Currently, I have tables with the IDs plan1, plan2, plan3 generated using PHP. Each table has a radio button list. Using jQuery each, how can I achiev ...
Here is the initial JSON data I have: { "fullName": "abc", "age": 19, ... } I am looking to utilize Node.js in order to add elements from the above JSON to an object called Variables within the following JSON: { &q ...
Is there a way to have separate click events for the button and the ListItem? My focus is on the button click event only, without triggering the ListItem event. Live DEMO import React from "react"; import ReactDOM from "react-dom"; import ListItem from ...
I've been struggling to position these items on the modal and could use some advice. I'm aiming to include the item counter as text and stars below it, with the unassigned text at the bottom. Despite trying various layouts, I can't seem to g ...
Exploring the world of MVC and Ajax, I am attempting to generate an Ajax query that will display one of three messages (High risk, Medium Risk, and No Risk) in a div when an integer is inputted. Here's my JSON method: public JsonResult warningsIOPL ...
I have a system that takes input in the form of lines of text stored as an array, for example: array[123,556,"test",0,0]. By using val().split('\n'), I am able to add each new line to the array so that each line index is incremented by 1. He ...
With a need to call multiple processes in series using synchronous AJAX calls, I aim to display the status of each long-running process upon completion before proceeding to the next. Below is an excerpt from the code that illustrates this concept: var co ...
I am utilizing D3 version 4 to process data and create a graph based on dates. Although I have successfully adjusted everything to be compatible with zoom functionality, I am struggling to prevent the line from extending beyond the chart axes. I would pre ...
I am working with a react element that I need to hide when a button is clicked. The styles for the element are set in the constructor like this: constructor(props) { super(props); this.state = { display: 'block' }; this. ...
Encountering an error while trying to install create-react-app using npx. Seeking assistance on resolving this issue. My Node.js version is v16.14.2 and npm version is 8.5.0 Installing packages. This may take a few minutes. Installing react, react-dom, a ...
I am looking to create a search bar that resembles the one on . I have managed to make a floating search box on top of my background image. However, I am unsure how to align various input fields and buttons side by side. Below is the current CSS code I am ...
When using the state hook in my code, I have: const [features, setFeatures] = useState([]) const [medicalProblem, setMedicalProblem] = useState([]) The medicalProblem variable will be initially populated with a response from an API call: useEf ...
Encountering an issue while implementing Dijkstra's algorithm on a multigraph. The graph consists of nodes representing stops with information and connections to other stops (edges). However, the challenge arises when there are multiple bus options be ...
I'm currently working on a project where I am using the useEffect hook to retrieve initial data from a database and set it as the initial value of a Material-UI TextField upon loading the page. Although this approach works most of the time, there are ...
Struggling with configuring RegEx's. Seeking guidance to create a RegEx with the following criteria: Only allow numbers (0-9) Allow a period (.), negative sign (-), plus sign (+), dollar sign ($), and comma (,) Do not permit any alphabetic characte ...
How can I arrange divs with varying heights to be positioned close together, regardless of their height, and with a specific margin similar to buildings? I am aiming for a layout like the one on this website . I tried using float:left but it only float ...
I utilize Inversify for object binding in the following manner: container.applyMiddleware(loggerMiddleware); let module = new ContainerModule((bind: interfaces.Bind) => { bind<Logger>(TYPES.Logger).toConstantValue(logger); bind<ILogger ...
Currently, I am attempting to fetch the value of a field form that is being sent to a subroute and utilize it to update a database collection. My ability to retrieve the form value and manipulate it is working fine; however, I encounter an issue when I sol ...