Anyone knows how to make this scroll effect?

Thereā€™s a video for this.

http://tutorials.webflow.com/topic-sliders

Hello @Nicholas_Loye, could you tell more detailed, what exactly you catch like ā€œscroll effectā€ ?

Thanks for coming back to me @Revolution and @sabanna. Sorry for my short message. What I like about the scroll effect is the smoothness. Does it make sense?

are you talking about

the slider image scrolling left / right

or the page scroll - up / down

or the parallax chair.

1 Like

Well, now it is more clear :smiley:
For make scrolling more smooth there is some piece of code which you have to add to footer, I think it is some jQuery. But canā€™t really tell you which one, I think you can find many in internet.

For make scrolling just slower there is attribute that you can use.
You can add a custom attribute (on the Settings tab) called data-scroll-time to the to affect the speed of the scroll. E.g. setting it to 2.0 will scroll twice as fast as default, while setting to 0.5 will perform a slower scroll.

Any plans to have a Jquery or Javascript edit or in the future of webflow? you guys know?

jquery is already in webflow.

from the exported code.

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jquery will not execute though in preview mode.

jquery code goes in the custom code section of the dashboardā€¦ or via the embedded html widget.

Thank you @sabanna and @seank ā€¦ Awesome

1 Like

Sorry @Revolution didnt see your post until now. What I meant was the up/down scroll, which is very smooth.

If scrolling is not smooth on your system, then maybe itā€™s a browser setting?

Scrollings is always smooth with webflow stuff(unless specifically designed not to). I suspect you may refer to how the chair image gets ā€˜coveredā€™ by the white section going over it? (i.e. the parallax chair @Revolution mentioned)

HI @DragonDon thanks for your reply. What I meant was when i scroll down with my mousewheel it has a very smooth scrolling effect, compared to my webflow sites. Its difficult for me to explain, hope it makes sense.

I think what @Nicholas_Loye is talking about is the ā€œeasingā€ that is apparent on that site.

Itā€™s obvious by comparing it to ANY other website (www.webflow.com www.apple.com, take your pick) that there is a difference. The page scrolls smoothly and then slowly comes to a stop (eases). Seems thereā€™s some serious math calculations going on hereā€¦

Hi @JFly exactly what I mean. A very nice effect if you ask me.

I found it. I reached out to the designer and found out that he used a pre-made JS file for that site. He directed me here: GitHub - gblazex/smoothscroll-for-websites: Smooth scrolling experience for websites.

I havenā€™t tried it yet myself but definitely plan to! Let me know if you @Nicholas_Loye implement it and how it goes!

JFly

UPDATED: This was sooo easy itā€™s unbelievable. Just put the SmoothScroll.js file on your webserver and link to it in the Custom Code area in the dashboard (or within the page Custom Code block area) and done!

2 Likes

Hi @sabanna.

I have tried to make a custom attribute on settings-tab called data-scroll-time value 0.5, but it doesnt seem to affect the scrolling motion.

Does it work for you?

Hello @Nicholas_Loye, yes, it still works to me.

You will notice the difference only when you will use in-page links. I donā€™t think it is effect manual scrolling (when you scroll wheel on the mouse).

Ahh okay. @sabanna thats what im trying to achieve :smile:

http://office-furniture.webflow.io, So?

Exactly @Vyacheslav :smile: