Award Winning Animation With Only 20 Lines Of CSS?

Summary

In 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

00:00

😲 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.

05:01

🔄 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.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard language used for creating the structure and content of web pages. In the video, HTML is mentioned as the starting point for the project, with a limit of 10 lines, indicating the importance of concise and efficient coding in web development.

💡CSS

CSS stands for Cascading Style Sheets, a language used for describing the presentation of a document written in HTML or XML. The script mentions a 20-line CSS limit, emphasizing the need for styling the webpage within constraints, which is a common challenge in front-end development.

💡JavaScript

JavaScript is a high-level, interpreted scripting language that is a core technology, alongside HTML and CSS, for building interactive web applications. The script sets a 30-line limit for JavaScript, highlighting the task of creating dynamic functionality within a limited code scope.

💡Aspect Ratio

The aspect ratio is the ratio of the width to the height of an image or screen. In the script, maintaining the aspect ratio is crucial for ensuring images look correct when resized, as it is mentioned when fixing the images' width and height.

💡Flexbox

Flexbox is a CSS layout mode that allows for the arrangement of elements in a single dimension, either as a row or a column. The script discusses using Flexbox to align images side by side, demonstrating its utility in creating responsive and flexible layouts.

💡Mouse Event Listeners

Mouse event listeners are used in JavaScript to detect and respond to user interactions with the mouse, such as clicks or movements. The script describes implementing mouse down and move listeners to create an interactive feature, illustrating the concept of event-driven programming.

💡Translate Property

The translate property in CSS is used to move an element from its current position without changing its position in the document flow. The script refers to using the translate property to shift the slider and track elements, showcasing its role in creating dynamic visual effects.

💡Parallax Effect

The parallax effect is a visual phenomenon where objects at different distances appear to move at different speeds when viewed from a moving vantage point. The script discusses creating a parallax effect with images, where the background moves slower than the foreground, adding depth to the web page.

💡Drag and Drop

Drag and drop is a user interface feature that allows users to move or position elements by clicking, holding, and then dragging the mouse. The script mentions issues with the default drag behavior and how to disable it, which is a common interaction pattern in web applications.

💡Animation

In web design, animation refers to the process of creating motion or the illusion of motion in the user interface. The script talks about adding animation to the movement of images for a smoother effect, demonstrating how animation can enhance user experience.

💡Custom Value

A custom value in web development often refers to a user-defined variable or property that is not part of the standard HTML or CSS specifications. The script mentions creating a custom value on the track element to store the mouse down position, illustrating the concept of state management in interactive web elements.

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]