# You-Dont-Need-JavaScript

**Repository Path**: capsion/You-Dont-Need-JavaScript

## Basic Information

- **Project Name**: You-Dont-Need-JavaScript
- **Description**: 镜像 You-Dont-Need-JavaScript ,同时翻译
- **Primary Language**: Unknown
- **License**: WTFPL
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2020-08-30
- **Last Updated**: 2024-06-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# You Don't Need JavaScript
[![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/you-dont-need/javascript)

Please note these demos should be considered as CSS "Proofs of Concepts". They may have serious issues from accessibility point of view (keyboard navigation, speech synthesis, etc.), or progressive enhancement/degradation/etc.


### Style Guide:

```markdown
## Subject

[<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)

***
&nbsp;
```

***
&nbsp;

## Quick links

1. [Accordion / Toggle](#Accordion)
1. [Carousel](#Carousel)
1. [Counter of checked check-boxes](#Counter)
1. [Flip on click](#Flip)
1. [Floating label on Textfield](#Floating)
1. [Font-Face (Latin)](#Font)
1. [Info on hover/ Popover](#Info)
1. [Image Gallery](#Image)
1. [Menu](#Menu)
1. [Mobile menu off canvas](#Mobile)
1. [Burger menu](#BurgerMenu)
1. [Fancy menu](#FancyMenu)
1. [Modal/Popup](#Modal)
1. [Mouse tracking](#Mouse)
1. [Parallax scrolling](#Parallax)
1. [Tabs](#Tabs)
1. [Todo List](#Todo)
1. [Tooltips](#Tooltips)
1. [Treeview](#Treeview)
1. [Twitter Heart Animation](#Twitter)
1. [Dynamic Image Colorizing](#ImageColorizing)
1. [Ripple Effect](#RippleEffect)
1. [Responsive Counter Showing # of Items That Didn't Fit Screen](#ResponsiveItemShowcase)


## <a id="Accordion"></a>Accordion / Toggle

[<img src="images/accordion.png" height="230" title="Demo 1">](http://www.mraffaele.com/labs/css-only-accordions/)
[<img src="images/toggler.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/pyXQrj)
[<img src="images/toggler2.png" height="230" title="Demo 3">](http://codepen.io/PaulZi/pen/zBbVvV)
[<img src="images/accordion.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ)

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

***
&nbsp;

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

[<img src="images/slideshow2.png" height="230" title="Demo 1">](http://codepen.io/SitePoint/pen/MyPVdK)
[<img src="images/slideshow.png" height="230" title="Demo 2">](https://codepen.io/cavico/pen/yOjwya)
[<img src="images/slideshow3.png" height="230" title="Demo 3">](https://codepen.io/FabianK/pen/zJLLrR)

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

***
&nbsp;

## <a id="Counter"></a>Counter of checked check-boxes

[<img src="images/checkedcounter.png" height="230" title="Demo 1">](https://codepen.io/anon/pen/eZWXOZ)
[<img src="images/checkedcounter2.png" height="230" title="Demo 2">](http://codepen.io/lonekorean/pen/wKbzv)

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

***
&nbsp;

## <a id="Flip"></a>Flip on click

[<img src="images/flipper.png" height="230" title="Demo">](https://codepen.io/RuudBurger/pen/bwjry)

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

***
&nbsp;

## <a id="Floating"></a>Floating label on Textfield

[<img src="images/textfields.png" height="230" title="Demo">](http://codepen.io/KtorZ/pen/ZOzdqG)

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

***
&nbsp;

## <a id="Font"></a>Font-Face (Latin)

[<img src="images/sansfont.png" height="230" title="Demo">](https://yusugomori.com/projects/css-sans/fonts)

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

***
&nbsp;

## <a id="Info"></a>Info on hover/ Popover

[<img src="images/tooltips.png" height="230" title="Demo 1">](https://codepen.io/guuslieben/pen/gabQWM)
[<img src="images/tooltips2.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/XXOpga)
[<img src="images/info-on-hover.png" height="230" title="Demo 3">](http://codepen.io/SitePoint/pen/akAmPw)
[<img src="images/tooltips.gif" height="230" title="Demo 4">](http://codepen.io/ekrof/pen/YqmXdQ)

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

***
&nbsp;

## <a id="Image"></a>Image Gallery
[<img src="images/gallery.png" height="230" title="Demo 1">](https://codepen.io/shaishgandhi/pen/yJzamw)
[<img src="images/gallery2.png" height="230" title="Demo 2">](http://codepen.io/pavlovsk/pen/sjubp)

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

***
&nbsp;

## <a id="Loaders"></a>Loaders

[<img src="images/loader.png" height="230" title="Demo 1">](http://codepen.io/lucadem1313/pen/vKWqRV)
[<img src="images/loader2.png" height="230" title="Demo 2">](http://codepen.io/lucadem1313/pen/XKzLER)
[<img src="images/loader3.png" height="230" title="Demo 3">](http://codepen.io/brunjo/pen/xbwVXJ)
[<img src="images/loader4.png" height="230" title="Demo 4">](http://codepen.io/brunjo/pen/ByjRPy)
[<img src="images/loader5.png" height="230" title="Demo 5">](http://codepen.io/brunjo/pen/LEGyrJ)
[<img src="images/loader6.png" height="230" title="Demo 6">](http://codepen.io/brunjo/pen/bNEWjV)
[<img src="images/loader7.png" height="230" title="Demo 7">](http://codepen.io/brunjo/pen/wBKmbm)
[<img src="images/loader8.png" height="230" title="Demo 8">](http://tobiasahlin.com/spinkit/)
[<img src="images/loader9.png" height="230" title="Demo 9">](http://codepen.io/viduthalai1947/pen/JkhDK)

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

***
&nbsp;

## <a id="Menu"></a>Menu

[<img src="images/menu2.png" height="230" title="Demo 1">](https://codepen.io/antoniputra/pen/BzyWmb)
[<img src="images/menu3.png" height="230" title="Demo 2">](http://codepen.io/cristina-silva/pen/NNOodj)

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

***
&nbsp;

## <a id="Mobile"></a>Mobile menu off canvas

[<img src="images/menu.png" height="230" title="Demo">](https://codepen.io/fabricionaweb/pen/xOLwxj)

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

***
&nbsp;

## <a id="BurgerMenu"></a>Burger Menu

[<img src="images/menu4.png" height="230" title="Demo">](https://codepen.io/eduardoboucas/pen/BNyKwO)

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

***
&nbsp;

## <a id="FancyMenu"></a>Fancy Menu

[<img src="images/fancyMenu.gif" height="230" title="Demo">](http://codepen.io/lbebber/pen/RNgBPP)

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

***
&nbsp;

## <a id="Modal"></a>Modal/Popup

[<img src="images/modal2.png" height="230" title="Demo 1">](https://codepen.io/peiche/pen/vhqym)
[<img src="images/modal.png" height="230" title="Demo 2">](https://codepen.io/chrisburnell/pen/scyKF)

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

***
&nbsp;

## <a id="Mouse"></a>Mouse tracking

[<img src="images/mousetracking.png" height="230" title="Demo">](https://codepen.io/Momciloo/pen/GoGRrQ)

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

***
&nbsp;

## <a id="Parallax"></a>Parallax scrolling

[<img src="images/parallax.png" height="230" title="Demo">](http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/)

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

***
&nbsp;

## <a id="Tabs"></a>Tabs

[<img src="images/tabs.png" height="230" title="Demo 1">](https://codepen.io/llgruff/pen/ZGBxOa)
[<img src="images/tabs2.png" height="230" title="Demo 2">](https://codepen.io/fusco/pen/Wvzjrm)

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

***
&nbsp;

## <a id="Todo"></a>Todo List
[<img src="images/todo.png" height="230" title="Demo">](http://codepen.io/scryptonite/pen/oLGzdj)

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

***
&nbsp;

## <a id="Tooltips"></a>Tooltips
+ [Demo](https://kushagragour.in/lab/hint/)

## <a id="Treeview"></a>Treeview

[<img src="images/tree.png" height="230" title="Demo">](https://codepen.io/rgg/pen/WrKyzj)

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

***
&nbsp;

## <a id="Twitter"></a>Twitter Heart Animation

[<img src="images/art_twitter_heart_animation.gif" height="230" title="Demo">](http://codepen.io/thebabydino/pen/RRRRZE)

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

***
&nbsp;

## <a id="ImageColorizing"></a>Dynamic Image Colorizing

[<img src="images/imagecolorizing.png" height="230" title="Demo">](http://codepen.io/noahblon/pen/ZbjmbK)

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

***
&nbsp;

## <a id="RippleEffect"></a>Ripple Effect

[<img src="images/ripple-effect.gif" height="230" title="Ripple EffectDemo">](http://mladenplavsic.github.io/css-ripple-effect/)

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

***
&nbsp;

## <a id="ResponsiveItemShowcase"></a>Responsive Counter Showing # of Items That Didn't Fit Screen

[<img src="images/responsive-item-showcase.gif" title="Responsive Item Showcase">](https://codepen.io/pavlovsk/pen/QqrZzv/right/)

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

***
&nbsp;

## Contributing

Welcome to contribute to this project. Send us a Pull Request now!