Fluffy.js

A simple, light and flexible JavaScript library
that makes sure your content – no matter how big it is – will fit in any screen!

Fluffy can be many things! It could be a portfolio, a slideshow, a gallery, a tool for interactive exploration or just a simple way helping you to fit lots of content into any screen.

Checkout the examples to get a glimpse of some of the possibilities Fluffy has to offer.

Downloads

Fluffy is open source and always will be! You can download stable releases, the latest development state or the source code itself over at the official GitHub repository.

Usage

Fluffy is plain JavaScript! There's no need for heavy frameworks like jQuery or similar. It automatically adapts to any screensize, is touch device friendly, super easy to customize and weights about 10KB only.

To get started just download the latest stable version and move all the files from the zip archive to the respective folder in your project. When you've done that, go on!

Now let me explain you how Fluffy works. Everything that is related to it gets into the Fluffy container.

<div data-fluffy-container>
    …
</div>

This helps Fluffy to correctly inject elements and classes for several states of execution. You can use an existing element or create a new one, all it needs is the data-fluffy-container attribute.

Your actual content is an element with the data-fluffy-content attribute.

<div data-fluffy-container>
    <div data-fluffy-content>
        <!-- your content -->
    </div>
</div>

Well, that's almost it. All that's left is the almighty magic and a little bit of styling, which is by the way just a real basic styling to have a minimal visual feedback at least. Feel free to do whatever you like with it!

<link rel="stylesheet" href="path/to/fluffy.min.css">
<script src="path/to/fluffy.min.js"></script>

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.

For example if you don't want to have scrollbars and a separate trigger instead, it would look like this:

<div data-fluffy-container
     data-fluffy-options='{"showScrollbars": false, "triggerSelector": "#my-trigger"}'>
    <div data-fluffy-content>
        <!-- your content -->
    </div>
</div>
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', '#sample > 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]

Support

Fluffy has been tested in those browsers successfully:

Examples