Is there a way to roll up the background image of the body?

body {
  background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
  animation: backdrop_roll linear 100s infinite;
}

.enemy-animation {
  position: relative;
  z-index: 1;
  animation-direction: alternate;
  animation-duration: 3s;
  animation-name: oscillate;
  animation-iteration-count: infinite;
}

#ship {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 90%;
  left: 50%;
  margin-left: -50px;
  background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png');
  z-index: 1;
}

@keyframes oscillate {
  from {
    left: 0%;
  }
  to {
    left: calc(100% - 200px);
  }
}

@keyframes backdrop_roll {}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script src="game.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Shooting Game</title>
</head>

<body>
  <div class="sky"></div>
  <img class="enemy-animation" src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship">
  <div id="ship"></div>
</body>

</html>

I am looking for a way to create the illusion of movement in the background sky image as if the ship is moving by using keyframe animations. I attempted this by adjusting the CSS properties on a div element successfully, but not on the body itself.

@keyframes backdrop_roll { from { top: -630px; } to { top: 0; } }
While the above code works for a div element, it does not have the desired effect when applied to the body. Any suggestions on how to achieve the moving background effect would be appreciated.

Answer №1

To achieve the desired effect, it is recommended to focus on adjusting the background-position property instead of using translate. This is because applying translate may affect the body element as a container for your page elements. Below is an example code snippet with an animation duration set to control how quickly the ship appears to move. Enjoy!

body {
    background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
    animation: backdrop_roll linear 15s infinite;
    background-position: bottom center;
}

/* .sky {
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
        width: 100%;
        opacity: 1;
        background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat;
        animation: backdrop_roll linear 100s infinite;
} */

