Fullscreen Video Background Fadeout On Scroll | CSS3 & Vanilla Javascript

Подписаться 941 тыс.

Просмотров 24 тыс.

50% 1

Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Video Credit To Pressmaster
Download Like : www.pexels.com...
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 40

@lemueldecastro 4 года назад

TEST IN HERE YT >> let video = document.querySelector('.html5-video-player') window.addEventListener('scroll',function(){ let value = 1 + window.scrollY / -600; video.style.opacity = value;})

@wackyblacky392 4 года назад

THE GOAT

@AaronLunaParrado 4 года назад

This videos are awesome. Every day I wait the notifications from Online Tutorials

@santiagosoluciones 4 года назад

Demasiado buenos sus aportes, gracias por compartir su conocimiento.

@andreluizcostamarques4134 2 года назад

It helps me a lot! but how to do this effect for every section of my page? I mean, i would like this fadeout effect like a transition from section to section and not only for the first section, like your video Tks!

@anandkaushik4926 4 года назад

Sir will u provide explanations?? Pls sir....

@anghuunghia5241 4 года назад

nice

@MalahimTech 4 года назад

Nice

@abhishekpokale3797 2 года назад

From where to get source code

@nikkukumar7538 4 года назад

Amazing bro

@nikkukumar7538 4 года назад

Thanks bro

@mdsakibalhasan4888 4 года назад

love u bro

@sachinkumar-fy2il 4 года назад

Sir, please let me know which software your team is using for coding this awesome designs.

@OnlineTutorialsYT 4 года назад

Subkime text editor

@sachinkumar-fy2il 4 года назад

@@OnlineTutorialsYT Thank you very much sir.

@hamzaradouan4074 4 года назад

@@OnlineTutorialsYT Sublime*

@jovicacicic 4 года назад

All praise for your work. I learned a lot by following your tutorials. I would like you to take a look at my work on my channel and hear your opinion. Thank you.

@chandranshbinjola 2 года назад

Thanks a lot ! really appreciate your efforts !!

@LabhamJain 4 года назад

sir main kaafi time se video player banane ki koshish kr rha hu par vo ban nhi rha jaise ki PC pe hum youtube chalate h toh fullscreen ke baad bhi browser default nhi balki youtube ka khud ka h aata h waise hi mujhe banaane h. bina fullscreen waala toh mujhe aata h please uspe banao 🙏🙏🙏🙏🙏🙏🙏🙏🙏

@boneykingofsomewhere 4 года назад

Fantastic tutorial, you got yourself another subscriber my friend :D Thanks.

@HoangLe-pb1bd 4 года назад

Thanks for your video, thanks for your tips. Thanks for bring them to me!

@TheCodingWeek 4 года назад

Give tips to grow RU-vid channel sir

@LolLol-dj1tf 4 года назад

What is background song name?

@joshuamotovlog6359 4 года назад

You always make helpful videos! Thank you

@saihanachowdhury1499 4 года назад

Awesome ❤ Will you make a video about resume design part?

@JottaArtZOficial 4 года назад

Hace un rato acabo de hablar sobre esto y ahora RU-vid me lo recomienda... Sospechoso.jpg Jaja igual me sirve

@ifeanyinnaemego 4 года назад

Is it responsive

@thegamesshow6573 4 года назад

hi, help me please, Let video and Let value problem.

@carlosdavidvalverdereyes982 4 года назад

necesito el codigo del css de la primera linea, alguien puede ayudarme con eso?

@boyjunet8500 4 года назад

400th likes!

@ennavazhkada5844 4 года назад

This is awesome

@חןברוך-ב6צ 4 года назад

Source code?

@abusayeed7201 4 года назад

nice

@louiseavilezx2b505 4 года назад

Wow

@romuloalves9349 4 года назад

Ótimo vídeo parabéns 👍.

@vasylbats2544 4 года назад

What is -600? Why this number?

@OnlineTutorialsYT 4 года назад

For calulate opacity value between 0-1

@vasylbats2544 4 года назад

@@OnlineTutorialsYT Thank you! I understand it but why 600 (not 400, 500, 700)? Why do you need exactly 600 or it's random? Or it's a window height in pixels? Or it's a threshold (I mean: to make video transparent after 600px scroll)?

@jagannathdas4717 4 года назад

Object-fit css not working, please help what can I do?

@maskman4821 4 года назад

if you want to resize video to fit its container, you have no option but using object-fit, if that's not working in your case, then there is nothing you can do about it !!!