Тёмный

How To Add A Parallax Scrolling To React Website 

Yash Patel
Подписаться 6 тыс.
Просмотров 26 тыс.
50% 1

🚀 React 18 + TypeScript Course - 50% Discount
codewithyash.com/
Do you feel that your website is lacking something? Try adding Parallax Scrolling to your React website, you will see the change right away.
In this tutorial, we will go over 3 ways of creating a Parallax Scrolling Effect using JavaScript, React, and CSS.
We will make use of the library react-parallax for achieving this goal.
🌎 Connect:
GitHub: bit.ly/3XLS9sg
Instagram: bit.ly/3rtx0aw
Twitter: bit.ly/3rl0NC1
📚 Material:
Parallax Package: www.npmjs.com/package/react-p...
Picture Library: pixabay.com/
Project: github.com/theyashpatel/YT-Re...
#reactparallax

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

 

27 май 2022

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 47   
@turing7591
@turing7591 2 года назад
I always thought implementing parallax scroll will be difficult. You made it really easy.
@yashpatel1O1
@yashpatel1O1 2 года назад
I am glad that it helped you :)
@lashagiorgadze1480
@lashagiorgadze1480 Год назад
Your content deserves 100k subs. Would like you to see more animations content in the future using either css or tailwind. cheers mate, keep it.
@yashpatel1O1
@yashpatel1O1 Год назад
Thank you 😊. I am glad you like my content.
@shaivipatel7154
@shaivipatel7154 2 года назад
Alaways wanted to implement Parallax Scroll to my react website. Great video!
@yashpatel1O1
@yashpatel1O1 2 года назад
Thank you 😃
@bamboo5287
@bamboo5287 2 года назад
Best video out there on Parallax Scrolling!!!
@yashpatel1O1
@yashpatel1O1 2 года назад
Haha 😆
@super-TechCctv
@super-TechCctv 5 месяцев назад
I did something right for the first time in my life. Thank you for your assistance., and hard work!
@yashpatel1O1
@yashpatel1O1 5 месяцев назад
Great job!
@directornovela7774
@directornovela7774 2 месяца назад
Simple, straightforward. Thanks dude.
@yashpatel1O1
@yashpatel1O1 2 месяца назад
Glad it helped!
@davidcunha436
@davidcunha436 11 месяцев назад
Dude,. thanks a lot. This is nice. Clear as watter
@yashpatel1O1
@yashpatel1O1 11 месяцев назад
Glad it helped
@mrag792
@mrag792 Год назад
You are awesome. Thank you!
@yashpatel1O1
@yashpatel1O1 Год назад
Thank you :)
@siamaksaadatpur
@siamaksaadatpur 5 месяцев назад
thank's great video
@yashpatel1O1
@yashpatel1O1 5 месяцев назад
Glad you liked it!
@Viva-07
@Viva-07 Год назад
Thank you..great video
@yashpatel1O1
@yashpatel1O1 Год назад
thank you :)
@derekpetersont.8357
@derekpetersont.8357 2 года назад
Hi Yash, I like watching your coding video. You are excellent in explaining hard-to-understand concepts and other technical problems .
@yashpatel1O1
@yashpatel1O1 2 года назад
Thank you Derek 😊
@derekpetersont.8357
@derekpetersont.8357 2 года назад
@@yashpatel1O1 No problem Yash. Love to see more videos from your channel. Do you have a Linkedin account?
@yashpatel1O1
@yashpatel1O1 2 года назад
You can follow me on twitter. @zeroyashp
@yashCoder
@yashCoder Год назад
​@@yashpatel1O1 I'm also Yash😂
@menofsparta1760
@menofsparta1760 2 года назад
ssup bro,,,that was really helpfull thanx alot
@yashpatel1O1
@yashpatel1O1 2 года назад
I am glad that it helped you 😃
@ArvinderSingh-qe6il
@ArvinderSingh-qe6il Год назад
thank you man
@yashpatel1O1
@yashpatel1O1 Год назад
You're welcome!
@nostalgicnow6001
@nostalgicnow6001 2 года назад
Thanks soo much
@yashpatel1O1
@yashpatel1O1 2 года назад
I am glad that you liked the video :)
@iznaur_18
@iznaur_18 7 месяцев назад
NICE 💥👍👍👍👍
@yashpatel1O1
@yashpatel1O1 7 месяцев назад
Thanks 👍
@hemantsharma6829
@hemantsharma6829 Год назад
awesome
@yashpatel1O1
@yashpatel1O1 Год назад
Thank you ☺️
@BarouyrSarkissian
@BarouyrSarkissian Год назад
thank you for the informative video on this npm package! I've been working on it and while everything works great with full-screen, when I shrink it for responsiveness I am facing the following problems: 1) the image shrinks out of proportion (where i actually want it to preserve exact size but get clipped from the sides while we keep the image centered) 2) on any size LESS than full screen, it is showing a gap at the bottom of the image when the image starts shrinking, i guess solving point 1 will solve this too I have tried the props of style/bgStyle/bgImageStyle to try and implement the backgroundSize to be 'cover' and backgroundPosition to be 'center' but nothing is working... So please if you or anyone else can help me target these styling needs with this NPM Package props, it would be highly appreciated! Thank you in advance!
@beingmatheka8356
@beingmatheka8356 Год назад
any solution?
@sayantanaditya7489
@sayantanaditya7489 2 месяца назад
Facing the same issue
@shivampatel8850
@shivampatel8850 2 года назад
I like your explanation and can you do this using style-components a react library
@shivampatel8850
@shivampatel8850 2 года назад
If you can then please make a video on it
@yashpatel1O1
@yashpatel1O1 2 года назад
Ok Shivam. I will look into it. Thank you for watching ☺️
@melaniebrown9633
@melaniebrown9633 4 месяца назад
The image gets squeezed when viewing the website on a phone, how can i fix that?
@yashpatel1O1
@yashpatel1O1 4 месяца назад
h-screen to h-fit
@sayantanaditya7489
@sayantanaditya7489 2 месяца назад
Could you fix it ? Lmk how if you did
@komdiv4906
@komdiv4906 Год назад
thanks. Now i know more zero.
@soulcity7529
@soulcity7529 Год назад
4.14
@soulcity7529
@soulcity7529 Год назад
04:14
Далее
Parallax scrolling in 3 lines of code!
16:08
Просмотров 36 тыс.
This Simple Trick Makes Your Website 83% Better Looking
10:57
How To Make a Parallax Scrolling Website In React
13:28
Layered Parallax Scroll with React & Framer Motion
12:46
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 926 тыс.
The Parallax Effect // 5 Minute WebDev Project
5:01
Просмотров 605 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
How To Debug React Apps Like A Senior Developer
21:07
The Story of Next.js
12:13
Просмотров 556 тыс.