Hero Banner Parallax Scrolling Animation in Squarespace 7.1 (UPDATED)

[@colinboyter]

Thank you. I'm learning so much from your vids. Little tricks like disabling the css when in editing mode and also targeting block-yui elements (I originally thought that any element with yui was off limits for targeting!) and preventing those horizontal space issues when elements go outside the edge. The parallax effect is cool too. Great to know that these types of effects can be implemented in squarespace. Thanks again for taking the time to make these videos. Your presenting style is great.

[@SEWebDesign]

Thank you for this wonderful feedback Colin! I am so glad you are enjoying my videos!

[@lovelawns]

Another amazing video mate. Thank you for sharing 🤙🏻

[@SEWebDesign]

No problem!

[@onlinejoseph]

love the video. one issue i'm having with the animation though is the difference in pixels in desktop and mobile. is there a way to use "vw" instead of pixels in the .to('#block') function?

[@SEWebDesign]

Yes I believe you can. If that doesn't work, you could try percentages I believe as well

[@Iamnickrobertson]

So pumped for this! Non Squarespace question. Could this still be done if you were adding images in via a code block? Setting your own dive name etc? I build on showit and a major issue they have is their naming conventions change every time you change the image out or change something about it causing the code to constantly break. So I’m wondering if I added images in via a code block if this would still work?

[@SEWebDesign]

Yes, that should work!

[@oskarkarlén]

Thank You sir! Stil working with the latest update!

[@SEWebDesign]

Great to hear!

[@maximemochamps8582]

Hi, amazing video! It works so well on desktop, but unfortunately it's very laggy on mobile. Any way to fix that?

[@maximemochamps8582]

Nevermind, it works great now!

[@SEWebDesign]

Glad to hear it!

[@maximemochamps8582]

@@SEWebDesign Can you do multiple hero banners? or will it mess up with the website's speed?

[@SEWebDesign]

@@maximemochamps8582 yes, but I would convert the code so that each code for the parallax could be placed in each page's header code injection. That way not every page has to load a bunch of parallax code which is what would happen if you placed it all in the site wide footer code injection.

[@maximemochamps8582]

@@SEWebDesign How would I do that? Quick question again, how can you make an animation start between the middle and the bottom of the page? Top Middle is too high, I want the animation to start earlier when scrolling, what can I write?

[@LauraHernandez-fr4jn]

Love this tutorial! and all your tutorials really. I will try it. Thank you!

[@Addison1008]

This is 10/10.

[@SEWebDesign]

Thanks so much!

[@pugaigrapher6749]

The header isn't changing dynamically after adding the Custom CSS code

[@duyu_]

I need some assistance please S-E Web Design. When I add an image block to the blank section the image block is small. What do I do?

[@SEWebDesign]

This tutorial uses the classic editor, and may not work with the new fluid engine grid

[@duyu_]

@@SEWebDesign I see, that makes way more sense as to why it does not work. Thank you!

[@SomethingRandomChannel]

the height of the section is really high i and the images are stacked ontop of one another but they are in the middle of the section and the section is really tall now in the current version of squarespace.

[@SEWebDesign]

It's hard to say what exactly might be going on. If you would like to hire me to troubleshoot you can do so through my website!