KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

mini-samples-great-tricks

★ 81 Open GitHub ↗

This repository includes mini samples using CSS animations or JS libraries to create sliders, dashboards, landing pages and login forms. You can find more from my CodePen profile.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## <img src="https://user-images.githubusercontent.com/13468728/233831804-0f5c7ee5-d654-4c13-9c77-a5bd6dc4fe74.jpg" title="great tricks" alt="great tricks" width="50" height="50"/> Mini Samples Great Tricks

This repository includes mini samples using CSS animations or JS libraries to create sliders, cards, dashboards, landing pages, and login forms.

#### Tools used in samples:

![HTML5](https://img.shields.io/badge/-HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)&nbsp;
![CSS3](https://img.shields.io/badge/-CSS3-1572B6?style=for-the-badge&logo=css3)&nbsp;
![JavaScript](https://img.shields.io/badge/Javascript-F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black)&nbsp;
![Swiper](https://img.shields.io/badge/swiper%20js-4287F5?style=for-the-badge&logo=swiper&logoColor=white)&nbsp;
![Green Sock](https://img.shields.io/badge/green%20sock-88CE02?style=for-the-badge&logo=greensock&logoColor=white)&nbsp;
![ScrollReveal](https://img.shields.io/badge/scrollreveal-8B49B8?style=for-the-badge&logo=scrollreveal&logoColor=white)&nbsp;
![Chart.js](https://img.shields.io/badge/chart.js-F5788D.svg?style=for-the-badge&logo=chart.js&logoColor=white)&nbsp;
![Figma](https://img.shields.io/badge/figma-6600CC.svg?style=for-the-badge&logo=figma&logoColor=white)&nbsp;
![Particles JS](https://img.shields.io/badge/particles%20js-10135E?style=for-the-badge&logo=particlejs&logoColor=white)&nbsp;
![tsParticles](https://img.shields.io/badge/tsParticles-262852?style=for-the-badge&logo=particlejs&logoColor=white)&nbsp;

##### Note: These projects are licensed under the Creative Commons Attribution-NonCommercial 4.0 International License. You may use, share, and adapt these works for non-commercial purposes, provided you give appropriate credit. For more details, visit [Creative Commons Attribution-NonCommercial 4.0 International License](https://creativecommons.org/licenses/by-nc/4.0/).

### Slider

|  #  | Samples                                                                                                                                            |
| :-: | :------------------------------------------------------------------------------------------------------------------------------------------------- |
| 01  | [Card Effect Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/card-effect)                                                    |
| 02  | [Neumorphic Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/neumorphic-slider)                                               |
| 03  | [Responsive Slider with Scrollbar](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/responsive-slider-with-scrollbar)                 |
| 04  | [Background Slider with The Hero](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/background-slider-with-the-hero)                   |
| 05  | [Slider with Two Different Sidebars](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/slider-with-two-different-sidebars)             |
| 06  | [Animated Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/animated-slider)                                                   |
| 07  | [Animated Slider II](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/animated-slider-2)                                              |
| 08  | [Cube Effect Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/cube-effect-slider)                                             |
| 09  | [Music Player with Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/music-player-with-slider)                                 |
| 10  | [Vertical Slider with Clip-Path Animation](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/vertical-slider-with-clip-path-animation) |
| 11  | [Swiper Card Slider with Music Player](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/card-slider-music-player)                     |

### Cards

|  #  | Samples                                                                                                                  |
| :-: | :----------------------------------------------------------------------------------------------------------------------- |
| 01  | [Card Hover Effect](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/card-hover-effect)                     |
| 02  | [80s Music Facts - Animated Cards](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/80s-music-fact)         |
| 03  | [Expanding Cards](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/expanding-cards)                         |
| 04  | [Stacked Cards with Autoplay](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/stacked-cards-with-autoplay) |

### Login Form

|  #  | Samples                                                                                                     |
| :-: | :---------------------------------------------------------------------------------------------------------- |
| 01  | [Form Validation](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/clientside-form-validation) |
| 02  | [Login Form with Snow](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/login-form-with-snow)  |

### Dashboard

|  #  | Samples                                                                                                                                 |
| :-: | :-------------------------------------------------------------------------------------------------------------------------------------- |
| 01  | [Fitness App Dashboard](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/fitness-app-dashboard)                            |
| 02  | [Responsive Dashboard with Sliders and Music Player](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/music-app-dashboard) |
| 03  | [Responsive Dashboard with Doughnut Chart](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/event-dashboard)               |

### Landing Page

|  #  | Samples                                                                                                                 |
| :-: | :---------------------------------------------------------------------------------------------------------------------- |
| 01  | [Octoberfest Landing Page](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/octoberfest-landing-page)      |
| 02  | [Mentorship Landing Page](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/mentorship-landing-page)        |
| 03  | [Retrobeats Landing Page](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/retrobeats-landing-page)        |
| 04  | [Responsive macOS Style Portfolio](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/macos-style-portfolio) |

### Game

|  #  | Samples                                                                                          |
| :-: | :----------------------------------------------------------------------------------------------- |
| 01  | [Guess the Movie](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/guess-the-movie) |

### Parallax Effect

|  #  | Samples                                                                                                |
| :-: | :----------------------------------------------------------------------------------------------------- |
| 01  | [Parallax Effect](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/parallax-effect)       |
| 02  | [Halloween Parallax](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/halloween-parallax) |

### Scroll Animation

|  #  | Samples                                                                                                                  |
| :-: | :----------------------------------------------------------------------------------------------------------------------- |
| 01  | [Collage Art - Scroll Animation and Lightbox](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/collage-art) |

### Author

- Github - [@ecemgo](https://github.com/ecemgo)
- CodePen - [@ecemgo](https://codepen.io/ecemgo)
- YouTube - [@ecemgokdogan](https://www.youtube.com/channel/UCktkPv17cw27PaFGcnZa_aQ)
- Twitter - [@ecemgo](https://twitter.com/ecemgo)

mini-samples-great-tricks

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README