Scrolling Background Effect - VFX Blog #1

Hello! This is a smaller blog series explaining how to create certain effects for your profile. This is a pretty simple effect to pull off, but it looks really good with the right patterns and backgrounds!

This will be focusing on making a scrolling background, this looks better with images specifically meant to be repeated like patterns. The effect can be applied to any element but is pretty distracting so be careful when using it.

This effect is reliant on a simple animation with some adjustable rules in order to work, you will need to have the dimensions for your image explicitly set in your background decloration.

background: 0px 0px / 40px 40px url("https://example.com/image.png")

Yellow is for background position, which is a variable you need.
Blue is for background-size, this is also needed for the @keyframes animation.

The animation itself just loops to a position where it would be the exact same as the starting value, since it's a repeating background, when the animation snaps the position back to the starting one; it doesn't make any difference due to the fact there is no difference between the starting and end positions, so it just looks like it moves infinitely.

You can refer to the links below to learn how @keyframes & background-position are used in this effect.

How to Create

For people who want to make this on their own.
Please credit.

This works with any image, but i'd suggest finding a repeatable background image or small icon to use. Also you will need to define your background's size, for example the image below is set to 20px 20px, also you cannot use norepeat on your background.

For your element, declare your background like this:

.example-element {
  background: 0px 0px / 70px 70px url("example-img-url.png");
}

After that, you need to create a new @keyframes declaration with the name of your animation. You will have to put this outside of the element's style rules.

@keyframes scrolling-background {
  from {
    background-position: 0px 0px;
  }
  to {
    background-position: 70px 70px; /* this has to be equal to the size you declared for your image. */
  }
}

Then, add an animation property to your element and reference the keyframes you just created.

.example-element {
  background: 0px 0px / 70px 70px url("example-img-url.png");
  animation: 2s scrolling-background linear infinite;
}

After that, your element's background should look like this:

After that, you can tweak the animation properties to get the effect you wish. Try flipping the X position to a negative and reverse the direction the background moves, or try changing the the easing mode so it snaps infinitely.

Copy this and put it inside a style tag, change html to any other element if needed.

html {
  background: 0px 0px / 4rem 4rem url("https://www.w3.org/MarkUp/Test/xhtml-print/20050519/tests/jpeg444.jpg");
  animation: scroll 4s infinite linear;
}

@keyframes {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: 4rem 4rem;
  }
}

Thank you for reading this entry, there will be a new one next week either about splaying SpaceHey profiles using display: contents; or sleek intro animations. Let me know which one of these two you'd rather learn.

If you've never seen the first entry in my Comprehensive guide series, i'd reccomend you'd do so, as it runs down how some of the fundementals work. It also showcases how to get an IDE set up for your SpaceHey profile.

I'll be seeing all of you guys later, I gotta go back to creating something new!