Jump to content

Add parallax scroll to image block (not section background)

Go to solution Solved by Ziggy,

Recommended Posts

Is there a way to add a parallax scroll effect to an image block inside a section? I don’t see it as an option in the Squarespace image settings (I know you can add it to a section background image). 

I’ve seen it done before but I can’t figure out the code.

Below is my test page. The image for the effect is is #block-yui_3_17_2_1_1715707344484_171448. I currently have the image set to “fill”, so there is more of the image that’s not visible to use for the parallax effect.

https://www.lucasano.com/test

I included the original image below it (set to fit) so you can see the full image.

Thank you!

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

It's in the image design settings, click on Image Effect:

image.png.ddbfd1b629d71860262422d4d235ae1b.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Ziggy said:

It's in the image design settings, click on Image Effect:

image.png.ddbfd1b629d71860262422d4d235ae1b.png

I did see this but it does not achieve the parallax upward scroll effect that I am looking for. This method uses a zoom which I don't want. I am looking for the traditional upward/downward effect like the option for background images.

Link to comment
  • Solution
6 minutes ago, LukeDesign said:

I did see this but it does not achieve the parallax upward scroll effect that I am looking for. This method uses a zoom which I don't want. I am looking for the traditional upward/downward effect like the option for background images.

You can adjust that in the settings for the parallax effect. Set the ZOOM to zero, the Angle changes the image direction and the intensity is how far it moves.

image.png.8c5ab85dd69f0115be20d554d57a8fe9.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Ziggy said:

You can adjust that in the settings for the parallax effect. Set the ZOOM to zero, the Angle changes the image direction and the intensity is how far it moves.

image.png.8c5ab85dd69f0115be20d554d57a8fe9.png

Ah, perfect! I was getting caught up on the angle part. I adjust to 90° and it scrolls perfectly. Thank you!

Link to comment
1 hour ago, LukeDesign said:

Ah, perfect! I was getting caught up on the angle part. I adjust to 90° and it scrolls perfectly. Thank you!

No problem! Can you mark my post as the solution and give it a like? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.