Award Winning Animation With Only 20 Lines Of CSS?
Summary
TLDRIn this script, the speaker is amazed by the smooth movement of a website they're working on, setting limits to their coding challenge with 10 lines of HTML, 20 of CSS, and 30 of JavaScript. They create a track for images, fix their display, and implement a panning feature based on mouse movement. The challenge involves creating an invisible slider that responds to clicks and drags, calculating the percentage of movement for a smooth parallax effect. The process involves handling mouse events, translating the track, and animating the images for a seamless user experience.
Takeaways
- 😲 The speaker is impressed by the smoothness of the site's movement and challenges regular people to compete with it.
- 📝 The speaker sets limits on the amount of code to be used: 10 lines of HTML, 20 lines of CSS, and 30 lines of JavaScript.
- 🖌️ The body of the site is styled to be a full-size black area with no scrollbars, using 7 out of 20 lines of CSS.
- 🖼️ Images are contained within an element called 'track', and the process of copying and pasting is repeated seven times, using up 10 out of 10 lines of HTML.
- 🔍 The images are given a fixed width and height to maintain the aspect ratio and are centered on the page, using 14 out of 20 lines of CSS.
- 🔄 The speaker discusses using display Flex to align images side by side and position absolute to set left and top positions, keeping the code under 20 lines.
- 🔄 The speaker realizes the need for a panning feature and notes the challenge of images moving at different speeds compared to the track.
- 🖱️ The interaction starts with a mouse down event, and the speaker decides to store the exact X position of the mouse as the starting point for an invisible slider.
- 📏 A mouse move listener is implemented to calculate the relative position of the mouse and convert it to a percentage to move the track.
- 🔄 The speaker corrects the direction of the track movement by flipping the sign and stores the percentage value to continue from the last position after releasing the mouse.
- 🚫 The speaker addresses the issue of the slider moving infinitely by setting minimum and maximum values using the percentage value.
- 🌐 A parallax effect is implemented by adjusting the vertical and horizontal center of the images based on the percentage value of the slider.
- 🎨 To enhance the smoothness, the speaker suggests animating the position changes of the images using a custom animation function.
Q & A
What is the primary challenge the speaker is addressing?
-The speaker is addressing the challenge of creating a smooth, interactive movement effect within strict line limits for HTML, CSS, and JavaScript.
What are the specific line limits set for HTML, CSS, and JavaScript?
-The specific line limits are 10 lines of HTML, 20 lines of CSS, and 30 lines of JavaScript.
How does the speaker intend to contain the images?
-The speaker plans to contain the images by creating a track element where the images are copied and pasted multiple times.
What method is used to center the images and ensure they maintain the correct aspect ratio?
-The images are centered and the aspect ratio is maintained using CSS properties like width, height, and position adjustments with Flexbox and absolute positioning.
What functionality does the speaker want to achieve with mouse movement?
-The speaker wants to achieve a panning effect where the track moves left and right based on mouse movement, creating a smooth interaction.
How does the speaker calculate the distance the track should move based on mouse movement?
-The distance is calculated by tracking the starting X position of the mouse on mousedown, then using the relative position during mousemove to determine how far the track should move, converting this to a percentage of the maximum distance.
Why does the speaker mention the need for an 'invisible slider'?
-The 'invisible slider' concept helps in visualizing and implementing the interaction where the track moves in response to the mouse movement, even though there is no visible slider element.
What issue does the speaker encounter with the initial implementation of the click and drag feature?
-The initial issue is that the track position resets when dragging a second time because the progress of the slider was not stored, causing it to start from zero each time.
How does the speaker solve the problem of the track resetting its position?
-The problem is solved by constantly tracking and storing the percentage of the slider's position whenever the mouse is released, allowing the next drag to continue from the last position.
What additional effect does the speaker want to add to the images, and how is it achieved?
-The speaker wants to add a parallax effect where the images move at different rates. This is achieved by adjusting the percentage values used to position the images and implementing animations to ensure smooth transitions.
Outlines
😲 Mastering Web Design with Advanced CSS and JavaScript Techniques
The speaker expresses astonishment at their own proficiency in web design, setting limits on the amount of code used for HTML, CSS, and JavaScript to challenge themselves. They demonstrate creating a responsive design with a 'track' for images, adjusting their size, aspect ratio, and alignment. The speaker then introduces a panning feature based on mouse movement, explaining the technical steps to create an invisible slider that responds to mouse down and move events, using custom values and calculations to achieve smooth, continuous motion.
🔄 Implementing a Dynamic Slider and Parallax Effect with CSS Animations
After resolving issues with the initial click-and-drag functionality, the speaker discusses storing the user's progress to maintain continuity between interactions. They then address the lack of limitations in the slider's movement by implementing min and max functions. The speaker also introduces a parallax effect for images, adjusting their vertical and horizontal centering based on the slider's position. To enhance the user experience, they replace direct CSS updates with animations, ensuring a smooth transition effect that persists after the animation completes.
Mindmap
Keywords
💡HTML
💡CSS
💡JavaScript
💡Aspect Ratio
💡Flexbox
💡Mouse Event Listeners
💡Translate Property
💡Parallax Effect
💡Drag and Drop
💡Animation
💡Custom Value
Highlights
Camille's impressive skills are highlighted, making it difficult for regular people to compete.
The movement's smoothness can only be truly appreciated by visiting the site and trying it out.
Setting limits on HTML, CSS, and JavaScript lines to challenge the coding process.
Starting with the body element, setting dimensions and eliminating scroll bars.
Efficiently using 7 out of 20 lines for initial CSS setup.
Images are contained within a 'track' element for organization.
Fixing image dimensions and aspect ratio with CSS to center them.
Using Flexbox to align images side by side with space between them.
Positioning images with absolute positioning to adjust their alignment.
Implementing a panning feature that moves the track left to right based on mouse movement.
Understanding the relationship between mouse movement and track movement speed.
Creating an invisible slider controlled by mouse down events.
Using mouse move events to calculate the relative position and adjust the track's movement.
Storing the mouse down position as a custom value on the track element.
Preventing the default dragging behavior by setting the draggable attribute to false.
Storing and updating the percentage value of the slider for continuous movement.
Adding a parallax effect to images by adjusting their vertical and horizontal centering.
Animating the images' movement for a smoother visual experience.
Incorporating min and max functions to limit the slider's movement range.
The final implementation combines various techniques for a dynamic and interactive user experience.
Transcripts
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]
浏览更多相关视频
JQUERY BASIC - Pertemuan 5 Part 1
Build this JS calculator in 15 minutes! 🖩
Handling Events | Mastering React: An In-Depth Zero to Hero Video Series
Animate nav on scroll - CSS-only & easy to customize
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 2
I Built JavaScript-Powered Minimap Scroll Animation
5.0 / 5 (0 votes)