https://github.com/vmarchesin/turn-down-for-what

Fire up that loud, Another round of shots
https://github.com/vmarchesin/turn-down-for-what

Last synced: 26 days ago
JSON representation

Fire up that loud, Another round of shots

• Host: GitHub
• URL: https://github.com/vmarchesin/turn-down-for-what
• Owner: vmarchesin
• License: mit
• Created: 2019-01-09T18:59:08.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-05-09T12:29:02.000Z (over 2 years ago)
• Last Synced: 2024-09-28T03:40:40.860Z (about 1 month ago)
• Language: JavaScript
• Size: 343 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Turn Down For What

[![npm](https://img.shields.io/npm/v/turn-down-for-what.svg)]()

[![npm](https://img.shields.io/npm/dt/turn-down-for-what.svg)]()

Fire up that loud, Another round of shots

![Turn Down For What Video Thumbnail](./assets/banner.jpg)

Make your website wait for that epic beat drop.

## Install

[![NPM](https://nodei.co/npm/turn-down-for-what.png)](https://www.npmjs.com/package/turn-down-for-what)

```bash

npm i turn-down-for-what -S

```

## Usage

Babel

```js

import turnDownForWhat from 'turn-down-for-what';

turnDownForWhat();

```

ES6

```js

const turnDownForWhat = require('turn-down-for-what');

turnDownForWhat();

```

## Arguments

The `turnDownForWhat` function takes two arguments.

```js

const affectedNodes = ['img', 'svg', 'p'];

const options = { noDelay: true };

turnDownForWhat(affectedNodes, options);

```

* `affectedNodes`: An array with the HTML tags that are supposed to be affected by the CSS animation. The code uses `document.querySelectorAll` to retrieve the nodes, so the syntax must be the same. The default is `['*']`, meaning all tags will be matched.

> Example

> ```js

> // Animates only divs matching the class 'animate' and the tag 


> turnDownForWhat(['div.animate', 'p#banner']);

> ```

* `options`: The second argument is an object that can configure some parameters:

  * `noDelay [default: false]`: By default the animation creates a random delay for the intro, making it look that each node is joining the party one at a time. If you are animating a single node, or you just want to have them all jump at the same time, pass `true` to disable the delay and avoid weird behaviours.

    > Example

    > ```js

    > // Everything will start the animation at the same time

    > turnDownForWhat(['*'], { noDelay: true });

    > ```

  * `jitterAmount [default: 10]`: A modifier for the amount of jitter the animation will receive during the intro. Increase to be more "shaky", and decrease for a more "stable" animation.

    Values below 4 behave poorly, with little to no jitter.

  * `numKeyframes [default: 10]`: By default 10 random keyframes are generated. You can define how many you want with this property.

  * `numTurntAnimations [default: 10]`: After the drop your page will **Turn Down For What**. Define how many animations (keyframes) you want for this part (does not affect the intro). The default is 10.

    > Example

    > ```js

    > // Increase the number of animations

    > turnDownForWhat(['*'], {

    >   numKeyframes: 20,

    >   numTurntAnimations: 20,

    > });

    > ```

  * `maxNodes [default: 1000]`: For performance reasons only the first 1000 nodes will be animated. If you wish to override, pass another value.

## License

[MIT](https://github.com/vmarchesin/turn-down-for-what/blob/master/LICENSE)

## Contact

You can reach me on my [Github](https://github.com/vmarchesin) or send an email to [[email protected]](mailto:[email protected]).

---

This code has been ~~copied~~ inspired by: https://github.com/nthitz/turndownforwhatjs