You-Dont-Need-JavaScript README

The project's README from github.com/you-dont-need/You-Dont-Need-JavaScript. As one markdown file: README.md.

English | 简体中文

You Don't Need JavaScript

Join the community on Spectrum

Please be aware that the demos may exhibit significant accessibility issues, such as problems with keyboard navigation, speech synthesis, and progressive enhancement or degradation.

Style Guide:

## <a id="DemoSubject"></a>Carousel

[<img src="images/image1.png" height="230" title="Demo 1">](http://url-to-page)
[<img src="images/image2.png" height="230" title="Demo 2">](http://url-to-page)
[<img src="images/image3.png" height="230" title="Demo 3">](http://url-to-page)

**[⬆ back to top](#quick-links)**

EARTH

EARTH

⬆ back to top

Image Hover Effect

Image-Hover-Effect

⬆ back to top

CSS Toggle

Toggle Toggle

⬆ back to top

Text Spoiler Effect

Light Theme:

[

Your browser does not support the video tag. ](http://url-to-light-theme-page)
Dark Theme:

[

Your browser does not support the video tag. ](http://url-to-dark-theme-page)

⬆ back to top

Blog Post Cards

⬆ back to top

Faq Section

⬆ back to top

Pricing Table

⬆ back to top

Social_media_icons

[]

⬆ back to top

Accordion / Toggle

⬆ back to top

Animated Buttons

⬆ back to top

 

Bus

Captain America Shield

⬆ back to top

Carousel-Nepal

⬆ back to top

Counter of checked check-boxes

⬆ back to top

Climbing Loading

⬆ back to top

Flip on click

⬆ back to top

Flip on click

⬆ back to top

Animated Box

⬆ back to top

Analog-clock

⬆ back to top

⬆ back to top

Badge

⬆ back to top

Badge

⬆ back to top

Font-Face (Latin)

⬆ back to top

Website Demo

⬆ back to top

Travelling Website

⬆ back to top

Info on hover/ Popover

⬆ back to top

⬆ back to top

Image Comparison Slider

⬆ back to top

[]
[]

⬆ back to top

Loaders

CSS-Loader-Purna

⬆ back to top

MasterCard

⬆ back to top

Dropdown Menu

⬆ back to top

Mobile menu off canvas

⬆ back to top

Burger Menu

⬆ back to top

Button Animation

⬆ back to top

Button Rotate and Ripple Animation

⬆ back to top

Button Hover Click Animation

⬆ back to top

Morph Loader

⬆ back to top

Compass Loader

⬆ back to top

Fancy Menu

⬆ back to top

⬆ back to top

Modal/Popup

⬆ back to top

Mondrian Composition

⬆ back to top

Mouse tracking

⬆ back to top

NavBar

⬆ back to top

Parallax scrolling

⬆ back to top

Tabs

⬆ back to top

Time Travel

A pure CSS time travel timeline that allows you to explore different eras.

⬆ back to top

Toast Notifications

⬆ back to top

Flip grid

⬆ back to top

Flipbook Storyboard

⬆ back to top

Todo List

⬆ back to top

Tooltips

Treeview

⬆ back to top

Twitter Heart Animation

⬆ back to top

Tri Color Loader

⬆ back to top

Traffic Light Loader

⬆ back to top

Book Animation

⬆ back to top

Dynamic Image Colorizing

⬆ back to top

DarkMode

⬆ back to top

Ripple Effect

⬆ back to top

Responsive Counter Showing # of Items That Didn't Fit Screen

⬆ back to top

Readar Loader

⬆ back to top

Resizable Split Panel

⬆ back to top

A login Page with Glassmorphism Effect

[]

⬆ back to top

Neumorphism Card Design

⬆ back to top

Neon Button

⬆ back to top

Neon Card

⬆ back to top

Night City

A pure CSS animation showcasing a dynamic night city scene with interactive views. Features a detailed cityscape with animated elements and a road scene with moving vehicles, all without JavaScript.

⬆ back to top

Netflix Clone Demo

⬆ back to top

Shake Button

⬆ back to top

Shake Button

⬆ back to top

CSS Form Handling

⬆ back to top

Download_buttons

⬆ back to top

Download buttons

⬆ back to top

Dog Box Animation

⬆ back to top

Thankyou-Animation

⬆ back to top

Square_rotation_animation (Latin)

⬆ back to top

Switch

⬆ back to top

Bonfire

⬆ back to top

Scenery

⬆ back to top

Bubble

⬆ back to top

Flower

⬆ back to top

Jumping Ball

⬆ back to top

Light Bulb Animation

⬆ back to top

Lighthouse Scene

⬆ back to top

Loading Css effect

⬆ back to top

Lego Loader

⬆ back to top

⬆ back to top

Smoke

⬆ back to top

Loader

⬆ back to top

Spiner

⬆ back to top

Fire

⬆ back to top

Flame

⬆ back to top

Shuffling squares

⬆ back to top

Floating-labelV2

⬆ back to top

scary-animation

⬆ back to top

Scroll Video Cinematic Animation

A modern, interactive scroll-driven video animation created with pure CSS. Features cinematic video effects, gradient overlays, and smooth scroll animations - no JavaScript required!

⬆ back to top

⬆ back to top

growing-flower

⬆ back to top

Playing Card Animation

⬆ back to top

Star Wars Intro

⬆ back to top

Gradient Animation

⬆ back to top

Zoom when hover

⬆ back to top

Floating-labelV2

⬆ back to top

CSS Tables

Screenshot 2023-10-23 144658

⬆ back to top

3D Transform

animation

⬆ back to top

Animated Button

⬆ back to top

Css FLEX

Screenshot 2023-10-23 141538

Coffee-Animation

⬆ back to top

Basketball-Animation

⬆ back to top

Business-Card

img_source

⬆ back to top

SolarSystem

img_source

⬆ back to top

Spaceship

img_source

⬆ back to top

Timeline

img_source

⬆ back to top

Radial Color Puslar

⬆ back to top

Retro Loader

⬆ back to top

Pendulum

img_source

⬆ back to top

SlicedButton

img_source

⬆ back to top

Rating Star

img_source

⬆ back to top

DVD Screen Saver

img_source

⬆ back to top

ProfileCards

img_source img_source img_source img_source img_source img_source img_source

⬆ back to top

RotateSquare

[]

⬆ back to top

Stickman Animation

⬆ back to top

Clock App

img_source

⬆ back to top

MakemyTrip

img_source

⬆ back to top

Zomato

img_source

⬆ back to top

3D card flip transition

[]

⬆ back to top

Baby Yoda Animation CSS

⬆ back to top

Debit Card Hover Effect

Screenshot 2024-10-11 103321

⬆ back to top

Progress bar on scroll

⬆ back to top

Password Strength Checker

⬆ back to top

Horizontal Image Slider

⬆ back to top

Mutli Step Checkout

⬆ back to top

Download the demo video

⬆ back to top

Piano

⬆ back to top

Interactive Resume

An interactive resume built entirely using HTML and CSS — featuring animations, hover effects, and smooth transitions that bring your profile to life.
No JavaScript used.

⬆ back to top

Mewtwo Pokémon Card

⬆ back to top

Kaleidoscope

⬆ back to top

Glide to Reveal

⬆ back to top

Rotating Text

Input Text Field

[

]()

Night fire camp

[

]()

⬆ back to top

⬆ back to top

⬆ back to top

Terminal Animation

Text Change Animaton

(./Text Change Animation/index.html)

⬆ back to top

Contributors

Thanks to these wonderful people who have contributed to this project!

Contributing

We welcome contributions from the community to make this project better. Feel free to fork the repository, make your changes, and submit a pull request. Be sure to follow our Code of Conduct.

For detailed guidelines on how to contribute, please refer to our CONTRIBUTING file.

⬆ back to top

Let's build something great together!

License

This project is licensed under the GNU General Public License v3.0 (GPL-3.0) — see the LICENSE file for details.

You-Dont-Need-JavaScript (you-dont-need/You-Dont-Need-JavaScript)

Searching Database…

20.6K ·GitHub
You-Dont-Need-JavaScript
这是什么？这是一组精选的演示，展示各种界面效果和组件，包括手风琴、轮播图、模态框、按钮、加载动画、工具提示等。它们完全使用 HTML 和 CSS 实现，不依赖 JavaScript。
这是我需要安装的库，还是只是一个演示合集？它是一个由独立演示片段组成的合集，每个片段都在自己的文件夹或 HTML 文件中，并不是可以导入项目的库或框架。
我该如何在自己的页面中使用其中的某个效果？打开你想要的效果所在的演示文件夹，把它的 HTML/CSS 复制到你的项目中即可，无需构建步骤，也无需安装任何包。
使用这些片段是否需要任何构建工具或框架？不需要。全部内容都是纯 HTML 和 CSS，不含 JavaScript，也不要求任何构建工具或依赖。
这些演示可以直接用于生产环境，而且符合无障碍要求吗？不可以。项目明确提醒，许多演示存在无障碍问题，例如键盘导航失效、屏幕阅读器支持不佳。
这个合集是如何组织的？它是一个扁平的演示列表，通过目录链接访问。内容涵盖按钮、加载动画、菜单、卡片、动画和表单元素等类别，每个类别都有独立的章节，并提供「返回顶部」导航。
有没有现实中网站风格的仿制示例？有。其中包括仅用 CSS 复刻的 Netflix、MakeMyTrip 和 Zomato 界面，用来展示纯 CSS 能够实现到什么程度。
项目有中文版本吗？有。README 同时提供英文和简体中文版本。
What are similar projects?floating-ui, LearnCS8-Resume, slick, tippyjs, react-slick, Magnific-Popup, bootstrap-table, iCSS
Which topics is it in?tooltip, carousel, font, responsive, game, beginner-friendly, animation, css, hacktoberfest, html, ui, gplv3
Creator
you-dont-need
Size
676.8 MB
Stars
20.6K
Updated
CommitOct 31
Age
10y
Commits · 90 Days