Creating a scrolling marquee effect with code

Available in Semplice 6 without any custom code

Custom cursor is a native feature of Semplice 6! You can read more about how to create it without using custom code in this guide. However, if you still prefer a more advanced custom method, continue reading this guide.

 

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

 

You've most likely recently seen a seamless side-scrolling marquee on one of your favorite websites. Luckily enough, it's quite easy enough to recreate this popular effect right in Semplice with just a bit of CSS code and a background image.

 

Here is a live demo of the effect we'll be creating:

 

Creating your marquee artwork

Since we'll create our marquee using a background image, we first need to create artwork to be used as our marquee banner. We recommend using SVG for the highest quality result. Remember to allow for some white space around your artwork since it will be repeated horizontally.

 

In our example, we've set our artwork this way:

Note: the black border around the artwork is our artboard bounds.

 

Creating your marquee section

We'll need to create a new section to serve as our marquee banner. Create your section by dragging a spacer module onto the editor where it says Add Section.

 

 

Next, in the section options set your background image. Set the background position to Middle Left and the repeat to Repeat Horizontal. You can leave the scaling at "No Scaling" since we will be setting the size with the CSS.

 

 

Next, in the section layout options set the section to be fluid with no gutters. Set the section height as "Custom" and give it a pixel value. You can adjust the sizing of your marquee by increasing the section height.

 

 

Assigning the custom class

In the marquee's section options, under Miscellaneous options, assign a custom classname to the section. In this case, we will use "marquee-section". 

 

 

Adding the CSS

You will now add some CSS to magically animate our marquee. Add the following CSS under Customize > Advanced > Custom CSS:

@keyframes marquee {
   0% { background-position: 0; }
   100% { background-position: -4250% }
}
.marquee-section {
   animation: marquee 240s linear infinite;
}

 

 

Customizing your marquee

Adjusting the speed

You can adjust the speed of the animation, for example speed it up, by adjusting the second values in the following line of CSS from the code above:

animation: marquee 100s linear infinite;

 

Changing direction

To reverse the marquee direction, add the following line of code to your marquee animation CSS:

animation-direction: reverse;

Your code should look like this:

.marquee-section {
   animation: marquee 240s linear infinite;
   animation-direction: reverse;
}

 

Optimizing for mobile

If your marquee is too slow or fast for mobile, you may need to set an absolute width on your marquee on mobile devices. Add the following CSS code in the mobile CSS editor under Customize > Advanced > Custom CSS:

.marquee-section {
   width: 1800px !important;
}