Award Winning Animation With Only 20 Lines Of CSS?

Camille normal you've got to be kidding me you're too good at this I just don't know how you possibly expect us regular people to compete like I just can't explain to you guys how smooth this movement is unless you actually go to this site and try it it's insane all right I'm setting some limits so this doesn't go on too long 10 lines of HTML 20 lines of CSS 30 lines of JavaScript let's see how far we can get we'll start with the body easy 100 this way 100 that way black no scroll bars 7 out of 20 lines used these images got to be contained in something let's call it a track on splash.com copy paste repeat seven more times 10 out of 10 lines used we are done here let's fix these images give them a width give them a height fix the aspect ratio and Center it 14 out of 20 lines yikes okay gotta line them up side by side display Flex add some space between position absolute so I can set the left and top positions to halfway okay left looks good but top doesn't so let's shift things up just a smidge oh wow that's crazy I cannot believe believe I somehow managed to keep that at 20 lines or less great job me all right let's make this thing work I say we start with a panning feature just making it move left to right but wait I can tell there's some trickiness going on here because the images are moving at a different rate of speed compared to the track as a whole noted I don't know much at this point but the one thing I do know is that this effect is based on Mouse movement when I press my mouse down at any given point on the screen and then drag in the Left Right Direction the entire track is moving but how do I know how far or how fast let's see how far I have to drag to get from one end of the track to the other aha so by the time the mouse is halfway across the screen the track has moved 100 of its maximum distance so it's almost like we can imagine there's a slider on the screen and dragging it back and forth controls our track but this slider is extra fancy not only because it's always following our Mouse around waiting for us to click and drag but because it's completely invisible as well so how do we go about creating our magical invisible slider well the very first step to this interaction is pressing our Mouse so let's start by listening to any Mouse down event that may occur when that happens I know I want to keep track of the exact X position the mouse was at so we can use that as the starting point for our invisible slider but where are we going to store that value what if we just created a new custom value on our track element that will update every time the mouse is pressed down all right what happens next step one was Mouse down step two the mouse moves so we need a mouse move listener we need a way to know how far a mouse has traveled relative to the starting point as well as where the other end of our slider should be the relative position is easy enough just subtract the current position from the starting point and we already know the max distance is one half of the width of the window so dividing the relative position by the max distance would convert this value to a decimal and multiplying the decimal by 100 gives us a percentage oh wait my head hurts why were we even doing this again oh right because clicking and dragging halfway across the screen has to move our image track from one end all the way to the other only this functionality has to be possible no matter where we click on the screen so by track tracking the starting point and using it to create a virtual slider using math we can thereby obtain the value we truly need which is the percentage of our slider that has been slid now if we recall earlier we use the translate property to shift our slider up by 50 of its height well thanks to this value here we can perform a very similar manipulation in the left right direction for instance if we set this value to negative 50 percent our track moves fifty percent in the left direction if we set it to negative one hundred percent our track has moved all the way to the opposite end fortunately since we just spent all that time calculating the percentage value of our magic slider the next step is easy we simply use this value to set the Left Right percentage on our track and whoa whoa hang on the mouse move listener has no way of knowing when the mouse is actually down so the track is moving before it's supposed to well since I know the mouse down at position is zero before the mouse is pressed we could just say that if that's the case return immediately and skip the code that's telling the track to move but as soon as the user clicks the value will no longer be zero so we'll have to set it back back to zero when they release the mouse okay so now when I click an image it just drags It Off The Track stupid default Behavior fine we'll just set draggable to false okay no more weird dragging but we're clearly going in the wrong direction here so I guess we gotta flip the sign all right looking good here wait why is the position resetting when I try to drag a second time are you kidding since we're not keeping track of how far we've dragged the slider instead of continuing from where it was left off it just resets back to zero fine okay so just like we stored the mouse down position with the track we're gonna have to store the percentage there too I'm guessing that way we can take the current percentage slid and add it to the last percentage to get the new percentage so we need to store this value every time they release the mouse but how do we get that value from the mouse move listener okay what if we constantly update the percentage here and then use it purely as a way to transfer the value between the two aha there we go now when I click and drag a second time it continues from where we left off rather than resetting back back to the default position of zero boy we really got off in the weeds again there what the heck just happened right so our click and drag was technically working but only if it was the first time the user had ever moved the track what we failed to account for was that the next time the user decides to click and drag their progress wasn't stored anywhere so the track had no way of knowing it should no longer start at zero by constantly tracking the percentage and storing it when they released the mouse we can use that value as the new starting point when determining the percentage the next time phew okay now our movement's solid but I'm noticing our slider doesn't exactly have any limitations at the moment as in I can keep dragging it infinitely in either direction so I'm thinking we gotta take our next percentage value in combination with the min max functions to set a maximum value of 0 and a minimum value of negative one hundred wait how many lines are we at 24 not bad what's left uh oh right that Parallax effect with the images okay so here's what I'm thinking as of now our images are positioned in the center which technically we can split into a vertical Center and a horizontal Center and really these values are just a nickname for 50 but what if we start this one at 100 and then use the exact same percentage value that we used for the track to slide the image positions from 100 down to zero so all we have to do to implement this is Loop over our images replace the first value with next percentage and since next percentage runs from 0 to negative 100 we can just add 100 to it to correct the range okay it's definitely working correctly but it just doesn't quite have that buttery smooth feeling that Camille's did so what if instead of updating the CSS directly we gave them a little animation instead let's replace the style updates with the dot animate function we'll set the duration to 1200 and the fill to forwards so the animation is persisted rather than the default behavior of resetting after completion all right I think we've passed our last line limit so we better stop there take that Camille just kidding you're awesome thank you for inspiring us foreign [Music]

Channel: Hyperplexed

Views: 886,131

Keywords:

Id: PkADl0HubMY

Length: 6min 59sec (419 seconds)

Published: Mon Dec 05 2022