Site Title Sliding Fill

Description

site title with outline, when hover, background will fill from left to right
buy me a coffee

#1. Install Code

#1.1. You can use this code to Code Injection > Footer

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

<!-- 08.26c06v3 Site Title Sliding Fill -->
<script>
window.SiteTitleSlidingFillOptions = {
  applyTo: 'a#site-title',
  outlineColor: '#000000',
  outlineWidth: 1,
  fillColor: '#000000',
  hoverFillPercent: 100,
  fillDuration: 2000,
  fillEasing: 'ease'
};
</script>
<script src="https://code.beaverhero.com/header/0826c06v3sitetitlefill.js"></script>

#1.2. You can change outline color, fill color here (line 05, line 07)

outlineColor: '#000000',
fillColor: '#000000',

#1.3. 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 edit Site Footer > Add a Markdown Block

Add this code into Markdown

<script>
window.SiteTitleSlidingFillOptions = {
  applyTo: 'a#site-title',
  outlineColor: '#000000',
  outlineWidth: 1,
  fillColor: '#000000',
  hoverFillPercent: 100,
  fillDuration: 2000,
  fillEasing: 'ease'
};
</script>
<script src="https://code.beaverhero.com/header/0826c06v3sitetitlefill.js"></script>