Streaming live at 10am (PST)

Anyone knows how to make this scroll effect?


#1

http://themeforest.net/item/bare-portfolio-agency-html-template/full_screen_preview/12870950


#2

There's a video for this.

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


#3

Hello @Nicholas_Loye, could you tell more detailed, what exactly you catch like "scroll effect" ?


#4

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?


#5

are you talking about

the slider image scrolling left / right

or the page scroll - up / down

or the parallax chair.


#6

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.


#7

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


#8

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.


#9

Thank you @sabanna and @seank ... Awesome


#10

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


#11

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)


#12

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.


#13

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...


#14

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


#15

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: https://github.com/galambalazs/smoothscroll-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!


#16

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?


#17

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).


#18

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


#19

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


#20

Exactly @Vyacheslav :smile: