support for containers

.gitignore

@@ -1,7 +1,8 @@
 build/
 dist/
-demos/
 node_modules/
+screenshots/
+.vscode/
 jsconfig.json
 npm-debug.log
 .DS_Store

.npmignore

@@ -1 +1,2 @@
 !dist/
+demos/

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 before_script:
-  - "http-server &"
+  - "http-server -s &"
   - sleep 3
 branches:
   only:

README.md

@@ -1,40 +1,36 @@
-# OnScreen [![Build Status](https://travis-ci.org/silvestreh/onScreen.svg?branch=master)](https://travis-ci.org/silvestreh/onScreen)
+[![Build Status](https://travis-ci.org/silvestreh/onScreen.svg?branch=master)](https://travis-ci.org/silvestreh/onScreen)
+[![npm](https://img.shields.io/npm/dt/onscreen.svg?maxAge=2592000)](https://www.npmjs.com/package/onscreen)
+[![npm](https://img.shields.io/npm/v/onscreen.svg)](https://www.npmjs.com/package/onscreen)
+[![npm](https://img.shields.io/npm/l/onscreen.svg)](https://www.npmjs.com/package/onscreen)
+
+# OnScreen
 
 A light UI library that does stuff when the matched elements enter or leave the viewport. Tested to work in IE9+, Edge, Gecko, Blink, and Webkit.
 
 ## Documentation
 
-#### Installation
+### Installation
 
 OnScreen is available on NPM. To install it open a terminal and run…
 
 ```shell
-npm install onscreen
+npm install onscreen --save
 ```
 
-#### Usage
+### Usage
 
 Once installed you can use it with your favorite module bundler.
 
 ```javascript
-// With Babel
+// Using ES6 syntax (requires a transpiler)
 import OnScreen from 'OnScreen';
 const os = new OnScreen();
 
-// Without Babel using Browserify
+// Using ES5 syntax
 var OnScreen = require('OnScreen');
 var os = new OnScreen();
 ```
 
-The constructor accepts an `options` object which defaults to:
-
-```javascript
-var os = new OnScreen({
-    tolerance: 0,
-    debounce: 100
-});
-```
-
 Not using a module bundler? No problem! If you include a OnScreen using `<script>` tag it will expose a global variable OnScreen which you can use.
 
 ```html
@@ -52,13 +48,25 @@ Not using a module bundler? No problem! If you include a OnScreen using `<script
 </html>
 ```
 
-#### Properties
+The constructor accepts an `options` object which defaults to:
 
-The instance, `os`, has the following properties:
+```javascript
+var os = new OnScreen({
+    tolerance: 0,
+    debounce: 100,
+    container: window
+});
+```
+
+#### Options
 
-`options.tolerance` is the number of pixels an element is allowed to enter the viewport before calling its callback. Defaults to `0`.
+The instance, `os`, has the following options:
 
-`options.debounce` is the number of milliseconds to wait to call an element's callback after the user has stopped scrolling. Defaults to `100`.
+`options.tolerance` is the number of pixels an element is allowed to enter its container boundaries before calling its callback. Defaults to `0`.
+
+`options.debounce` is the number of milliseconds to wait before calling an element's callback after the user has stopped scrolling. Defaults to `100`.
+
+`options.container` is the container of the elements you want to track. It accepts a string representing a CSS selector or an `HTMLElement` object. Defaults to `window`.
 
 #### Methods
 
@@ -121,10 +129,16 @@ It's pretty straight forward:
 * Pass those tests
 * Send a pull request and wait…
 
-OnScreen mostly follows [AirBnb's Javascript Styleguide](https://github.com/airbnb/javascript) so make sure to check it out.
+#### Code style
+
+OnScreen _(mostly)_ follows [AirBnb's Javascript Styleguide](https://github.com/airbnb/javascript) so make sure to check it out.
 
 There's an `.editorconfig` that should take care of setting up your text editor. If your editor doesn't support it, then make sure to use 4 spaces per indent, trim trailing white-space, and insert a final new line.
 
+#### Testing
+
+You'll need to run the tests through an HTTP server. I'm using `http-server -s &` to serve `./` on `http://localhost:8080` and then run the tests with `npm test`.
+
 ## jQuery
 
 If you're upset that I decided to ditch jQuery don't be. I plan to write a wrapper and enable OnScreen to work as a jQuery plugin, though the API will break, that's for sure. You'll need to update your code if you plan to upgrade.

demos/demo.css

@@ -0,0 +1,150 @@
+:root {
+    font-size: 16px;
+}
+html, body {
+    min-height: 100%;
+    padding: 0;
+    margin: 0;
+    background: #F2F2F2;
+    color: #666;
+    font-family: sans-serif;
+}
+#wrapper {
+    padding: 1rem;
+}
+.controls {
+    padding: 1rem;
+    background: rgba(255,255,255,0.8);
+    border-radius: 1rem;
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 100;
+}
+.container {
+    overflow: hidden;
+    background: white;
+    border-radius: 0.125rem;
+    border: 0.0625rem solid #DDD;
+}
+.container > div {
+    float: left;
+    width: 50%;
+    overflow: hidden;
+    height: 40vh;
+    box-sizing: border-box;
+}
+.container > div + div {
+    border-left: 0.0625rem solid rgba(0,0,0,0.1);;
+}
+.container > .horizontal {
+    overflow-x: scroll;
+}
+.container > .vertical {
+    overflow-y: scroll;
+}
+.contained {
+    opacity: 0;
+    white-space: normal;
+    padding: 2rem;
+    color: rgba(255,255,255,0.75);
+    box-sizing: border-box;
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-transition: opacity 500ms, transform 500ms;
+    -moz-transition: opacity 500ms, transform 500ms;
+    transition: opacity 500ms, transform 500ms;
+}
+.horizontal {
+    font-size: 0;
+    white-space: nowrap;
+}
+.horizontal .contained {
+    font-size: 1rem;
+    display: inline-block;
+    width: 40%;
+    height: 100%;
+    -webkit-transform: translate(0, 50%);
+    -moz-transform: translate(0, 50%);
+    -ms-transform: translate(0, 50%);
+    -o-transform: translate(0, 50%);
+    transform: translate(0, 50%);
+}
+.horizontal .contained + .contained {
+    border-left: 0.0625rem solid rgba(0,0,0,0.05);
+}
+.vertical .contained {
+    height: 60%;
+    -webkit-transform: translate(50%, 0);
+    -moz-transform: translate(50%, 0);
+    -ms-transform: translate(50%, 0);
+    -o-transform: translate(50%, 0);
+    transform: translate(50%, 0);
+}
+.vertical .contained + .contained {
+    border-top: 0.0625rem solid rgba(0,0,0,0.05);
+}
+.contained.onScreen {
+    opacity: 1;
+    -webkit-transform: translate(0, 0);
+    -moz-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    -o-transform: translate(0, 0);
+    transform: translate(0, 0);
+}
+.contained.onScreen:nth-child(1) {
+    background-color: #F44336;
+}
+.contained.onScreen:nth-child(2) {
+    background-color: #E91E63;
+}
+.contained.onScreen:nth-child(3) {
+    background-color: #9C27B0;
+}
+.contained.onScreen:nth-child(4) {
+    background-color: #673AB7;
+}
+.contained.onScreen:nth-child(5) {
+    background-color: #3F51B5;
+}
+.contained.onScreen:nth-child(6) {
+    background-color: #2196F3;
+}
+.contained.onScreen:nth-child(7) {
+    background-color: #009688;
+}
+.contained.onScreen:nth-child(8) {
+    background-color: #8BC34A;
+}
+.pusher {
+    padding: 1rem 0;
+    height: 50vh;
+}
+.target {
+    background: #555;
+    color: #F2F2F2;
+    opacity: 0;
+    height: auto;
+    padding: 1.5rem;
+    line-height: 1.5rem;
+    overflow: visible;
+    -webkit-transition: opacity 500ms, transform 1s;
+    -o-transition: opacity 500ms, transform 1s;
+    transition: opacity 500ms, transform 1s;
+    -webkit-transform: translate(0, 2rem);
+    -ms-transform: translate(0, 2rem);
+    transform: translate(0, 2rem);
+}
+.target.onScreen {
+    opacity: 1;
+    -webkit-transform: translate(0, 0);
+    -ms-transform: translate(0, 0);
+    transform: translate(0, 0);
+}
+.target:nth-of-type(even) {
+    background: #666;
+}
+.target + .target {
+    margin-top: 1rem;
+}