Jump to content

Is it possible to move text on scroll

Recommended Posts

  • Replies 3
  • 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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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 best , and see my profile. Thanks for your support!

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.