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.