initial commit.

.gitignore

@@ -0,0 +1,10 @@
+# gulp project files
+node_modules/
+bower_components/
+
+# temporary files
+.sass-cache
+
+# junk
+.DS_Store
+Thumbs.db

LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2014 Sebastian Prein
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,75 @@
+# Fluffy.js 1.0.0
+
+A simple, light and flexible JavaScript library for creating content that you can interact with in a real fluffy way.
+
+Sebastian Prein  
+Copyright 2014, MIT License
+
+Contributions are greatly appreciated. Please fork this repository and open a pull request to add features, improvements, bugfixes etc.
+
+## Usage
+
+Fluffy is plain JavaScript. There's no need for heavy frameworks like jQuery or similar. It's totally fluid responsive, touch device friendly, super easy to customize and weights about 6,2KB only.  
+
+Just download the latest version from here and move it to your project. In your HTML file, where you want to have your fluffy area, make sure your markup looks like this:
+
+```HTML
+<div id="fluffy-container" class="fluffy-container is-loading">
+    <div id="fluffy-scrollbar" class="fluffy-scrollbar"></div>
+    <div id="fluffy-stage" class="fluffy-stage">
+        <ul id="fluffy-content" class="fluffy-content">
+            <li class="fluffy-item">…</li>
+            …
+        </ul>
+    </div>
+</div>
+```
+
+All IDs (`#fluffy-*`) are used to grab the respective DOM elements by the JavaScript logic. You can use different IDs, just remember to tell Fluffy which selectors it should look for. Feel free to edit, remove or add any class used by Fluffy, but be careful as you might break everything.  
+
+If everything is set up just include the almighty magic and you're ready to go.
+
+```HTML
+<script src="path/to/fluffy.min.js"></script>
+<script>Fluffy.init({ options });</script>
+```
+
+## Options
+
+This list shows all the available options and their default values.  
+
+The overall Fluffy container holding everything together.  
+`containerSelector: '#fluffy-container'`
+
+The selector for the actual content.  
+`contentSelector: '#fluffy-content'`
+
+Enable debugging in case the output isn't as expected. See your browsers console for more information.  
+`debug: false`
+
+Selector to pick items, if none given all children in the content container will be picked.  
+`itemSelector: null`
+
+Selector for the scrollbar.  
+`scrollbarSelector: '#fluffy-scrollbar'`
+
+Displays the current position within the scrollable content in form of a scrollbar.  
+`showScrollbar: true`
+
+Automatically adjust the height of the content container either relative to the smallest or tallest element found. Allowed values: null, tallest, smallest.  
+`smartHeight: null`
+
+The stage holding the scrollable content.  
+`stageSelector: '#fluffy-stage'`
+
+
+## Support
+
+Fluffy has been tested in those browsers successfully:  
+
+- Google Chrome 37
+- Mozilla Firefox 31
+- Safari 7
+- Windows Internet Explorer 9
+- Android Browser 4.3
+- iOS Safari 7.1

src/fluffy.css

@@ -0,0 +1,137 @@
+@-webkit-keyframes moveRight { to { -webkit-transform: translateX(20px); }}
+@-moz-keyframes moveRight { to { -webkit-transform: translateX(20px); }}
+@-o-keyframes moveRight { to { -webkit-transform: translateX(20px); }}
+@keyframes moveRight { to { transform: translateX(20px); }}
+
+@-webkit-keyframes moveLeft { to { -webkit-transform: translateX(-20px); }}
+@-moz-keyframes moveLeft { to { -webkit-transform: translateX(-20px); }}
+@-o-keyframes moveLeft { to { -webkit-transform: translateX(-20px); }}
+@keyframes moveLeft { to { transform: translateX(-20px); }}
+
+.fluffy-container {
+    height: 50%;
+    margin: auto;
+    min-height: 320px;
+    position: relative;
+
+    -webkit-transition: background-color 1s 600ms;
+    -moz-transition: background-color 1s 600ms;
+    -ms-transition: background-color 1s 600ms;
+    -o-transition: background-color 1s 600ms;
+    transition: background-color 1s 600ms;
+}
+
+.fluffy-container::after,
+.fluffy-container::before {
+    background-color: rgba(0, 0, 0, 0.33);
+    border-radius: 50%;
+    box-shadow: inset 0 0 20px 20px rgba(255, 255, 255, 0.33);
+    content: "";
+    height: 20px;
+    left: 50%;
+    margin: -10px 0 0 -10px;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    visibility: hidden;
+    width: 20px;
+    z-index: 1000;
+
+    -webkit-transition: opacity 300ms, visibility 0s 300ms;
+    -moz-transition: opacity 300ms, visibility 0s 300ms;
+    -ms-transition: opacity 300ms, visibility 0s 300ms;
+    -o-transition: opacity 300ms, visibility 0s 300ms;
+    transition: opacity 300ms, visibility 0s 300ms;
+}
+
+.fluffy-container.is-loading {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.fluffy-container.is-loading::after,
+.fluffy-container.is-loading::before {
+    opacity: 1;
+    visibility: visible;
+
+    -webkit-transition: opacity 300ms;
+    -moz-transition: opacity 300ms;
+    -ms-transition: opacity 300ms;
+    -o-transition: opacity 300ms;
+    transition: opacity 300ms;
+}
+
+.fluffy-container.is-loading .fluffy-stage {
+    opacity: 0;
+}
+
+.fluffy-container.has-scrollbar .fluffy-scrollbar {
+    opacity: 1;
+}
+
+.fluffy-container::after {
+    -webkit-transform: translateX(-20px);
+    transform: translateX(-20px);
+    -webkit-animation: moveRight 600ms linear infinite alternate;
+    animation: moveRight 600ms linear infinite alternate;
+}
+
+.fluffy-container::before {
+    -webkit-transform: translateX(20px);
+    transform: translateX(20px);
+    -webkit-animation: moveLeft 600ms linear infinite alternate;
+    animation: moveLeft 600ms linear infinite alternate;
+}
+
+.fluffy-scrollbar {
+    background-color: rgba(0, 0, 0, 0.33);
+    box-shadow: inset 0 0 20px 20px rgba(255, 255, 255, 0.33);
+    height: 5px;
+    left: 0;
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    width: 5%;
+    z-index: 1000;
+}
+
+.fluffy-stage {
+    height: 100%;
+    overflow: hidden;
+
+    -webkit-transition: opacity 600ms 600ms;
+    -moz-transition: opacity 600ms 600ms;
+    -ms-transition: opacity 600ms 600ms;
+    -o-transition: opacity 600ms 600ms;
+    transition: opacity 600ms 600ms;
+}
+
+.fluffy-container.is-touch .fluffy-stage {
+    overflow-x: scroll;
+    overflow-y: hidden;
+
+    -webkit-overflow-scrolling: touch;
+}
+
+.fluffy-content {
+    height: 100%;
+    list-style-type: none;
+    margin: 0;
+    overflow: hidden;
+    padding: 0;
+
+    -webkit-transition: opacity 1s 600ms;
+    -moz-transition: opacity 1s 600ms;
+    -ms-transition: opacity 1s 600ms;
+    -o-transition: opacity 1s 600ms;
+    transition: opacity 1s 600ms;
+}
+
+.fluffy-item {
+    background-position: center;
+    background-size: cover;
+    display: inline-block;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    vertical-align: middle;
+}