Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://elrumordelaluz.github.io/csshake/
CSS classes to move your DOM!
https://elrumordelaluz.github.io/csshake/
animation css csshake dom keyframe-animation mixins sass shaking-animations
Last synced: 12 days ago
JSON representation
CSS classes to move your DOM!
- Host: GitHub
- URL: https://elrumordelaluz.github.io/csshake/
- Owner: elrumordelaluz
- License: mit
- Created: 2014-02-25T16:31:43.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-10-26T08:37:18.000Z (8 months ago)
- Last Synced: 2024-05-18T07:41:20.264Z (about 1 month ago)
- Topics: animation, css, csshake, dom, keyframe-animation, mixins, sass, shaking-animations
- Language: SCSS
- Homepage: https://elrumordelaluz.github.io/csshake/
- Size: 436 KB
- Stars: 4,833
- Watchers: 120
- Forks: 621
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: FUNDING.yml
- License: LICENSE
Lists
- awesome-web-resources - CSShake
- awesome - CSShake
README
# CSShake [](http://badge.fury.io/js/csshake)
> Some CSS classes to move your DOM!
### [Live Demo](http://elrumordelaluz.github.io/csshake/)
### [Download Center](https://csshake.surge.sh/)
You could download the complete `csshake.css` file or separated files for each shake animation (i.e `csshake-little.css`).
Each one expanded or minified.
## Why
I had to do a 'shake-animation' for a big project. First, I did it in vanilla CSS.
After finish it I discover [this](http://jackrugile.com/jrumble/) cool jQuery plugin by [@jackrugile](https://twitter.com/jackrugile).
Then I started to think in made _[this little CSS project](http://elrumordelaluz.github.io/csshake/)_
## Install
Fork this repo
```
$ git clone https://github.com/elrumordelaluz/csshake.git
```
or via Bower
```
$ bower install csshake
```
or via npm
```
$ npm i csshake
```
#### scripts
```
$ npm run watch
$ npm run build:raw
$ npm run build:min
```
### CDN
Now is also available in `cdnjs` for each shake animation: https://cdnjs.com/libraries/csshake
## How to use
First include the CSS file
```html
`
```
Then call the different classes on the element you want to shake!
```html
```
Add also classes to control the `animation-play-state`.
```html
```
## Customize
You could customize the Sass @mixins to create new shaking animations, yeah!
Editing the `do-shake` mixin in `scss/_tools.scss` file
```scss
.my-custom-shake {
@include do-shake(
$name: 'my-custom-shake',
$h: 5px,
$v: 5px,
$r: 3deg,
$dur: 100ms,
$precision: 0.02,
$opacity: false,
$q: infinite,
$t: ease-in-out,
$delay: null,
$chunk: 100%
);
}
```
`$name` {String} is the name for the keyframes animation
`$h` {Number} is the max number for random to assign in x axis
`$v` {Number} is the max number for random to assign in y axis
`$r` {Number} is the max number for random rotation
`$dur` {Number} is the `animation-duration` time value
`$precision` {Number} is the precision of the keyframes animation. For example `.02` generates keyframes each 2% and `.1` each 10%. The calculation is `$step: 100 * $precision;`
`$opacity` {Boolean} to apply random animation also in the opacity property
`$q` {String} is the `animation-iteration-count` value
`$t` {String} `animation-timing-function` value
`$delay` {Number} `animation-delay` time value
`$chunk` {Number} is the part of the keyframes where apply the animation
### Use with Webpack 2.x
When installed with `npm`, import `csshake` inside your css|stylus|sass files with `~` prefix to trigger webpack's module resolving:
```scss
@import '~csshake';
```
This will get you non-minified plain css.
##### Import source sass files
Include full path relative to your `node_modules` folder with csshake installation
```scss
@import '~csshake/scss/csshake-hard.scss';
```
=======
### Changelog
#### [v1.5.0](https://github.com/elrumordelaluz/csshake/releases/tag/v1.5) (October 5, 2015)
- Improve the core mixin for a better output code
- Generate the entire 'shake' animation from only one [@mixin](https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss#L30). Easier to cerate custom shakes animations classes.
- Add a [new argument](https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss#L41) to allow animate only part of the 100% of keyframes. Solves [issue #25](https://github.com/elrumordelaluz/csshake/issues/25)
- Add a [class](https://github.com/elrumordelaluz/csshake/blob/master/scss/_tools.scss#L3) to allow fire animation from a parent element. Solves [issue #16](https://github.com/elrumordelaluz/csshake/issues/16)
- Update semanthics on modifiers classes
- Export separated stylesheets for each animation. Solves [issue #20](https://github.com/elrumordelaluz/csshake/issues/20)
======
Made with ♥ by [@elrumordelaluz](http://twitter.com/elrumordelaluz) using [Sass](http://sass-lang.com/).