Shulou(Shulou.com)06/03 Report--

This article mainly explains "sharing imaginative front-end coding ideas". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought. Let's study and learn "share imaginative front-end coding ideas"!

1. Animated track and moving cars

This is a track with two cars running around. It is built with HTML, CSS and SVGs.

"CS) Scalextric"-producer Jhey.

By building an animated track, you will learn:

Loop-because you need to recalculate a large number of graphics.

Hypertext markup language (HTML), cascading style sheets (CSS), JavaScript.

Use SVGs, CSS animation, and combine the two.

two。 Clickable French cards

These clickable French cards come in two states: hidden and visible. Each time the card is hidden, it generates a random new value.

"CSS Random Cards"-producer Adir

By building a click French card, you will learn:

Event listener-every time you click on the card, the corresponding instruction will start to run. You need to connect the cards with JavaScript or cascading style sheets (CSS).

Hypertext markup language (HTML), cascading style sheets (CSS), JavaScript.

Track the status of each card and generate a new value for the card.

3. Scroll the message

When you scroll down, the email will be put away; when you scroll up, the email will be opened again.

"Scrolling letters"-producer AaronIker

By building animated scrolling messages, you will learn:

Use the mouse wheel event listener. Whenever the user scrolls the mouse, the letter folds, and vice versa.

How to iterate through and recalculate the drawing when the user scrolls the page.

Let the application run on a smaller screen (such as a phone or tablet).

4. Custom radio button

These are all gorgeous custom radio buttons!

"Custom Radio Buttons"-producer Metty

By building custom radio buttons, you will learn:

Use Hypertext markup language (HTML) and cascading style sheets (CSS).

Encode a semantically correct HTML form.

Use the form and create custom input and radio buttons.

5. QuickchatClone

Quickchat is a dark-themed, refreshing chat room. Have you thought about how to set up a chat room? Here's your chance!

Link: https://codepen.io/aybukeceylan/pen/jOMazYe

By building Quickchat Clone, you will learn:

Concise and modern UI design principles.

Write high-quality hypertext markup language (HTML) and cascading style sheets (CSS).

6. HSL slider

The HSL slider is a slider that can be dragged left or right, and it changes color according to the position of the toggle key. You need to pay attention to how to enable gradients and change the color depth.

By building the HSL slider, you will learn:

When you drag the slider, the graphics and colors are recalculated. But don't forget to use gradient and color depth controllers.

Use color mode (HSL), additive color mode (RGB), hexadecimal color code.

Thank you for your reading. the above is the content of "sharing imaginative front-end coding ideas". After the study of this article, I believe you have a deeper understanding of the problem of sharing imaginative front-end coding creativity. the specific use also needs to be verified by practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.