Some Frontend Demos

particle

Canvas implementation of an image particle effect. Preview.

nest

Canvas implementation of the Nest mouse-following lines background effect. Preview.

modular Carousel diagram

A simple carousel component implemented with native JavaScript, allowing multiple instances on the same page. Preview.

3Dbox

A 3D box implemented using CSS3 + JavaScript, allowing view adjustment via scrolling and dragging. Preview.

github404

A GitHub 404 page animation effect implemented with native JavaScript. Preview.

snake

A Snake game implemented in Canvas with only 20 lines of code. Preview.

Frame animation

A frame animation ink splash effect implemented with CSS3. Preview.

waterfull

A masonry (waterfall) layout with lazy loading triggered by scroll events. Preview.

menu

A 3D navigation bar effect implemented using CSS3. Preview.

Throttle and debounce

Implementation of throttling and debouncing techniques.

border-transition

A border animation effect implemented with CSS3. Preview.

bouncing ball

A bouncing ball with fixed speed but random direction. Preview.

clock

A clock implemented using HTML5 Canvas, which reads the system time. Preview.

css3 printf

A typing animation implemented with CSS3, utilizing monospaced fonts and the ch unit. Preview.

dice

A dice drawing effect using CSS3 and flexbox layout. Preview.

drag

A drag-and-drop effect implemented with native JavaScript. Preview.

twoLayoutWays

Two common frontend layout techniques: Double-wing layout and Holy Grail layout. Preview.

touchThrough

A touch event penetration issue on mobile devices. Preview.

License

kongchenglc/Demo

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages