Rotating Scroll Down Indicator Circle - 7.0 Brine Version (Preview Guide)

Random

Apr 5

Written By Ghost

Live Demo

Super Plugin Info

Works with Squarespace 7.0 (Brine)
Uses Scroll Indicator (Brine Feature)
Requires Personal Plan or Higher
Uses CSS Editor

Step 1. Enable Scroll Indicator in Squarespace 7.0 (Brine Template)

Enable the Index Scroll Indicator in site styles and set the color’s opacity to 0 – show me this setting. Keep in mind that Squarespace only shows the scroll indicator on index pages.

Step 2. Add this code to Custom CSS

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Customizable Options

These options are available in Custom CSS.

Desktop Style

background: url = replace with your own image or keep the Ghost default
height: 300px; = adjust the height of the scroll circle
width: 300px; = adjust the width of the scroll circle
filter:invert(1); = inverts the file if you need it white or black
margin-bottom: 50px; = spacing below the scroll circle
animation: circle 15s; = the speed of the rotating animation

Mobile Style

height: 200px; = adjust the height of the scroll circle
width: 200px; = adjust the width of the scroll circle
margin-left: 80px; = spacing to the left of the scroll circle
margin-bottom: 50px; = spacing below the scroll circle
animation: circle 15s; = the speed of the rotating animation

Animation Keyframes

Do not change any of the keyframe values – this gives the scroll down indicator circle its rotating animation.

Troubleshooting (Plugin Not Working)

Disabling AJAX loading in site styles is recommended.
If you can’t see the indicator, ensure it’s enabled in site styles.

Squarespace 7.0

Ghost http://www.ghostplugins.com