Man, your tutorials completelly changed my professional life. I was a backend developer with basic HTML, CSS and Javascript knowledge, now, thanks to your tutorials I'm a Full Stack Developer and even got a wage raise. Thank you!
@@noctis8487 Actually it is. At least for me. There are less environment variables to worry about and less user misusing. Yet the knowledge I,ve gained with this guy videos gave a boost on my career.
Sir I like your all videos but we also need to know which properties need to take for styling and animation. The reason is here as you are in the Web development project you will be able to understand but as a beginner we want to understood those little tips and tricks in handy other than basic properties.
This is really cool, but i would love someone or you to teach my the JavaScript part step by step and what they do because the main reason why we(viewers) go to your channel is to learn something new. Please comment on what each tags and stuff do also i would love a codepen if included in the description.
Didn't write it but here's how I would have done that: - Add a keydown event to #progressbar that saves the y position of the mouse and the height of the #progressbar and adds an event listener for mouse move -At each mouse move calculate the difference between the current mouse position and the first and adding it to the height of progressbar *** and while doing that scroll the page for the user using window.scroll({ top: 100, left: 100, behavior: 'smooth' }); -Add a keyup event to remove the keydown event you put before *** you can also calculate the difference between each move instead of always refering to the first position, not sure which is way more "correct" to do
CSS only: body { overflow: overlay; } This makes original scrollbar tranparent. ::-webkit-scrollbar { width: 10px; } Set the width to what you want. The rest is the same as in the video. Explanation: we make originall scrollbar transparent but we can still interact with it. Then we put our gradient scrollbar to it`s position.
Thank you for uploading. When I added box-sizing: border-box and browser is full-screened scrollbar does not reach at the bottom. It stops at the middle. How can I fix it?
Bro incredible, wonderful and indescribable content on your channel. Heads off to you. BTW can you provide the code of scrollbar as I have some bug in my code.
this tutorial is very cool, but i dont know this not working to me , can anybody help me please, scroolbar rgb not showing and that javascript not working
Guys I do have problem in the section... If I do these section at the end scroll bar desapear... as farest I can see ... or I want to ask if is linked to a javacript file that doesn´t appear ? I´m newbie ...
i did what u do but my bar still stock in the top . the bar dont move why? is there any extention or anything i should install before that ? i think the error at the javascript part cz when i write (window. onscroll) the color don't change !!
can someone copy these commands and paste it I have written these comands more tha 5 tims and somewhere mistake is happening so please can someone paste the commands
You are my best ideal bro. But I tried so many times and it hasn't worked. Please help me with that. My Code was: HTML:
Creative Page Scroll Progress Bar
Creative Page Scroll Progress Bar What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Where does it come from? Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Where can I get some? There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Let progress = document.getElementById('progressbar'); Let totalHeight = document.body.scrollHeight - window.innerHeight; window.onscroll = function(){ Let progressHeight = (window.pageYOffset / totalHeight) * 100; progress.style.height = progressHeight + "%"; }
I'm nearing a new laptop purchase. Are Mac's really worth it? I do music recording, gaming, coding, video and photo editing. But I found that my built PC's are the only economical way to have it all. These new M2 chip Apples supposedly can handle light gaming, are they worth the Apple tax in anyone's opinion? I like the 5k screens they come with, but I can find info on their response time.
If you want to mostly create music and do photo editing then yes. I'm not so sure at coding but gaming is a big no. I use a windows OS to code and the library of resources is very broad, Linux also but it's not as convenient to me.
@@hariommourya2436 what type of search? Universal search or custom search? If you are ready for custom search , for example: I have data in my db containing name , email, phn, etc. And if i search for a particular name then it will show all its details. Is that like?
Make it more Creative, Please Watch : th-cam.com/video/cL_dytFgasA/w-d-xo.html
@Chedy Belkaied me too
@@playerpressident9569 What shouldn't work?
@Uzïel T.C. English?
the javascript don't work....
@Chedy Belkaied True
Man, your tutorials completelly changed my professional life. I was a backend developer with basic HTML, CSS and Javascript knowledge, now, thanks to your tutorials I'm a Full Stack Developer and even got a wage raise. Thank you!
Bro is backend easier ??
@@noctis8487 hell nah
@@noctis8487 Actually it is. At least for me. There are less environment variables to worry about and less user misusing. Yet the knowledge I,ve gained with this guy videos gave a boost on my career.
how much time did you took to learn backend developing?? i need some information??
Bro, it's working thanks a lot you are helping many people. I am proud that you are an Indian ☺
but i m proudly say that he is a muslim.. 🔥🔥🔥🔥
Can you assign the codes
Bro I usually don't like music with tech tutorials but this was awesome
this can go insane with parallax background scrolling :o
Why some people give dislike why!
Really thanks online tutorials 😊🖤
I Think Coz They Are Jealous
;P ;P ✌✌✌✌✌✌
Awesome sr really awesome...sr you are the rajnikant off UI u can do anything this...this is the new revolution in UI awesome knowledge u have
Proud to have such a creators in India.....
Thanks for sharing your knowledge. With all the glowing techniques, can make a virtual dance club website now.
bhai tum bahut badhiya web designing karte ho i really like your skills.
Are bhai...thanks 😁
for anyone looking for a hooks version(definitely not optimised) the JS part can be translated to something like this:
const App = () => {
const [scrollbar, setScrollbar] = React.useState('0%')
React.useEffect(() => {
const listenToScrollEvent = () => {
document.addEventListener('scroll', () => {
const totalHeight = document.body.scrollHeight - window.innerHeight
const progressHeight = ((window.pageYOffset / totalHeight) * 100) + '%'
setScrcollbar(progressHeight)
})
}
listenToScrollEvent()
}, )
return (
)
}
export default App
setScrollbar* thanks
Beautiful. This is Css art.
Bro you Are insane love u
Just what I needed. Thanks man!
Man, this guy awesome!! Thanks bro ım using this for my website.
Very very good bravo front-end
Thanks for such a wonderful demo and You have the creativity of another level.
Sir I like your all videos but we also need to know which properties need to take for styling and animation. The reason is here as you are in the Web development project you will be able to understand but as a beginner we want to understood those little tips and tricks in handy other than basic properties.
Thank you this help for my project.
This is really cool, but i would love someone or you to teach my the JavaScript part step by step and what they do because the main reason why we(viewers) go to your channel is to learn something new. Please comment on what each tags and stuff do also i would love a codepen if included in the description.
Thank you so much 💕
Thank you so much 💕
Thank you so much 💕
Thank you so much 💕
Thank you so much 💕
That was so amazing 😍😍😍
The JavaScript is just not working for me, I did it 2 times too, this is the first his tutorials have failed me but his content is super awesome.
Try changing the "Let" within the script to var
Thank you for this tutorial, it helped me out.
Exactly what I needed.
Amazing!
It's really veryy coolllll..
Number 1 very cool
do you have a codepen or github for this because i have a bug in my code and cant figure it out😢
Insane Skills
You r genious man
Really appreciable
Great and inspired! Thank you :)
is there a way to somehow make it dragable with a mouse?
yea, i want to know if this is possible too
Didn't write it but here's how I would have done that:
- Add a keydown event to #progressbar that saves the y position of the mouse and the height of the #progressbar and adds an event listener for mouse move
-At each mouse move calculate the difference between the current mouse position and the first and adding it to the height of progressbar ***
and while doing that scroll the page for the user using
window.scroll({
top: 100,
left: 100,
behavior: 'smooth'
});
-Add a keyup event to remove the keydown event you put before
*** you can also calculate the difference between each move instead of always refering to the first position, not sure which is way more "correct" to do
@@DanielDaniel-xz2yp Can you please write the code for me?
CSS only:
body {
overflow: overlay;
}
This makes original scrollbar tranparent.
::-webkit-scrollbar {
width: 10px;
}
Set the width to what you want.
The rest is the same as in the video.
Explanation: we make originall scrollbar transparent but we can still interact with it. Then we put our gradient scrollbar to it`s position.
Wow incredible
Broo you are realy cool
coollll! but Affect visual focus
Ótimo vídeo parabéns 👏.
nevermind i figured it out . always great content my dude 👍
Thank you for uploading. When I added box-sizing: border-box and browser is full-screened scrollbar does not reach at the bottom. It stops at the middle. How can I fix it?
Awesome !! It would be more fruitful if you could explain all steps and why you are doing so..
Though very helpful and awesome
thank you so much;
Super Cool !!
Bro incredible, wonderful and indescribable content on your channel. Heads off to you.
BTW can you provide the code of scrollbar as I have some bug in my code.
awesome men!
Cool video
bhai op op
eres genial amigo hasta para el publico en español
Excellent
That's super 🆒 ....
ur a legend
Nice.
Could you PLEASE try to do important points a little slow?
I am not understanding some concepts.
Top video
Alhamdulillah Thanks
Please make a video on collision detection between irregular shapes..... Please!!!?
thank you brother
this tutorial is very cool, but i dont know this not working to me , can anybody help me please, scroolbar rgb not showing and that javascript not working
Febrian ian same problem
Mine too
@@Yendi233 use var, not let
Mr. KrAuterkeule already use “var” but not work
is beautifullll
Cool.
Great video and impressive css. BUt disappeared option of scrolling with mouth clicking and dragging how i can add it?
Guys I do have problem in the section... If I do these section at the end scroll bar desapear... as farest I can see ... or I want to ask if is linked to a javacript file that doesn´t appear ? I´m newbie ...
idk why its not working for me .
hey yaa uhh,
There is a problem her. Script don't working
2020 the fast designer.. 😂
Liner gradient not working why? please answer me
Hello its not working for me
me 2
i did what u do but my bar still stock in the top . the bar dont move why?
is there any extention or anything i should install before that ?
i think the error at the javascript part cz when i write (window. onscroll) the color don't change !!
Me too.😥
Osm
Thanks
can someone copy these commands and paste it I have written these comands more tha 5 tims and somewhere mistake is happening so please can someone paste the commands
Thaks You
Cool chanel
You are my best ideal bro. But I tried so many times and it hasn't worked. Please help me with that.
My Code was:
HTML:
Creative Page Scroll Progress Bar
Creative Page Scroll Progress Bar
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Let progress = document.getElementById('progressbar');
Let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function(){
Let progressHeight = (window.pageYOffset / totalHeight) * 100;
progress.style.height = progressHeight + "%";
}
CSS:
* {
margin: 0;
padding: 0;
font-family: consolas;
}
section {
padding: 50px;
background-color: rgb(0,0,0);
}
section h1 {
font-size: 2.5em;
color: rgb(255,255,255);
}
section p {
font-size: 1.2em;
color: rgb(255,255,255);
}
::-webkit-scrollbar {
width: 0;
}
#scrollPath {
position: fixed;
top: 0;
right: 0;
width: 10px;
height: 100%;
background: rgba(255, 255, 255, 0.05);
}
#progressbar {
position: fixed;
top: 0;
right: 0;
width: 10px;
background: linear-gradient(to top, #008aff, #00ffe7);
animation: animate 5s linear infinite;
}
@keyframes animate {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
#progressbar:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe7);
filter: blue(10px);
}
#progressbar:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #008aff, #00ffe7);
filter: blue(30px);
}
May ALLAH bless you. Go ahead!
I like it 👍 can can you give a source code?
How to create a dynamic progressbar in a calendar between two dates?
I want to learn this, may I ask what app you use to write the codes?
Sublime text 3
Its for free and its best app i think
Hello Sir, It Doesn't work for me. Please help me
Woow!
Thank you! Can you do make slide scroll page up and down?
touch lol up , down
It works in Firefox ?
Yes...
@@OnlineTutorialsYT 😍😍
Which type of software used for web development ( html)
well where did you import vanilla javascript.
Does it support mobile view?
Hi, idk why my scrollbar is invisable, i did all exactly like on tutorial. Any ideas ?
I'm nearing a new laptop purchase. Are Mac's really worth it? I do music recording, gaming, coding, video and photo editing. But I found that my built PC's are the only economical way to have it all. These new M2 chip Apples supposedly can handle light gaming, are they worth the Apple tax in anyone's opinion? I like the 5k screens they come with, but I can find info on their response time.
If you want to mostly create music and do photo editing then yes. I'm not so sure at coding but gaming is a big no. I use a windows OS to code and the library of resources is very broad, Linux also but it's not as convenient to me.
For some reason, this does not work for me! I did everything exactly as you, but when open the page it shows as total blank page. I don't know why
In our video css neumorphism working anlong clock
Let day =new .date ();
Remove the .(dot)
But show the syntax error
WOW
Can someone help me? I followed all of the steps but then I wasn't able to see a progress bar😥😥😥...
same here...
How to do the coding and can see the output at same time ???? Pls answer
liveserver vs code
I want to ask. If I not make an element div #scrollpath, does it effect for result?
eh mba yg ada di grup kelasterbuka :v
Help me PLS, the "::-webkit-scrollbar" don't work
Thank you
it is very good on chrome but on Firefox, I can't hide the scroll bar.
is there any way to hide the scroll bar on Firefox??
scrollbar-width:none;
I can't make blur. I use Yandex.Browser
How to make it drag with the mouse
wich thme use ?
where can i start using Html and css ?
Your biggest fan ever plz reply me do you know php and mysql
little bit bro....
What type of things are you searching for? About php and mysqli #smartgamers
@@rashhworld to make a working search bar that works on searching
@@hariommourya2436 what type of search? Universal search or custom search?
If you are ready for custom search , for example: I have data in my db containing name , email, phn, etc. And if i search for a particular name then it will show all its details. Is that like?
@@OnlineTutorialsYT why i have a scrollbar?I follow all your steps.I use firefox.PLS Help
that's genial
its didnt work but thx now i have rgb on my websiteز)