How to create an animated spinning background in Elementor

So if you follow along in the video, I refer to this blog post for you to enter code at certain points, so below is everything you will need!

Alternatively

You can download the complete template here

The Following are the css class names I used in the tutorial:

				
					feastanimationbackground

The Following code goes into the HMTL widget:

				
					<style>
  .feastanimationbackground {
    position: relative;
    overflow: hidden;
  }

  .feastanimationbackground::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 200%;
    background-size: cover;
    background-position: center;
    transform-origin: center;
    z-index: -1;
    transform: translate(-50%, -50%) scale(1.5);
    
    
    /*to set the speed, you can change the 15s to somthing much monger or shorted */
    
    animation: spinBackground 35s linear infinite;
    
    
  }

  @keyframes spinBackground {
    from { transform: translate(-50%, -50%) scale(1.5) rotate(0deg); }
    to { transform: translate(-50%, -50%) scale(1.5) rotate(360deg); }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('.feastanimationbackground');

    elements.forEach((element, index) => {
      const computedStyle = window.getComputedStyle(element);
      const backgroundImage = computedStyle.backgroundImage;

      const styleSheet = document.createElement('style');
      styleSheet.textContent = `
        .feastanimationbackground:nth-of-type(${index + 1})::before {
          background-image: ${backgroundImage};
        }

        .feastanimationbackground:nth-of-type(${index + 1}) {
          background-image: none !important;
        }
      `;

      document.head.appendChild(styleSheet);
    });
  });
</script>

Other Articles

How To Make A Vertical 3D Gallery Slider

https://youtu.be/BWoXciYFn-Q So if you follow along in the video, I refer to this blog post for you to enter code ...

How To Make A Horizontal 3D Gallery Slider

So if you follow along in the video, I refer to this blog post for you to enter code at ...

How To Make A Auto Rotating 3D Carousel

So if you follow along in the video, I refer to this blog post for you to enter code at ...

How To Make A 3D Carousel For Products

So if you follow along in the video, I refer to this blog post for you to enter code at ...