Is it possible to move text on scroll

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/

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

Thanks! Business Plan - any ideas? Also, do you have a solution to scroll effect like this? https://www.albed.it/#/

That super smooth scrolling effect

Thanks

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.