Use this code to rotate your scrolling text block on Squarespace - Easy copy & paste code
Let's keep things moving! Scrolling text blocks are a great way to add additional animation to your site and show important information in a fun and engaging way.
But, lets up it a level and tilt the scrolling block on its axis. Fear not all it takes is a few lines of code and you'll be able to customise it as much as you want.
Where to paste your code into Squarespace:
You'll find your CSS dashboard in the pages section on your site, scroll down to the bottom and you'll see Website tools. Click on that and you'll see custom CSS, open that and pasted following codes to make the changes. EASY!
How to rotate your scrolling text
block in Squarespace
I love this great feature that Squarespace introduced not to long ago. I really think it is one of the best ways to catch your audiences eye when they land on your site and adding a tilt to it is just a fun way to customise it.
Simply copy and paste the code into your CSS panel and there you go tilt effects for scrolling texts.
To customise: you can customise the rotate angle by changing the number of degrees and you can also change the seconds which will change how long it takes for the image to rotate
// SCROLLING BLOCK - TILT STYLE //
.marquee-block {
transform: rotate(-5deg) !important;
}
If you want to add it to a specific scroll block you need to target the specific block id.
Heres my favourite tool to find that without jumping into the code on the site to find it. Add Squarespace ID Finder to your browser (works best in chrome). Once installed go to the page with the scroll block you want to work on and click on the extension. It’ll look like the below image showing all the id’s of the blocks on the page:
You can then grab the correct block id, by clicking on it (it’ll copy it directly for you): #block-yui_3_17_2_1_1707472915162_7736 and customise the above code as below
Make sure you remove the # in front of block and replace it with .fe-
To customise: you can change the rotation degree by changing the number and the - to a +
// SCROLLING BLOCK - TILT STYLE - GHOST PLUGINS //
.fe-block-yui_3_17_2_1_1707472915162_7736{
.marquee-block {
transform: rotate(-5deg) !important;
}
}
Hey I’m Nisha, a 10 year Squarespace Certified Expert. I build highly engaging and swoon worthy websites for Creatives, Coaches and Female Business Owners.
Click explore if you want to know more about how I can help you launch your dream website in just 2 weeks!
