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.
Is there something wrong ?
https://preview.webflow.com/preview/denis-s-jinvertscroll-dd1c85f03dc968d00?preview=1714d47b1211b489a55ee56c0c509820
I’m going crazy, what is wrong?
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/
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 !!! 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