Create a Snazzy Draggable Parallax Effect with JavaScript

Key Takeaways

I recently stumbled across this Awards site of the day winner and thought this scroll animated Gallery would be cool to cover the position is affected by scroll and you can even drag and move it around so we'll be using HTML CSS and straight up vanilla JavaScript so let's get started enjoy this video check out these icores.com where you can learn UI ux CSS and more with my custom interactive platform that makes learning fun and easy alright here I am we have a empty or not empty almost empty index.html empty in between the body tags that is and we have a CSS main.css file that we're linking here we're using SAS for this and I am currently watching that with the live SAS compiler extension um the only other thing that we'll need to do is just open with live server that's another extension that you can install and we are ready to rock okay so first things first HTML just to give us some scroll room I'm going to have three sections all right so the first one's just going to have an H1 that says scroll down and then we'll have a section with a class of gal as in gallery and then another section at the end just to provide us with enough School uh Direction at the bottom so we have scroll Direction at the top and then bottom and then in the middle is where all the good stuff goes so we're just going to use an unordered list like you use with like who would with a list of cards and then we're gonna have like I don't know we'll just do eight or so so Li times eight or an abbreviation and then we just do one two three four five six seven eight and typically this is where your um your card markup will go I'm not going to bother with that though all right so now we're going to switch gears to our CSS and this of course is very simple as well so we're just going to set the bar the body to margin zero we're also going to have our section so all of our sections are going to have a height of 100 viewport height and then additionally we'll just use the end of type selector so an nth of type one so we're selecting the very first one I'm just going to do display grid Place content Center so that way that text that says scroll down is just centered it's not really pertinent to this tutorial there you go all right and then additionally we will also have an end of type 2 which is our Gallery container all right so inside of there we're going to do the same thing uh or actually we're not we're going to do display grid but we're going to instead just put align content Center which will Center our list vertically right there all right so additionally we'll also put and this part's very important for this effect to work especially the the dragging part overflow is going to be hidden uh and in that way there's no scroll bars on um the right or left or vertically uh with our cards that reside inside of this element here the section element now next up inside of this we have our honored list so let's first get rid of all those ugly circles with style type none all right so now if we go back it should just be wait that didn't work list style type none these should not be there those circles so how did I screw this up oh that's why I had to change that to enter type 2. there we go awesome additionally we're gonna put a gap of two eight two M units between these cards um we'll do display Flex to get them next to each other um and that's good for now we're gonna put Li here and this is where we're going to style up each card very simple with 400 pixels height 400 pixels we'll do background something like light pink all right we'll do a border radius of 0.3 M units curse we're going to change to grab to indicate that we can you know interact with these things with the mouse we're gonna do a display grid uh Place content Center that's just for the little one two three four five six seven eight nine that we put in there and then font size two REM units let's go ahead and save this scroll down and I am zoomed up in my browser big time so uh yeah that's good right there and of course we can see we can't grab it yet or do anything because we need to be able to uh use JavaScript now to to make this thing work so the first thing I want to do is make the uh the sort of side scrolling uh movement work on here so we'll do that with JavaScript and go to uh back to our index.html we'll do inline JavaScript here and the first thing that we need to get access to is to create a property or a variable that gives access to our unordered list itself all right so we're going to say like gallery equals document.query selector UL now of course if this were a real project you have multiple ul's you'd want to use like an ID or something like that instead next up after that we're going to go ahead and we're going to create a function so this function is going to be called move gallery all right so move gallery we're going to use the es6 arrow syntax and inside of move gallery we're going to go ahead and first create another variable called move value remove Val so let move Val equals zero and inside of here we're going to go ahead and initially we're going to set our move vowel to window dot scroll y times point actually we're not going to multiply by anything we're just going to set it to this this is this value is ultimately going to be changed to a different function but for now we're going to leave it at this now additionally what we're going to say is I we're going to take our Gallery we're going to style.transform equals we'll use backticks here rotate Z by negative 5 degrees the reference project had a little bit of tilt so that's why that's there and then we're going to take our translate X by move vowel which is defined above we'll put a percentage at the end of that all right so this in and of itself isn't going to do anything we have to call it somewhere and we're we're going to call it is through request animation frame right here all right so let's see what this happened it's not going to work as expected but I just wanted to do it anyways and the reason we don't see it is because we need to multiply the window.scroll Y value in fact let's go ahead and console log to see what's happening here console log move out let's save this this is going to be called a bunch of times hit F12 to get your uh thing out here or rather it's just going to get called once because this is recursive so what we want to do is additionally call request animation frame right here I forgot about that part there we go now you'll see it is continually climbing up here and we don't see it because this value is too large so we're going to multiply it by .003 or so now we can see that it moves based on our scroll position all right now there's also some other functions that you can use you can actually bake in easing based on the value that we pass in a move vowel so I found this particular function and I'll try to remember it was a list of different functions that do different things and this function right here which I'm not going to attempt to describe although it's not that difficult is an ease out quad type of easing which affects the animation so what we can do is now say ease out quad wrap this around here parentheses and now it just gives you a different type of feel based on the scroll uh animation it's a little bit faster it's just a little bit more interesting so it's a stylistic approach good stuff now let's get the dragging work working rather and so this one's going to rely on two different event listeners on our actual UL element one for Mouse down one for Mouse move and then finally one for Mouse up when you release because we have to set a few properties so with that said those properties that we need to add well first we need to get a reference to our parent container we're going to call this wrapper and we're going to get gal right here the class of gal this is the one right here all right so additionally we're also going to get access to we're going to define a a variable called dragging let dragging equals false so it's a Boolean value but what's also declare a few other properties while we're in here Mouse location and gallery location all right so what we'll do is down here we're going to go ahead and add on the gallery itself remember Gallery is defined here and it's our unordered list so if anybody clicks on our unordered list we're going to add an event listener and in this case it's going to be Mouse down and we're going to pass in a function that doesn't yet exist called drag start now we're going to shift alt down arrow key a couple times to replicate that this is going to be drag active and this would be drag stop now we have to adjust these parameters these actions that it can listen to Mouse down Mouse move and mouse up so now we have to Define these three functions I in order to do something here uh and so what we'll do is I guess we can place these let's put these uh down here for now all right so first let's create our drag start all right and this is going to take an event and what we want to do is say dragging equals true so what exactly is happening here well we defined a dragging by default is going to be false because when somebody loads the page they're not dragging on the gallery all right so by when the mouse is down add on the gallery on the on the honored list element or the individual Li elements as well then we basically call this function that will set this dragging to true as long as the mouse is down all right well that doesn't really that's not exactly entirely accurate it's it's it just it's going to fire once once that uh Mouse has been down all right after that I we're gonna go ahead and also set our Mouse location which is defined right here we're going to say mouse location equals e again this is passed right through here page X our event page X so what exactly is that that's basically getting us a value of where the mouse has been clicked in on the horizontal axis on the x-axis and so we can do a console log Mouse location which is just e.page X for now and we'll come back here hit F12 all right uh in drag actives not defined don't don't worry about that so when I click here I already clicked here once we got 957 click over here 497 click over here 1250 is just giving us where we click initially all right so let's remove that we also need to get the gallery location scroll left position so what does that mean one second let's just do Gallery location equals wrapper now remember this is where we have our wrapper which is the element that I is you know inside of it essentially so wrapper dot scroll left now if we console log this let me go back we should see that if we click it it's at zero see how it says zero I'm going to click it it's always going to be at zero for now um scroll left is basically just getting how far this element inside of it I based on the fact that it has overflow hidden I how much it has been scrolled left over because when we drag it we're going to be changing that position and we need to know that so that it stays in its position and we don't get a reset after dragging or and letting go essentially okay so that's it for that function now our drag stop function is going to be very similar so this is going to be set to false and we just leave these two elements alone right there okay finally we're going to have our dragging or drag active function all right so inside of here we're going to say if dragging we're going to return so basically drag active so should only be firing if dragging is set to false if that makes sense now what we want to do is Define a variable called offset and we're going to subtract the difference from the current event page X and this is going to fire rapidly because this is being called every time the mouse is moving uh and so we take e.page X and we subtract that from Mouse location all right all right so the mouse location uh is initially set here all right additionally what we want to do now now that we have the offset it say wrapper dot scroll left equals Gallery location minus the offset all right so Gallery location again is set to the scroll left position and then the E Dot Page X I giving us to the offset this will result in a positive or negative value but it'll allow us to actually move the the actual Gallery all right and let's go ahead and check it out scroll down it works drag it look at that awesome awesome stuff