Jump to content

Is it possible to move text on scroll

Recommended Posts

  • Replies 3
  • Views 825
  • Created
  • Last Reply

Top Posters In This Topic

On 3/25/2022 at 12:20 AM, chris8 said:

Site URL: https://ivs.tv/

Is it possible on 7.1 to have header text move in on user scroll similar to this https://ivs.tv/

It requires some javascript (business plan or higher) to observe the text and transform it when the viewport changes

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

I've not seen the effect you show on the example site, on a SS site.

The beginnings of one can be made relatively easy with my Page CSS Variable Scroll Ratio Add code. This is not a full solution but more of an example of what can be done with an assist from some JavaScript. The code adds a CSS variable --scroll-ratio to a page. From there it is a matter of building up some CSS to manipulate elements.

 
#block-yui_3_17_2_1_1648764682420_5019 {

  overflow-x : hidden;
  
  }

#block-yui_3_17_2_1_1648764682420_5019 .sqs-block-content > *:nth-child( odd ) {

  transform : translateX( calc( -1 * ( var( --scroll-ratio ) * 100 * 100px ) ) );
  
  }

#block-yui_3_17_2_1_1648764682420_5019 .sqs-block-content > *:nth-child( even ) {

  transform : translateX( calc( var( --scroll-ratio ) * 100 * 100px ) );
  
  }

The basic trick is to use the --scroll-ratio variable which is a number from 0 to 1. Zero being no scroll and one being fully scrolled. Multiply by 100 to take the scale from 0 to 100 ( percent ). Then multiply by 100px to get some movement which can be adjusted to control the rate of change. Then depending on if the element is odd or even move left or right.

The nice thing about this method is that it is using the text block for the text. So any CSS you can apply to that block shouldn't matter to this basic technique of flying the elements out from the center. You could also use a code block and manipulate elements there in a similar fashion.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.