Video není dostupné.
Omlouváme se.
MOMENTUM Scrolling with Smooth-Scrollbar.js!
Vložit
- čas přidán 15. 06. 2020
- Visit linode.com/designcourse for a $20 credit on your new linode account.
designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're checking out a tiny 2kb solution for implementing momentum scrolling on your layouts (smooth-scrollbar.js). I'll show you how to get up n' running in a jiffy!
github.com/idiotWu/smooth-scr...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
I'm going to have to rearrange my terrariums so you can see both. I just added a 9 month old female ball python which is directly behind me! Here's a pic of her and the tank I built: imgur.com/a/jIsNCC7
Thank you !
Haha Gary Without Body! 😛😛😛
cool
Lol I thought you meant the programming language "python" so I was confused.
floating head look suits you
I found it rather creepy :o
😂😂😂
this is I've been looking for soo long, I've tried so many random plugins thank you so much sir
This is so informative. I wish I knew this earlier. You’re doing such an amazing job to help others 😊😊😊😊
Man I've been looking for this for days... But i didn't knew the name of it, just the effect hahaha.
Thanks alot!
Hi! thank you so much!
How to slow down and block scrolling with ease when reach to the edge of start and end document?
Floating head for the win! Love the video... Thanks!
Does anyone have experience if this library works well on mobile with touch swiping?
Sir, great tutorial. im able to make my scrolling smooth with this js file. But i cant understand the "plugin options" in the last options. Could you please make tutorial on it?
the scrolling is sooo satisfying
Anyone i have a question please help me
When i need to make a responsive website in adobe xd must i make it for every size or not?
I love the music at the end
How can i add this to my react
Is there a way to get this smoothness in a wordpress website
can you paste the cdn version I want to see if I can get this working in wordpress for a client. Thank you.
Very creepy floating head... I love it LOL
@simon sir it works when Im running it from my visual studio code after pushing it to the github, then I tried to open it from github but the smooth animation is not working ,it remains default any way to fix
Im creating my portfolio please reply me Im your huge fan
Hey Gary, it's all good, but isn't it considered as bad UX?
And the moment you club it with GSAP ScrollTrigger/ ScrollMagic, it doesn't allow to pin the elements because of transforms.
Also considering the fact that all major browsers are providing native smooth scroll now.
You can use scrollbar.isVisible(element) to check if you reached an element and then apply some css animation, gsap, or whatever. I would not say it's bad UX, but it should only be used at kinda playful / experimental sites.
@@mann_von_welt Pinning of elements is not possible as smooth scroll applies position: fixed over parent element. Position: fixed inside a position: fixed is not relative to viewport but the parent element.
thanks but unfortunately i got into a problem . scrollmagic did not work properly when i used smooth-scrollbar .can you help me with that
Does anyone know a way to add momentum scrolling horizontally? I've been looking for days, it's driving me crazy.
how do we work with scroll events now using this?
it affects my internal CSS in my project, can anyone help me here?
This is awesome
How do u even find all these cool js libraries ? Awesome video !
OMGGGGG FINALLY!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Hey! how make fixed position with smooth-scroll?)
Pls help me.
How to turn off the scrollbar completely?
happy to meet you gary timeline
Nice t-shirts bro
Hey guys does anyone know how to change color of the smooth scrollbar.js?
isnt it the same as scroll behaviour in css
I find websites that force a scrolling behaviour on me very annoying. I disable smooth scrolling in my browser for a reason!
What reason is that, by the way?
I swear this same guy did a video recently in which he said this was a bad idea?!
The first time I ran into this I hated it too. I think it really depends on how you use it. What a plugin like this essentially does is take away some control from the user in exchange for nice looking effects. As long as you don't give the user a need to scroll in a controlled manner, it should be fine (for example when reading long bodies of text, having the text 'jump' when scrolling down causes the reader to lose track of where he/she was reading and forces the eyes to change focus. Worse, if the reader naturally reacts by scrolling in the opposite direction to correct this, he/she will just go back to the previous position. He/she just made 2 actions without any progress, that is just super annoying UX)
The floating head freaked me out, I was reading something on a different tab then I switched to this one.
Hey Gary, Lovely stuff. I am a graphic designer wanting to improve my web design skills. My question is: Is it possible to use this tool and process on a website builder such as Wix? Sorry if it is a silly question, I believe the word to describe my skill level is a "noob" 😊
It's 1 year later but no, Wix can not be self hosted so you don't have control over the javascript libraries you wanna use. It's just for the people who want to drag and drop design websites and a bit f css tweaks.
@@iamcaviar2674 Better late than never! Thank you so much, it is a very helpful answer! 🥰
@@EliSamba still interested in web design? Let’s start a business together.
I've tried this but this plugin confilcts with other jquery plugins!
Smooth scroll makes me feel weird
What about fixed elements? Position: fixed not working!
Do not work when height of the sections to 100vh
Very informative, but due to the "highjacking" of the scroll function of the browser, this plugin makes any sticky navbar immobile.
how to do this to php
its not working. i have: Uncaught SyntaxError: Cannot use import statement outside a module
the needs to be at the end of the body
@@ren-design i used another smooth scroll script and its working perfectly. github.com/cferdinandi/smooth-scroll
I'm new to this as well, but I think you just need to add "type='module'" to the script tag. You can learn more by googling "ES6 imports"
It should look something like this:
I like you bro !
smooth-scrollbar.js - weight does 42 kb.. ??? Why would you do that? You said 2 kb, right?
import Scrollbar isn't working!
Var? anno 2020?
Ray-man coding today I see
Smooth scrolling is a mess, same as the volume, controlled by the OS, browser and on your speakers. With the OS on 3 lines per scroll (Windows, Linux, MacOS) and a trackpad and flywheel mouse, surface dial and a JavaScript I confused how far I need to scroll.
it's not working !! please can you respond
I'm learning Javascript and it's going alright and all. But all Javascript tutorials are about objects, and classes, and databases. And that's great, i understand that's important. But to a designer it seems that all of that, yes, the core of javascript, the fundamentals, can be skipped in favour of just importing these libraries that let you animate cool shit. I don't need to develop an app I just want things to wiggle and swoosh.
chad
@@whimsy5623 Lmao
Man so glad ublock exists else I would've gone insane from websites having their own comedian scrolling speeds shits just annoying.
Are you a guitarist along with a developer 😍😍😍😍😍😍...??????
what does npm init -y do? why the flag?
-y basically responds 'yes' to any questions asked during init.
@@josephcobbinah5412 thank you
You are welcome
Nice floating head
he looking like a ghost
Doesn't work right with perspective parallax..
Can you give me some tips to integrate floating head like yours..in my website😂😂😂...
This will break any "appear on scroll" animations as it high jacks the native scroll events and won't be able to calculate the window height and top values.
parallax doesn't work with this
First!
at the end of the each video please speak about browser support like chrome edge and firefox won't be a problem here. speak about IE! support😭😞.
Just drop IE support, it's not worth it. Browser is dead. People who still use it should move on or use at own risk.
that floating head facecam is creepy, include the shoulders too please
He had a green shirt in front of a green screen. Wasn't intentional
Author:
body {
visibility: hidden;
}
you dont need : after author
I absolutely hate it when a website or an app overrides browser default scrolling behaviour. It's a bad practice in my opinion
bro not like this.... this floating head makes me nervous xD
BRUH THAT CHIN
#gary {
position: absolute;
left: 0
bottom: 0;
}
background-color: transparent;
This is so infuriating. The last thing I want on a desktop is for my mouse wheel to act like scrolling on a mobile phone. I wish developers would stop running code on their websites which override the settings a user chooses on their web browsers and devices.
Why am I here you ask? So I can find the code snippet some websites use to do this so I can block it.
"You can notice the scrollbar itself has been hijacked"
Yeah... good choice of words there.
Css html{scroll-type:smooth}
DONT DO THIS PLEASE, ITS ANNOYING
smooth scrolling is counter-intuitive and generally annoying. REMOVE
floating head /watch?v=HQoRXhS7vlU