bobbykimani Posted February 14, 2022 Share Posted February 14, 2022 Site URL: https://www.squarespace.com/zendaya 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 and have the text move in from the sides. Anyone have any tips or code for how this is done? Link to comment
Solution paul2009 Posted February 15, 2022 Solution Share Posted February 15, 2022 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. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity 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. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
bobbykimani Posted February 21, 2022 Author Share Posted February 21, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment