Continuous background image motion descending from the top

Can anyone help me modify this JavaScript code so that the background image moves from top to bottom instead of left to right?

<script>
    $(function(){
        var y = 0;
        setInterval(function(){
            y+=1;
            $('body').css('background-position', '0 ' + y + 'px');
        }, 10);
    })
</script>

body {
    background-image: url('img/bg-body.jpg');
    background-repeat: repeat-x;
    background-size: 100% 100%;
}

Appreciate any assistance! P.S.: Found the original code snippet here: enter link description here

javascripthtmlcssbackground

Answer №1

Try it Out: http://jsfiddle.net/9b3sk86c/show

Snippet: 

$(function(){
        var y = 0;
        setInterval(function(){
            $('body').css('background-position','0'+--y + 'px');
        }, 10);
})

Insight:

Modify the css attribute `repeat-y', set x to 0 in jquery code to avoid animating y, and update x to a variable.

Answer №2

Modify x + 'px 0' to '0 ' + x + 'px'

Remember, when dealing with CSS properties for positioning elements, the first value represents the horizontal position (x) and the second value represents the vertical position (y).

Answer №3

It's quite straightforward. What determines the position? You may observe that x is decreased with each iteration. To reverse this, simply increase it:

<script>
$(function(){
    var x = 0;
    setInterval(function(){
        x+=1;
        $('body').css('background-position', x + 'px 0');
    }, 10);
})
</script>

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

Challenges with arrays that occur asynchronously

At the end of this code snippet where console.log(authors) is called, I noticed that the array seems to be constantly overwriting itself. Typically, in a loop like this, the async part should be outside the loop. To solve the issue of getting an array full ...

javascriptarraysnode.jsasynchronous

Struggling with applying mixins

Is it possible to select only the top border using this mixin? Currently, I only need a top border but would like to have the option to use others in the future. Using separate mixins for each side of the border seems inefficient. .bordered(@top-width: 1 ...

csslessmixins

Centering the date vertically in JQuery Datepicker

I'm currently customizing the appearance of the jQuery datepicker, but I'm facing difficulty in aligning the dates vertically at the center. Here's the progress I've made so far: https://jsfiddle.net/L4vrkpmc/1/ Since the datepicker i ...

javascriptjqueryhtmlcssdatepicker

When Buttons Decide to Take a Break: A Guide to What Happens After You Click Them

Looking for some assistance with my code! I have a set of two buttons and when the user clicks on either one, it triggers a function (which is working perfectly). However, if the user clicks again on the same button, I want it to do nothing. Here is my HT ...

javascriptjqueryhtml

The issue arises when trying to apply CSS and minified JavaScript after adding new data in jQuery Mobile

I am having an issue with adding data and displaying it on a list. The problem arises when I add data through AJAX. In the success function, after showing the alert "successfully added", I used location.reload(), which takes me to the homepage (div tag dat ...

jqueryhtmlcssajax

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

My task involves creating a quiz application where I need to show the answers along with images of the choices stored in my JSON data. However, I encounter an error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I attempt ...

javascripthtmljson

I'm attempting to render HTML emails in ReactJS

I have been attempting to display an HTML page in React JS, but I am not achieving the same appearance. Here is the code snippet I used in React JS: <div dangerouslySetInnerHTML={{ __html: data }}/> When executed in regular HTML, the page looks lik ...

javascripthtmlcssreactjs

Tips for incorporating unique styles to a component in ReactJS

Struggling to apply unique styles to a React Next.js component? Below is the code snippet for a button component: import styles from "./button.module.css"; const Button = props =>{ return( <div> <button className={styles.button}>{ ...

javascriptreactjsnext.jscomponents

Issues with Dreamweaver CS5's live preview feature and compatibility with different web browsers

Hey there, I recently sliced an image using Fireworks and exported it to HTML. After opening the HTML file in Dreamweaver, I saved it as PHP and everything seemed fine. Then, I replaced some images with HTML input tags and buttons, setting their width and ...

phphtmlcssdreamweaver

Jade and Node.JS experiencing issues with handling JQuery correctly

I must admit, debugging node.js is not my forte. I have some experience with different programming languages, but node.js is uncharted territory for me. On my Ubuntu 12.04 server, I'm facing issues while trying to install a managed package and struggl ...

javascriptjquerynode.jsexpress

Troubleshooting: AWS Lambda function fails to add item to DynamoDB table using put and putItem operations

Currently, I am exploring the use of Lambda functions to create a basic database API. The intention is to make direct calls to each Lambda function via its function URL. So far, I have successfully managed to retrieve a database item by its id using Lambd ...

javascriptnode.jsamazon-web-servicesaws-lambdaamazon-dynamodb

automating the styling of elements

Hey everyone, I have a specific element that I want to conditionally apply multiple styles to. Initially, I approached it like this: <Text style={[ discountCodeState === '' || !isActiveHandler(value) ? [ ...

javascriptcssreact-native

Tips on sending the event object as the second parameter to a callBack function

I am looking to enhance a callback function by including the execution of event.stopPropagation() on the specific div element where it is called, alongside updating the state. QueryInput represents a custom input div element for adding text provided by the ...

javascriptnode.jsreactjsreact-hooks

loop through the array of objects using ng-repeat in Angular

I am facing an issue where I need to display the data fetched from a service in my application. The service response is as follows: Object {resultado:array[2], mensaje: "4 personas `necesita tu ayuda"} Currently, the "resultado" field contains an object ...

javascriptangularjsjsonangularjs-ng-repeatfrontend

In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...

javascriptjqueryhtmlcsshtml5-video

What is the best way to horizontally align an image beneath a navigation menu that is built using <ul> tags?

Seeking a way to center an arrow graphic under the selected item in a simple CSS drop-down menu? Considering using the :after selector, but currently being used for drawing dividing lines between menu options: HTML: <ul> <li>Option Zero&l ...

jquerycssdrop-down-menu

The asynchronous Angular *ngIf directive with multiple conditions on the same level is not functioning as expected

I am currently in the process of refactoring my code <ng-container *ngIf='taskOutputs$ | async as taskOutputs && taskOutputs.outputs.length; else neverImportedOrLoading'> I encountered an issue with Unexpected token &&, exp ...

javascriptangulartypescript

Consistently encountering incorrect values during onClick events

I am using a Table to display certain values const [selected, setSelected] = React.useState<readonly number[]>([]); const isSelected = (id: number) => selected.indexOf(id) !== -1; return ( <TableContainer> <Table sx={{ width ...

javascriptreactjsmaterial-uifrontend

Tips for Sending Emails from an Ionic Application without Utilizing the Email Composer Plugin

I am attempting to send an email from my Ionic app by making an Ajax call to my PHP code that is hosted on my server. Below is the code for the Ajax call: $scope.forget = function(){ $http({ method: 'POST', url: 's ...

javascriptphpajax

Top method for triggering an action on the client-side during Sign In with the help of Redux, React, and NextAuth

Currently, I am developing a web application that utilizes the Spotify API. My goal is to seamlessly load the user's playlists as soon as they log in using NextAuth. At the moment, there is a button implemented to trigger playlist loading, but it onl ...

javascriptreactjsreduxnext.jsnext-auth