Fluffy.js
A simple, light and flexible JavaScript library that makes your content – no matter how big it is – fit in any screen!
– http://mzdr.github.io/fluffy.js/
Sebastian Prein
Copyright 2016, MIT License
Contributions are greatly appreciated. Please fork this repository and open a pull request to add features, improvements, bugfixes etc.
Usage
Markup
Now let me explain you how Fluffy works.
- Everything that is related to it gets into the Fluffy container. This helps Fluffy to correctly inject elements and classes for several states of execution.
Notice: If you don't use automatic detection, you can use any selector you like. That means you don't have to stick to the data attribute.
…
- Your actual content is an element with the
data-fluffy-content
attribute.
Notice: The content element does not necessarily has to be the direct child of the container. But it's recommended to do it that way.
<!-- your content -->
Your content can be anything you'd like it to be. Check out the examples to get glimpse of what possibilities you have.
- And that's it almost it!
Now depending on your setup (either as a module or plain in the browser) you have to hack a little JavaScript or just load the correct files. See below for further instructions.
Use it as a module
Since Fluffy.js is a registered NPM package (Bower too), you can use it as a module.
- Install it with:
npm install --save fluffy.js
- Now you can require it anywhere you like:
const Fluffy = ; // Prints 2.1.0console; // Start automatic detectionFluffy; // Or provide a DOM node for single creationconst myElement = document; Fluffy;
Use it plain in the browser
If you just want to hit and run, this is probably the best way.
-
Download the latest stable version and move all the files from the zip archive to the respective folder in your project.
-
Include the two lines below somewhere in your HTML file.
- That's it! Open your browser and see for yourself!
Options
Since each Fluffy container is an instance on its own you're able to customize each one independently with the data-fluffy-options='…'
attribute. This takes a JSON string with all of the options you want to change.
Example
Let's say you don't want to have scrollbars and a separate trigger instead. The markup then would look like this:
<!-- your content -->
Available options
Below you see all the available options, their default values and it's description.
Option | Default | Description |
---|---|---|
triggerSelector | null | Defines a separate element which is used to trigger the actual interaction with the Fluffy content. If the target element doesn't exist, the container will be used as fallback/default. Allowed values: '[any valid CSS selector]' Examples: '#my-trigger', '#id > li:nth-child(8) a + img' |
showScrollbars | true | Displays the current position within the scrollable content in forms of scrollbars. Allowed values: true, false |
smartHeight | false | Automatically adjust the height of the content container according to the smallest, largest or the average height of all items found. Allowed values: false, 'smallest', 'average', 'largest'. |
smartWidth | false | See smartHeight, just for width this time. |
triggerDirection | 'x' | Define which axis to trigger movement for. Allowed values: 'x', 'y', 'xy'. |
mouseDamp | 20 | The higher the value the more lazier the reaction to the mouse movement will be. Allowed values: [any positive number] |
mousePadding | 60 | Adds space (in pixel) to the trigger area where no action happens. Allowed values: [any positive number] |