Creating a perpetual loop animation for two divs moving from right to left endlessly

Question

Creating a perpetual loop animation for two divs moving from right to left endlessly

Here is the code I have:

HTML

<div class="screen screen1"></div>
<div class="screen screen2"></div>

CSS

.screen{
    width: 100%;
    height: 50%;
    position: absolute;
    background-color:#001;
    background-image: radial-gradient(white 15%, transparent 16%),
    radial-gradient(white 15%, transparent 16%);
    background-size:60px 60px;
    background-position: 0 0, 30px 30px;
}

.screen2{
    left: 100%;
}

JavaScript

$(document).ready(function(){
    screen1 = $('.screen1');
    screen2 = $('.screen2');

    move(screen1, screen2);
});

function move(first, second){
    first.animate({left: '-100%'}, 3000, function(){
        first.css('left', '100%');
        move(second, first);
    });
    second.animate({left: 0}, 3000);
}

I am trying to create an infinite repeating background animation with two divs using jQuery. The animation works well, but there is a small pause when moving .screen1 to the right.

Here is the link to the fiddle:

https://jsfiddle.net/mavisme/a1275tuv/

How can I fix this pause and make the animation run smoothly?

javascript jquery html css jquery-animate

Answer 1

Answer №1

If you're looking to enhance your design, consider exploring CSS animations as an alternative to ~~jQuery~~:

@keyframes animate {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px 0;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html, body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #001;
  background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%);
  background-size: 60px 60px;
  animation: animate 300ms linear infinite;
}

<div class="screen"></div>

Answer 2

If you're looking to enhance your design, consider exploring CSS animations as an alternative to ~~jQuery~~:

@keyframes animate {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px 0;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

html, body {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #001;
  background-image: radial-gradient(white 15%, transparent 16%), radial-gradient(white 15%, transparent 16%);
  background-size: 60px 60px;
  animation: animate 300ms linear infinite;
}

<div class="screen"></div>

Answer 3

Answer №2

If you're finding the "speeding up" and "slowing down" at the start and end of each cycle to be unsatisfactory, consider looking into 'easing':

function move(first, second) {
    first.animate({
        left: '-100%',
    }, 3000, 'linear', function() {
        first.css('left', '100%');
        move(second, first);
    });
    second.animate({
        left: 0
    }, 3000, 'linear');
}

easing (default: swing)

You can specify a string indicating which easing function to use for the transition.

Check out this link for more information on jQuery's animate method.

Answer 4

If you're finding the "speeding up" and "slowing down" at the start and end of each cycle to be unsatisfactory, consider looking into 'easing':

function move(first, second) {
    first.animate({
        left: '-100%',
    }, 3000, 'linear', function() {
        first.css('left', '100%');
        move(second, first);
    });
    second.animate({
        left: 0
    }, 3000, 'linear');
}

easing (default: swing)

You can specify a string indicating which easing function to use for the transition.

Check out this link for more information on jQuery's animate method.

Answer 5

Answer №3

Creating a continuous loop animation for two divs moving from right to left

This is the code I used:

https://jsfiddle.net/abc123xy/7/

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

Answer 6

Creating a continuous loop animation for two divs moving from right to left

This is the code I used:

https://jsfiddle.net/abc123xy/7/

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

Creating a perpetual loop animation for two divs moving from right to left endlessly

HTML

CSS

JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What kind of error should be expected in a Next.js API route handler?

Using Linux variables in the .env file of your Vue.js project can provide a convenient way to

What is the best way to incorporate a Django variable as the width parameter in a style tag within HTML?

Preserve file sequence with jquery file upload

The output generated by grunt-contrib-handlebars differs from that of the handlebars npm task

It appears that the Next.js environment variables are not defined

How to retrieve headers using Express.js middleware

"Enhance User Experience with Multilevel Dropdowns in Bootstrap 4 - Submenus Aligned to the Top

What is the best way to determine if a child div exists within a parent div?

Press on the menu <li> item to create additional submenus

Contrast and combine information from two JavaScript arrays of objects

Prevent global backorders for products in WooCommerce, including within the admin settings

Update dataTable with new data fetched through an ajax call from a separate function defined in a different

I'm looking to extract various data from a SQLite table using the URL with ExpressJS. What's the best way to achieve

Is it normal for the protractor cucumber tests to pass without observing any browser interactions taking place?

Instructions for adding the more-vert icon from material-ui into a react project

Restrict the size of the numerical input in AngularJS

Why does jQuery's .not(this) still identify the current row selected?

Easy way to eliminate empty elements following a class using jQuery

Adjust the color of additional SVG paths upon hovering