{"id":6993,"date":"2026-04-12T17:33:55","date_gmt":"2026-04-12T05:33:55","guid":{"rendered":"https:\/\/www.zoyinc.com\/?p=6993"},"modified":"2026-04-12T17:46:20","modified_gmt":"2026-04-12T05:46:20","slug":"css-scrolling-marquee","status":"publish","type":"post","link":"http:\/\/www.zoyinc.com\/?p=6993","title":{"rendered":"CSS scrolling marquee"},"content":{"rendered":"\n

I was making up posts about the special wrapped trains that run on the Auckland metro rail network – for example AM661 \u2013 Be Track Smart<\/a>.<\/p>\n\n\n\n

In preparation for this I have been photographing the sides and front view of these trains. I then joined all these side view photos together to form a full side view of each wrapped train.<\/p>\n\n\n\n

Clearly the full side view of the train is the main feature of the post. The thing is that a train is very long in relation to it’s height, so if you put the full view on a post it doesn’t look all that great and is pretty underwhelming:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It seemed to me what I needed was a scrolling image of the train moving across the page<\/p>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"\/<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Requirements<\/h1>\n\n\n\n

Its important to note that I am not creating some sort of generic plugin, this is a very specific solution to a very specific problem. This made things much easier and more customizable.<\/p>\n\n\n\n

The train needs to scroll smoothly from one side to another in a continuous loop. It should emerge from one side and exit the other side without another loop beginning. In other words this should not happen:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It should have two layers, the back layer would feature the tracks, pylon and wires, and the front layer should be just the train.<\/p>\n\n\n\n

The train should align perfectly with the background, so that the wheels of the train sit perfectly on tracks, and the pantograph aligns with the wire attached to the pylon.<\/p>\n\n\n\n

Add custom css to your theme<\/h1>\n\n\n\n

We need to add some custom css, and to ensure it is available across all your posts. We will add it at the theme level.<\/p>\n\n\n\n

Select “Appearance | Editor | Styles” then click on the “Edit styles” icon and then click on “Additional CSS”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In the addition CSS paste the following:<\/p>\n\n\n\n

<\/path><\/path><\/svg><\/span>
\/*<\/span><\/span>\n* Zoyinc scrolling marquee<\/span><\/span>\n* ------------------------<\/span><\/span>\n* Thanks to inspriation from Jamie Marsland<\/span><\/span>\n* https:\/\/www.pootlepress.com\/2025\/04\/how-to-create-a-seamless-scrolling-marquee-in-wordpress-using-core-gutenberg-blocks\/<\/span><\/span>\n*\/<\/span><\/span>\n@keyframes zoyinc-animation-train-marquee {<\/span><\/span>\n  0% { transform: translateX(-100%); }<\/span><\/span>\n  100% { transform: translateX(0%); }<\/span><\/span>\n}<\/span><\/span>\n.zoyinc-train-marquee-style {<\/span><\/span>\n  overflow: hidden;<\/span><\/span>\n  white-space: nowrap;<\/span><\/span>\n  position: relative;<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n.zoyinc-train-marquee-style > .wp-block-group {<\/span><\/span>\n  display: inline-flex;<\/span><\/span>\n  gap: 2rem;<\/span><\/span>\n  min-width: max-content;<\/span><\/span>\n  align-items: center;<\/span><\/span>\n  animation-timing-function: linear;<\/span><\/span>\n  animation-iteration-count: infinite;<\/span><\/span>\n  animation-name: zoyinc-animation-train-marquee;<\/span><\/span>\n  animation-duration: 35s;<\/span><\/span>\n}<\/span><\/span>\n.zoyinc-train-marquee-train-image  img {<\/span><\/span>\n  height: 300px;<\/span><\/span>\n}<\/span><\/span>\n.zoyinc-train-marquee-train-front-padding-image  img {<\/span><\/span>\n  height: 300px;<\/span><\/span>\n}<\/span><\/span>\n.zoyinc-train-marquee-train-rear-padding-image  img {<\/span><\/span>\n  width:clamp(300px,150vw,900px);  <\/span><\/span>\n  height: 300px;<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
Don’t forget to save your changes <\/strong>– you will be prompted to save twice, once seems to be for style and once for the site.<\/p>\n\n\n\n
Bearing in mind that all my train images are the same size things become much easier. I use two train specific images, both were created based on Full Length Train Photo Using Multiple Stills<\/a> post. Both images use the same base image which was cropped against the purple squares, then resized to 3387×300.<\/p>\n\n\n\n
Create the images<\/h1>\n\n\n\n
The images are comparatively large but it needs to be this high to get the high quality images we need.<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Background image<\/h2>\n\n\n\n
This has the pylon and wires layer, basalt and track layer, and white layer visible. This image only needs to be as wide as the marquee, which for me is 1200. Taking into account that WordPress scales images greater than 2500 , I thus crop the background so it is in the middle and only 1500 wide, but still the same 300 high as the train image. Thus crop it as below:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Giving an image 1500×300:<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
Add this to the sites Media library.<\/p>\n\n\n\n
Train image<\/h2>\n\n\n\n
This image only has only the train layer and pantograph up layer visible – so transparent background. This needs to be saved as a png because we need transparency. This image is 3387×300 :<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Upload to your WordPress site<\/h3>\n\n\n\n
By default WordPress will automatically scale images wider than 2500 pixels. I fought this quite a bit but I honestly think the most robust solution is to upload the image directly to your WordPress site rather than adding it as Media, this way it won’t scale it – this is very important because if you don’t do this WordPress will use a very scaled image and it will look blurry<\/strong>.For my situation I used sftp, but whatever works for you:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
One question is what folder to put it in. For this I would look at the background image you just uploaded this to the media page, and upload the train to the same folder and use the url for the background image changing it to use the train image filename.<\/p>\n\n\n\n
So in my case the file location was:
\/srv\/www\/zoyinc\/wp-content\/uploads\/2026\/04\/AM578OneNZMarquee01.png<\/p>\n\n\n\n
The url is:
http:\/\/www.zoyinc.com\/wp-content\/uploads\/2026\/04\/AM578OneNZMarquee01.png<\/a><\/p>\n\n\n\n
Test the URL for the train image works!<\/strong><\/p>\n\n\n\n
Create the marquee<\/h2>\n\n\n\n
Next create a hierarchy comprising three layers of groups with each bottom group containing an image, as below – this will be the scrolling marquee:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
To make it easier I just create the first image and duplicate it’s group twice to get the three identical images.<\/p>\n\n\n\n
We need to change the middle image to use the url we created for the transparent train image. Click on the image and select “Replace” and then under “Current media URL” click on the edit button:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Then put in the url you created, and tested, for the transparent train image, and click on Save:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
After saving the image, click the image settings and you can see additional settings. Set left to 50% and top to 0% – there is no save to this. After updating click somewhere else to close the dialog:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Lastly change the bottom image to a green square image<\/p>\n\n\n\n
Now you should see this:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For the top level group, add the following “zoyinc-train-marquee-style zoyinc-train-marquee-train-image” in “Additional CSS Classes”:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Staying on the top level group, edit the styles for this block. Click on the “Styles” icon and then under “Background image” click on “Add background image”:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Then it should look like:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For the pink image you need to add the CSS class “zoyinc-train-marquee-train-rear-padding-image”:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For the transparent train image set the css to “zoyinc-train-marquee-train-image”<\/p>\n\n\n\n
For the green image do the same thing but use the css “zoyinc-train-marquee-train-front-padding-image”<\/p>\n\n\n\n
In the settings for Group blocks there is a layout setting “inner blocks use content width”. This should be disabled for all the groups in the marquee except the top level group!<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
For the 3 images you need to explicitly set the padding and margin to zero – there seems to be some sort of hidden default.<\/p>\n\n\n\n
\"\"<\/p>\n\n\n\n
You can save the current page and if you preview it you will see the scrolling train with a green section at the start and red section after the train, these act as padding to ensure the train exits and enters cleanly. By having different colored sections you can tell which is which.<\/p>\n\n\n\n
If everything is working, you should now change both the red and green images to a transparent 100×100 image and do a save and preview<\/p>\n\n\n\n
Save as a pattern<\/h1>\n\n\n\n
You may well wish to save this as a pattern so it can be used in other pages.<\/p>\n\n\n\n
Right click the top most group and select “Create pattern”:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
My suggestion would be to give it a good name, put in a suitable category or create a new category and disable “Synced”. You probably need synced disabled as you need to change the train image each time:<\/p>\n\n\n\n
\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
I was making up posts about the special wrapped trains that run on the Auckland metro rail network – for example AM661 \u2013 Be Track Smart. In preparation for this I have been photographing the sides and front view of these trains. I then joined all these side view photos together to form a full […]<\/p>\n","protected":false},"author":2,"featured_media":6994,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[796,761],"tags":[],"class_list":["post-6993","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-home-page","category-trains"],"_links":{"self":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/6993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6993"}],"version-history":[{"count":17,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/6993\/revisions"}],"predecessor-version":[{"id":7051,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/posts\/6993\/revisions\/7051"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=\/wp\/v2\/media\/6994"}],"wp:attachment":[{"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6993"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.zoyinc.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}