Scrolling Text Different Style

Description

• set different font size, font style to scrolling text block
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, add a Scrolling Block, something like this

#1.2. Hover on Page where you use Scrolling Block > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c01v13v3 Scrolling Block Different Colors -->
<style>
  div.sc-item:nth-child(2n+1) span {
    font-size: 18px;
    font-family: futura-pt;
}
</style>
<script>
window.ScrollingColorsConfig = {
  pixelsPerSecondPerUnit: 50,
  spinnerSize: 36,
  spinnerThickness: 4,
  spinnerColor: "#888888",
  spinnerTrackColor: "rgba(0,0,0,0.12)"
};
</script>
<script src="https://code.beaverhero.com/scrollblock/0726c01v13scrolldifferentcolor.js"></script>

#1.4. You can change style here

<style>
  div.sc-item:nth-child(2n+1) span {
    font-size: 18px;
    font-family: futura-pt;
}
</style>

To set it different color, you can use code like this

<style>
  div.sc-item:nth-child(2n+1) span {
    font-size: 18px;
    font-family: futura-pt;
color: #fff !important;
}
</style>

#1.5. If you need to tweak more you can use this AI Assistant (designed for Squarespace sites)

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Scrolling Block

Then add this code into Markdown Block

<style>
  div.sc-item:nth-child(2n+1) span {
    font-size: 18px;
    font-family: futura-pt;
}
</style>
<script>
window.ScrollingColorsConfig = {
  pixelsPerSecondPerUnit: 50,
  spinnerSize: 36,
  spinnerThickness: 4,
  spinnerColor: "#888888",
  spinnerTrackColor: "rgba(0,0,0,0.12)"
};
</script>
<script src="https://code.beaverhero.com/scrollblock/0726c01v13scrolldifferentcolor.js"></script>