.enemy-animation { 
    position: relative;
    z-index: 1;
    animation-direction: alternate;
    animation-duration: 3s;
    animation-name: oscillate;
    animation-iteration-count: infinite;
  }

  #ship {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 90%;
    left: 50%;
    margin-left: -50px;
    background: url('http://andreypokrovskiy.com/image_hosting/boredom/space-ship.png') ;
    z-index: 1;
}

  @keyframes oscillate {
    from {
      left: 0%;
    }
    
    to {
      left: calc(100% - 200px);
    }
  }

  @keyframes backdrop_roll { 
     to {
      background-position: center top;
     }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src="game.js"></script>
    <link rel="stylesheet" href="style.css">
    <title>Shooting Game</title>
</head>
<body>
    <div class="sky"></div>
    <img class="enemy-animation" src="ship1-concept-finished-smaller.png" width="200" alt="enemy spaceship">
    <div id="ship"></div>
</body>
</html>

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

The rotation transformation on the Z-axis occurs once the animation has finished

Currently, the rotation on the Z-axis is occurring after the animation, even though I am still in the early stages of creating an animated hand opening. The intention is for the fingers to only rotate on the X-axis to simulate a realistic hand opening moti ...

switching the image source by selecting different options from a dropdown menu and leveraging JavaScript

I have been attempting to change the src of an image using JavaScript's addEventListener, but for some reason it is not working. Here is an example to illustrate my issue: let bulbImage = $.querySelector(".bulb-image"); let turnOnOption = $.querySele ...

Creating a seamless integration of images and backgrounds using CSS

Can you help me find a way to blend the image with the background to eliminate the visible separation between them? Here is the link to the image: https://i.stack.imgur.com/VB9in.jpg ...

Tips for executing a Python function from JavaScript, receiving input from an HTML text box

Currently, I am facing an issue with passing input from an HTML text box to a JavaScript variable. Once the input is stored in the JavaScript variable, it needs to be passed to a Python function for execution. Can someone provide assistance with this pro ...

Is there a way to properly center this text vertically within the row?

The kids are like puzzle pieces. I've experimented with different classes like justify-content-center, align-items-center, and text-center, but no luck. All I want is for the text to be perfectly centered both vertically and horizontally within the ...

The effectiveness of the javascript widget is hindered by the absence of the meta viewport tag,

As I work on creating a widget to appear at the bottom of webpages, I've encountered a styling issue. The widget's display varies based on whether the webpage includes a specified meta viewport tag or not. <meta name="viewport" content="width ...

Set the div element to be horizontally aligned

Is there a way to make this display horizontally instead of vertically, from left to right rather than top to bottom? I attempted using display:flex but only the extra-text class is affected and not the outer div. https://i.stack.imgur.com/2DNoC.png .m ...

The sidebar vanishes when you move your cursor over the text contained within

My issue is that the side menu keeps closing when I hover over the text inside it. The "About" text functions correctly, but the other three don't seem to work as intended. Despite trying various solutions, I am unable to identify the root cause of th ...

Issues with table nesting functionality

I'm attempting to organize tables in a nested manner, instead of placing a table within each cell. My engineers have advised against simply styling the table to appear nested, and suggested that it would be more effective to wrap each header around th ...

Resize lowercase letters to fit the box model

Currently, I am in the process of enhancing the python word cloud library available here by adding an HTML export option alongside the existing image export feature. The main challenge I'm facing right now is related to how the underlying python imag ...

Apply a new class to all Radio buttons that were previously selected, as well as the currently

Struggling with a simple code here, trying to figure out how to add color (class) to the selected radio button and the previous ones. For example, if button No3 is selected, buttons 1, 2, and 3 should get a new color. Below is the basic code snippet: < ...

Strange behavior observed in fading slides using jQuery

I have been experimenting with jQuery to create a slide feature. However, I am encountering an issue where the next slide fades in before the previous one completely fades out when I click the next arrow. Does anyone know how to fix this problem? <ht ...

Rendering images in Next.js version 10

Just recently, Next.js version 10 was launched featuring the latest Image element, making it a great asset for websites that heavily rely on images! When I receive an HTML response from the server, it looks something like this: HTML = "<div> &l ...

What makes the transparent border colors on <tr> appear too dark?

For instance, take a look at this code: http://jsfiddle.net/WaJy7/ In my attempt to apply a semi-transparent border to every <tr> element, I've encountered an issue where the color of the border appears darker than intended for all rows except ...

Adding a PDF generated from an HTML div to an email using Java

I am looking for a solution to convert the contents of an HTML div tag into a PDF file while preserving its associated CSS. This is essential as I will be using Java on the back-end to send emails, and I need to attach the PDF with the CSS intact when send ...

Using jQuery to assign the value of a hidden element to data being posted

When using jQuery's post() method to call an ajax action that returns JSON data ({"Success": "true" } or {"Success": "false"}), the value of a hidden HTML element is supposed to be set to the Success value in the returned object. However, after settin ...

Can you explain the significance of polyfills in HTML5?

What exactly are polyfills in the context of HTML5? I've come across this term on multiple websites discussing HTML5, such as HTML5-Cross-Browser-Polyfills. Essentially, polyfills refer to tools like shims and fallbacks that help add HTML5 features ...

What is the best way to pass a bind value in an Angular function controller?

I am new to working with AngularJS and I'm trying to pass a model bind value into a function declared in the controller. However, when I try to access that value from the controller, it returns undefined. Here is the code snippet: HTML: <div> ...

When you click on the logo, it will automatically redirect you to a designated Bootstrap Tab and set that tab

After searching through numerous posts, I am still struggling to find a solution to my straightforward issue. My requirement is simple: when a user clicks on the brand (logo), it should not only redirect them to a specific tab but also make it appear as a ...

Unable to load the requested resource: net::ERR_FAILED

I am facing an issue while trying to write React code. When using Chrome, I encountered the following warning: Access to XMLHttpRequest at 'file:///D:/programe/code/Vscode/ReactDemo/HelloWorld/test.js' from origin 'null' has been block ...