Horizontal scroll + parallax how to run a jInvertScroll.js at webflow?

Read the Quickstart. It’s not just code.

Hi, I do not know how to write code, I’m just a designer, I would now like to create a spectacular site on the basis of jInvertScroll.js

Number 3 is how you are supposed to style the elements. This can be done using Webflow style toolbar for each element.

Number 4 is the code you need to put in the code block in your screenshot. Then you need to change yourselector1, yourselector2 to the class names of your elements, like .element1, .element2, etc.

still not working !

Is there something wrong ?
https://preview.webflow.com/preview/denis-s-jinvertscroll-dd1c85f03dc968d00?preview=1714d47b1211b489a55ee56c0c509820

I’m going crazy, what is wrong?


https://preview.webflow.com/preview/denis-s-inv-scroll-1db33d3b6f39f3bf1eff?preview=8dd5b3e24875d23366310509441d4b3f

Your selector should look like this

$.jInvertScroll(['.horizon-scroll', '.middle-scroll']);

Thanks Samliew, there was a horizontal scrolling, but no parallax.
problem in the settings webflow

https://preview.webflow.com/preview/denis-s-jinvertscroll?preview=2a153570b19f9c07d9dd6fe0a686509e

it seems there is not enough value for the speed of each div

Is there a way to add movement speed for each Div individually, through add attributes , or is there another way? All Div are moving at the same speed, http://denis-s-jinvertscroll-8d5ede860bb0cb4f0.webflow.io/

https://webflow.com/website/denis-s-jinvertscroll-8d5ede860bb0cb4f0?s=denis-s-jinvertscroll-8d5ede860bb0cb4f0

Glad you figured out the animation part. My guess is each of the layers have different z-index.

http://denis-s-stellar-site.webflow.io/
jque.re what is missing, how to do it correctly? https://preview.webflow.com/preview/denis-s-stellar-site?preview=c8309aafbdbc90fd972379854d94ff17

Next is the dimensions (width/height). Can you see what is different?

Samliew, I am very interested in webflow, more than a week has passed in vain, if you do not mind, could you make a little lesson on the similarity of this or that, I would be very grateful ?I think it would be interesting to many on the forum Tutorial: How to make a Horizontal Scrolling Page - #5 by bartekkustra - General - Forum | Webflow , How to make parallax elements in Webflow - YouTube

Try removing the height. You only need the width of each layer to be different.

@samliew it worked !!! Thank you so much !!! :sweat_smile: but I got a problem

<script src="https://dl.dropboxusercontent.com/s/ahpu5hp6m2vbzrg/jquery.jInvertScroll.js">

</script>

<script>

      $.jInvertScroll(['.horizon scroll','.middle scroll', '.front scroll']);


</script>

<script>

(function($) {
        $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
            {
            height: 6000,                   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
                console.log(percent);
            }
        });
    }(jQuery));

  </script>

link setting - a section in this page not work correctly,does not scroll to the desired page
, http://jinvertscroll-d77b6179296-5c13656f654a7.webflow.io/#pageAbout , https://webflow.com/website/jinvertscroll-d77b6179296-5c13656f654a7