Adding Parallax to Squarespace

Description

  • parallax effect, same as parallax on Squarespace 7.0

  • view demo – password: abc

Note: if you use Person Plan/Basic Plan and can’t use Injection, see #2.1

#1. Install code

#1.1. First, hover on top right of all sections where you want to add Parallax > Click Edit Section

at Anchor Link, enter word: parallax

parallax

#1.2. If you want to apply to multiple sections on same page, you can enter word: parallax, parallax2, parallax3…for these sections.

Like this

or this

#1.3. Hover on page where you will use Parallax > Click Gear icon

Click Advanced > Paste this code

<!-- 7.0 - Parallax -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css">
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
<script src="https://code.beaverhero.com/other/0226c18v3parrallax.js"></script>

#2. Customize

#2.1. To apply code on Personal/Basic Plan, you can edit current page > Add a Markdown Block

Then paste this code into Markdown Block

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css">
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
<script src="https://code.beaverhero.com/other/0226c18v3parrallax.js"></script>

1 Like