Note: The CSS for this vertical marquee is contained in the Custom CSS box in the Advanced tab of the section called ‘Marquee’, so you can easily drag the section to a different row layout if required. You can add any number of images you like, and any aspect ratio.

You will see in the Down and Up sections, there are images named Image 1 – Image 4 and these are duplicated. You can delete the second set of 4 images in each section (Down & Up), swap out the remaining images for your own. Then duplicate those images again in each of the Down & Up sections so you have two sets of the same images in the same order, this is needed for the continuous scroll effect.

There are no variables in the CSS as it’s pretty simple to edit. There are settings for desktop, and a media query for mobile – on mobile the orientation will switch to horizontal.

The spacing around the images is created using padding in each image. Don’t add horizontal or vertical gaps to the Up/Down sections or you will get a jump within the marquee. To create more/less space, adjust the image padding.

In the CSS, there is a -8px value on the right position of the marquee. This is equal to the padding currently set on the images. If you change the image padding values, you might want to change this -8px value to match, so the marquee sits flush with the right edge of the screen.

To change the speed of the animation, find the 20s (20 seconds) values in the animation properties, they look like this and there are 4 of them:

animation: scrollDown 20s linear infinite;

If you want the images to be larger on mobile, find the width: 200%; setting in the media query, and increase it to 300% or 400% etc.

The row has a minimum height defined on desktop, so don’t forget to change that to your needs.

That’s pretty much it. Enjoy!

Vertical Image Marquee

This template provides a seamless vertical image marquee with continuous scrolling. It features two columns: one scrolling upwards and the other downwards. Easily customisable, it can be used to create dynamic visual effects on your website. The CSS animations ensure a smooth and engaging user experience. The layout is gracefully responsive, switching to a horizontal orientation on mobile.