Jump to content

How to create the scroll effect on the squarespace Zendaya site where the video resizes upon scrolling.

Go to solution Solved by paul2009,

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • Solution
16 hours ago, bobbykimani said:

I contacted squarespace tech support to see what features were used to create the scroll functionality on their site https://www.squarespace.com/zendaya. They said it was custom code to make the video shrink upon scrolling

This wasn't built with consumer templates; the site was built using Squarespace 7.0 Developer Platform which requires a knowledge of JavaScript, JSON-T and CSS. 

For example, the video shrinking script uses a transform to scale the hero video element in response to changes in the scrollY property of the Window interface as you scroll down. It also adds an increasing border radius on the corners to round off the edges. 

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
On 2/15/2022 at 1:09 AM, paul2009 said:

For example, the video shrinking script uses a transform to scale the hero video element in response to changes in the scrollY property of the Window interface as you scroll down. It also adds an increasing border radius on the corners to round off the edges. 

I saw this "effect" on another website too.

1.  Are there any third party "plug-ins" or bits of code "pre-written" to achieve this? 

2. Is this effect possible in 7.1?

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.