Create A Simple Parallax Scrolling Webpage In React

hey guys and welcome back to another video so in today's video we'll be looking into how you can achieve a simple Parallax event in react so Parallax event are also known as scroll events which you might have came across in you know multiple web pages um example apple.com or you know samsung.com definitely there they are you know putting in a lot of Parallax effect in their web pages so uh let's just begin with a simple demonstration on how basically this looks so ah so this is a simple uh web page there are four elements within this so this is a background and this is a foreground and this is a text so Parallax even basically or the scroll event basically works on scrolling the web page so as I scroll to the bottom you can see the foreground and the text at the center disappears and on scrolling up you know it comes back so this is how this is the simplest example a parallax uh scroll event can be defined so in react how you can achieve this so basically we have a npm package which is react p l x and uh via this you can achieve a simple Parallax effect in react now this is a documentation and it is pretty straightforward you can also click on this live demo I'll just navigate you to this so as you can see this is a good demonstration of scroll event as well there are multiple components moving over here and there so with this you can achieve this and uh it is basically you know a simple react component and within that you apply your content now uh let's see how we did achieve this scroll event in react now I'll just walk you through the code quickly so this is our react app and this is app.jsx now we have imported the react plx library and there are certain aspects of this when implementing it now the plx component consists of a prop that is Parallax data now this basically takes an array and these are some you know variables with start and ease and and properties start is basically the scroll from where you're starting to the end so till uh till uh when you're basically scrolling this page two using is some ah is a property that you are being provided in this package and what you actually want to achieve so start value and end value um these are basically you know is as the scaling inputs are required uh to this component now you can also provide styles to this so style is also one of the prop uh if you are applying it to an image you can definitely uh provide this style prop and as you can see we have a background image where we have applied this specific style drop property now this was for the background which is this one and now let's navigate to another part this one is for the text also simple what would be the scale range and what would be it scaling in and out so what is the start value and the end value and a style property similarly for the foreground we have provided it so this is a foreground and um ah what ah the what should be the opacity so this is the opacity uh start and end value so opacity is basically the text which is getting visible and you know appeared on the page so this is basically a quite uh the simplest form of how you can you know achieve a simple scroll event there are multiple ways you know it can be achieved using CSS and other libraries as well but uh this specific Library you know quite simplifies things and you just need to provide a specific amount of specific amount of properties which it requires and you know it will allow you to ah perform that scrolling scroll function scroll event basically and yeah there is no other component involved in this so this entirely is handled by this specific package and I think you can try or experiment few things out and uh the code for this will be available in the description and if you want to uh you know if you have any concerns queries or questions you can definitely uh hit me up in the comment so yeah now this was it for this video guys hope you guys like I hope you guys liked it and uh let me know if you have any questions regarding this so yeah uh thanks for watching

Channel: Okay Dexter

Views: 15,261

Keywords: reactjs, tutorials, okaydexter, simple, http, get, post, request, httprequest, easy, mrbeast, like, subscribe, devto, coder, code, put, delete, modal, signup, form, loginform, videomodal, videos, guide, youtubeapi, dataapiv3, searchapp, github, demoapp, api, carousalcomponent, 2023, parallaxeffect, scrolling

Id: fM2MA2PTckM

Length: 5min 54sec (354 seconds)

Published: Sat Feb 04 2023