Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robinloeffel/jazzer
Add some visual smooth jazz to your page
https://github.com/robinloeffel/jazzer
animation es6 npm-package transition
Last synced: 16 days ago
JSON representation
Add some visual smooth jazz to your page
- Host: GitHub
- URL: https://github.com/robinloeffel/jazzer
- Owner: robinloeffel
- Created: 2017-02-10T17:52:27.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-18T20:53:40.000Z (over 6 years ago)
- Last Synced: 2024-08-09T02:59:11.883Z (3 months ago)
- Topics: animation, es6, npm-package, transition
- Language: JavaScript
- Homepage: https://robinloeffel.ch/jazzer
- Size: 304 KB
- Stars: 19
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# jazzer
[](https://www.npmjs.com/package/jazzer)
[jazzer](https://robinloeffel.ch/jazzer) lets you easily freshen up your site and improve its memorability by _a bunch_. You know these short white flashes when changing between pages? Ugggh, right? jazzer fixes that. It lets you control exactly what should visually happen when clicking on an internal link. Install it, import it, configure it. Give your project the sexyness it deserves!
## How to Install
You can install and use jazzer in one of two ways. Install it in a terminal with either yarn or npm and later import / require it somewhere along the line.
```javascript
// your terminal
yarn add jazzer
// your script
import jazzer from 'jazzer';
```
Or, if this whole node stuff just isn't your style, no worries. Download the latest release from [here](https://github.com/rbnlffl/jazzer/releases/latest) or reference it from some CDN and add it to your DOM in a script tag.
```html
// your html
```
## Setting up jazzer
Setting up jazzer is _fast_. Whip this up somewhere in your code and you're almost good to go.
```javascript
// your script
jazzer();
```
Now you need to add two things to your DOM: An element with the id `jazzer` and some links with the attribute `data-jazzer-trigger`. When clicking on `data-jazzer-trigger`, jazzer will look for the `href` attribute on the clicked link and load the contents of the HTML document laying there. If it could identify an element with the same id, in our case `jazzer`, in the loaded document, it will replace the contents of the `#jazzer` on this document with the contents of the `#jazzer` of the loaded document. That's how simple it is.
A document body, ready to be manipulated by jazzer, looks something like this:
```html
I will be replaced via AJAX!
jazzer();
```
## Adding the Jazz
jazzer will apply a class of your choosing, or if you just roll with the defaults, `jazzer-changing` to your container `#jazzer`, while performing the AJAX request and changing the markup. This gives you full control over what should visually happen on your page, while everything gets loaded and injected in the background. The CSS of the [demo page](https://robinloeffel.ch/jazzer) looks like that:
```css
#jazzer {
transition: opacity .5s ease-in-out, transform .5s ease-in-out;
}
.jazzer-changing {
opacity: 0;
transform: scale(.75);
pointer-events: none;
}
```
## Custom Settings
Of course you can configure jazzer to float your boat if you're not content with the defaults. The configurable values are `links`, `container`, `transitionClass`, `duration` and `changeUrl`. You can give jazzer an object with (some of) these properties when calling it. Here's an example:
```javascript
jazzer({
links: '.i-will-trigger-jazzer-on-click',
container: '#my-contents-will-change',
transitionClass: '.i-get-applied-to-container-when-changing',
duration: 10000, // love me some long animations
changeUrl: false // i don't want jazzer to change the url
});
```
When working with your own values, or in general, make sure to synchronize the `duration` property with the `transition-duration` of `container`. As mentioned, you don't need to overwrite all of these. You can just modify the ones you want to change and leave the rest be. The defaults are:
```javascript
links = '[data-jazzer-trigger]';
container = '#jazzer';
transitionClass = 'jazzer-changing',
duration = 500;
changeUrl = true;
```
## Browser Compatibility
This package is functional on
- Internet Explorer 11
- Microsoft Edge
- Google Chrome
- Mozilla Firefox
- Apple Safari (WebKit in general)
## Licence
MIT
Created by [Robin Löffel](https://robinloeffel.ch), 2017