Does anyone know how to make a background animation like this site?

Asked

Viewed 46 times

-1

Hello, folks, below is the website: http://8guild.com/

Does anyone know how to do this background? If you have a tutorial I thank you, I have searched a lot and found nothing.

php javascript jquery

1 answer

1

The animation on the site was done on CSS.

In the example below I created a similar animation.

The keyframe changes the vertical position of the background with the Pattern applied and the line animation: animacao 15s infinite linear; sets the animation in <body>.

You can change the values and go testing to better understand how it works.

body {
  background: url('https://www.toptal.com/designers/subtlepatterns/patterns/tic-tac-toe.png');
  animation: animacao 30s infinite linear;
}

@keyframes animacao {
  50% {
    background-position: 0% 500%;
  }
  
  100% {
    background-position: 0% 1000%;
  }
}

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.