Anyone knows how to make this scroll effect?

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:

Costum code before </ body> tag

 <script type="text/javascript" src="http://www.owlcarousel.owlgraphic.com/assets/vendors/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
    <script type="text/javascript" src="http://proweblog.ru/lp2/js/smothscroll.js"></script>

smothscroll.js - I am on my server, so I advise you to download it and upload your own.

@Vyacheslav works like a charm… Thanks a lot!

Hi again… Only problem when doing this awesome nice scroll effect is that when I now click on the buttons in the header to take me down to the different sections (anchors) it takes forever. Is there a way to fix that? So it wont affect the anchor scrolling time?

master file smothscroll.js, where all settings. I have not encountered this problem like you, so I can not tell

Thanks again. I found that I had a data-scroll-time set. Just removed it and everything works :smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.