Odwzorowanie świetnego efektu animacji w JS + CSS (film, 7 minut)
W najnowszym filmie na kanale Hyperplexed, Camille Mormel zdradza tajniki tworzenia interaktywnego slidera. Zaczął od ustalenia limitów dla swojego kodu: 10 linii HTML, 20 linii CSS i 30 linii JavaScript, co jest nie lada wyzwaniem. Camille postanowił skupić się na stworzeniu prostego projektu, w którym można przesuwać obrazy w lewo i w prawo. Jego podejście było bezpośrednie; rozpoczął od podstawowego stylu ciała oraz strukturze dla obrazów, aby zapewnić, że wszystko jest poukładane i wystarczająco przestrzenne. Po przetestowaniu pierwszych elementów, zdołał stworzyć wizualnie przyjemny układ z użyciem CSS, który zajął tylko 14 z 20 liniowego limitu.
Camille powoli wprowadzał więcej funkcji, od panningu do precyzyjnego przesuwania obrazów. Zauważył, że obrazy poruszają się z różną prędkością w porównaniu do toru, co było interesującym wyzwaniem. Wskazał, że kluczem do tego efektu jest odpowiednie śledzenie ruchu myszy i kalkulowanie odległości, jaką przebywa kursor. Wyeliminował pięćdziesiąt procent w niepewnym kierunku, określając dokładność działania swojego slidera. Co ciekawe, w tym procesie odkrył, że jego "niewidzialny suwak" może być świetnie wspomagany przez matematyczne obliczenia, co pozwoliło na lepsze kontrolowanie przesunięcia toru obrazów.
Dalej zwrócił uwagę na problem z domyślnym zachowaniem elementów interaktywnych, które musiał zniwelować. Wprowadził kilka poprawek, aby uniknąć problemów związanych z resetowaniem pozycji slidera. Camille zaproponował stworzenie nowej wartości, która przechowuje procentowy postęp, co pozwoliło na kontynuowanie przesuwania od ostatniego miejsca, w którym zatrzymał się użytkownik. Jego krok po kroku wyjaśniał jak utrzymać idealną kontynuację interakcji z użytkownikami, co jest kluczowe w projektowaniu UX.
Kiedy slider został naprawiony i działał tak, jak trzeba, Camille skoncentrował się na dodaniu efektów parallax do swojego projektu. Pomysł na przewinięcie, które wykorzystuje zmiany w pozycji niezależnie od ruchu suwaka, dodał do jego projektu dodatkowego szczegółu. Dzięki temu obrazy mogły się przemieszczać płynniej. Camille zdecydował się na dodanie animacji, aby całość była bardziej estetyczna i zgodna z nowoczesnymi standardami stylistycznymi. Ruch wtedy stał się naprawdę płynny, co było jego celem od samego początku. Warto zaznaczyć, że w momencie pisania tego artykułu film Hyperplexed osiągnął 2 025 239 wyświetleń oraz prawie 95 000 polubień, co świadczy o rosnącej popularności kanału i jakości jego charakterystycznych treści.
Toggle timeline summary
-
Wprowadzenie do umiejętności Camille Mormel i wyzwania konkursowego.
-
Ustawienie limitów w wyzwaniu kodowania: 10 linii HTML, 20 linii CSS, 30 linii JavaScript.
-
Rozpoczęcie kodowania od zdefiniowania struktury strony internetowej.
-
Wstawianie obrazów do układu za pomocą Unsplash.
-
Dostosowanie wymiarów obrazów i wyśrodkowanie.
-
Używanie CSS Flexbox do układania obrazów obok siebie.
-
Dostosowanie funkcji panoramowania dla płynnego ruchu.
-
Wyjaśnienie interakcji z ruchem myszki do przeciągania.
-
Używanie pozycji myszy do kontrolowania ruchu ścieżki obrazków.
-
Nasłuchiwanie zdarzeń naciśnięcia myszy w celu śledzenia pozycji początkowej.
-
Implementacja nasłuchiwacza ruchu myszy w celu obliczenia ruchu.
-
Wyjaśnienie, jak manipulować ścieżką w zależności od ruchu myszy.
-
Obliczanie procentowego ruchu dla suwaka.
-
Rozwiązywanie problemów z ruchem przed naciśnięciem myszy.
-
Naprawa problemu z przeciąganiem domyślnych obrazów poprzez ustawienie draggable na false.
-
Aktualizacja zapisanych procentów dla płynnego przeciągania.
-
Wprowadzenie limitów ruchu suwaka, aby zapobiec overflow.
-
Dodanie efektu paralaksy do obrazów w celu lepszej atrakcyjności wizualnej.
-
Animowanie ruchu obrazów dla płynniejszego doświadczenia użytkownika.
-
Zakończenie procesu kodowania z przyjaznym żartem w kierunku Camille.
-
Wyrażenie wdzięczności za inspirację Camille.
Transcription
Camille Mormel, you've gotta 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. Seven out of 20 lines used. These images gotta be contained in something. Let's call it a track. Unsplash.com, copy, paste, repeat seven more times. 10 out of 10 lines used. We're 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 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 the 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 down. So let's start by listening to any mouse down event that may occur. When that happens, I know I wanna 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 gonna 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 our 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 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 used 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%, our track moves 50% in the left direction. If we set it to negative 100%, 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, 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 to zero when they release the mouse. Uh, okay, so now when I click an image, it just drags it off the track. Aw, 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 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 release 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 zero and a minimum value of negative 100. Wait, how many lines are we at? 24, not bad. What's left? 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 zero 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 .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'd better stop there. Take that, Camille. Just kidding, you're awesome. Thank you for inspiring us.