An easy tutorial on creating a captivating background animation that moves seamlessly from left to right and vice versa

My goal is to create a dynamic animation using jquery/javascript. I have an image that is 2000px wide and 200px tall, and I want to animate it from left to right, creating a panoramic view by scrolling back and forth continuously.

I attempted to implement the [script][1] I found online, but it only moves in one direction. What I am looking for is more of a Panning effect. Any suggestions or advice would be greatly appreciated. Thank you!

Here is the direct link to the code: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js/js/autoBackgroundScroll.js

;(function(){
$.fn.autoBackgroundScroll = function(options) {

    var opts = $.extend({}, $.fn.autoBackgroundScroll.defaults, options);
    var $backslider = $(this);


    var duration = opts.duration;
    var speed = opts.speed;
    var imageWidth = opts.imageWidth;
    var imageHeight = opts.imageHeight;
    var direction1 = opts.direction1;
    var direction2 = opts.direction2;


    var posX = 0;
    var posY = 0;

    // [...] (Remaining code omitted for brevity)

})(jQuery);

Code source: http://www.jqueryscript.net/animation/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js.html

Answer №1

I recommend utilizing CSS animation for this

.bg {
  background-image: url("https://dummyimage.com/1000x200/333/ccc.png");
  background-position-x: 50%;
  animation-delay: 0s;
  animation-duration: 10s;
  animation-name: panoramic;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  width: 444px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto; 
  border: 1px solid gold;
  will-change: background-position-x;
}

@keyframes panoramic {
  0% {
    background-position-x: 0%;
  }
  50% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 0%;
  }
}
<div class="bg"></div>

Answer №2

Here is a straightforward jQuery animation that sets the correct background-position values for both the x and y axes (I recommend utilizing CSS transitions for smoother animations):

$(document).ready(function() {
  slide();

  setInterval(function() {
    slide();
  }, 10000);
});

function slide() {
  $('body').css({
    'background-position': -2000 + $(window).width() + 'px 0'
  });

  setTimeout(function() {
    $('body').css({
      'background-position': '0 0'
    });
  }, 5000);
}
body {
  background: url('http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js/img/background.jpg') no-repeat left top transparent;
  transition: background-position 5000ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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

Attempting to modify background by manipulating the state in Reactjs

I'm currently working on an app that features various games. My goal is to allow users to click a button and have the game display on the screen, with the background color changing as well. I aim to utilize state to control the overall background of t ...

Challenges with resizing images in SVG using D3

I have an SVG image created using d3. I am facing an issue where the svg is extending beyond its parent div container. Here is the code snippet: <div id="test" style="{width: 500px; height:500px;}"> <svg></svg> </div> ...

Position a div element on top of Google Maps to create a floating

Currently working on a website and attempting to add shadows over Google Maps by using a <div> element for a shadow effect: Unfortunately, the desired effect is not being achieved. This is the current CSS code in use: html { height: 100% } body ...

What is the best way to confirm that a specific method was called on a JavaScript object using Selenium?

My goal is to use selenium to verify that a specific method (with parameters) was called on a JavaScript Object, similar to expectation mocking with JMockit but for Javascript and selenium. Unfortunately, the object I am dealing with is a heavily obfuscat ...

Tips on creating a unique d3js tree design

I am a beginner when it comes to d3js and javascript in general. My goal is to create an interactive IP administration overview using d3js by modeling json data. I know that the key tool for this job is likely d3.layout.tree, which will provide me with the ...

Pattern matching to exclude a subdirectory

I'm currently working on setting up automatic global registration. I'm encountering difficulty in finding a way to exclude a specific sub directory. Can someone provide an example of a regex pattern for excluding a particular directory? Unfortuna ...

Troubleshooting Problem with Uploading Multiple Files to Server Using PHP, MySQL, and

Recently, I completed building a simple website for uploading files to the server and storing their names in a database for search functionality. The site was created following a tutorial available at www.formget.com. However, I encountered an issue when ...

Encountering an Uncaught Error: MyModule type lacks the 'ɵmod' property

I am currently working on developing a custom module to store all my UI components. It is essential that this module is compatible with Angular 10 and above. Here is the package.json file for my library: { "name": "myLibModule", &qu ...

Is there a way to automatically update the child option when the parent option is altered?

I am attempting to modify the child option based on the parent option selection, similar to how it works in Bootstrap. ` <div class="wrap-input100 input100-select bg1"> <span class="label-input100">Indus ...

Ways to trigger the upgradeneeded event in IndexedDB without upgrading the version

Can you help me understand the "upgradeneeded" event? I want to be able to check the database every time a user reloads the page. Is there a way to trigger this without actually upgrading the version of the indexedDB? request.addEventListener('upgrad ...

Using ThreeJs and TweenJS to insert a delay between tweens using a for loop

Struggling with animating a bin packing problem using Three.JS and Tween.JS. I am having difficulty getting the animation to play successively rather than all at once within my loop. Attempting to use the setTimeout solution has not been successful. Does a ...

What are the methods used by Optimizely and Visual Website Optimizer to manage visual DOM editing?

Optimizely and Visual Website Optimizer are two innovative platforms that enable users to easily conduct A/B Testing. One standout feature is their visual DOM editing capability, which allows users to visually alter a webpage and save the modifications fo ...

How can I modify the navbar-collapse in Bootstrap to alter the background color of the entire navbar when it is shown or open on a mobile screen?

Can anyone tell me how to change the background color of the navbar when the navbar-collapse is displayed? I want one background color when the navbar-collapse is shown and a different color when it's collapsed. Is there a way to achieve this using C ...

What is the best way to eliminate the gap between the dropdown-toggle button and dropdown-menu items?

Why does a space appear between the dropdown-toggle button and dropdown-menu? Is there a way to remove this space? The box-shadow currently conceals the gap, but it becomes visible once the box-shadow is eliminated. Here is the code snippet: <!DOCT ...

Display solely the initial picture within a set while eliminating the remaining ones via jQuery

On my website, I have a list of 5 images. I would like to showcase only the first image as the "image of the week," while keeping the rest with just their titles visible. Can someone help me figure out how to use jQuery to remove the additional images? &l ...

TS7006: Argument 'duplicate' is assumed to have an 'any' data type

I am working on a function that will create a button to copy the content of a variable into the clipboard using TypeScript. Below is my attempted code: const [copySuccess, setCopySuccess] = useState(''); const copyToClipBoard = async copyMe => ...

Connect hierarchical JSON using AngularJS

I'm facing an issue where I am attempting to bind JSON with two levels to a div using angular.js. The first level binds correctly, but the second level does not seem to be binding properly. Can someone please provide suggestions on how to adjust the b ...

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

Elements positioned absolutely using the ::after and ::before pseudo-elements do not adhere to the very bottom of the body

Feeling a bit crazy right now! Haha. I'm facing a challenge in positioning an image at the bottom of a webpage. It seems to work fine when the page width is larger, around 1360px, but as soon as I shrink it to 1206px or less, the image gets pushed up, ...

Adjusting the color of text according to its value

I am a beginner with PHP, MySQL, and jQuery. I am working on a service desk form and database where I can input and display data effectively. However, I am looking to implement a feature that changes the color of text based on the value in the MySQL databa ...