Streaming live at 10am (PST)

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


#1

horizontal scroll + parallax, how to run a jInvertScroll.js at webflow ? http://www.pixxelfactory.net/jInvertScroll/


#2

ooooooo... this looks like a great interaction for things like a timeline website/infographic.

just like any other third-party code, you'll need to host the JS file somewhere else, like AWS, then reference that in your site's custom code and then follow the instructions on that site to execute the code.

Good luck with it! :slight_smile:


#3

Hello, please tell me that I need to add


#4

Read the Quickstart. It's not just code.


#5

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


#6

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.


#7

still not working !


#8

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


#9

I'm going crazy, what is wrong?


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


#10

Your selector should look like this

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

#11

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


#12

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


#13

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/


#14

https://webflow.com/website/denis-s-jinvertscroll-8d5ede860bb0cb4f0?s=denis-s-jinvertscroll-8d5ede860bb0cb4f0
http://www.jque.re/plugins/version3/jinvertscroll/


#15

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


#16

http://denis-s-stellar-site.webflow.io/
http://www.jque.re/plugins/version3/jinvertscroll/

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


#17

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


#18

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 http://forum.webflow.com/t/tutorial-how-to-make-a-horizontal-scrolling-page/13409/5 , https://www.youtube.com/watch?v=-aXVcSkBEsk


#19


#20

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