Skip to content

Instantly share code, notes, and snippets.

@SindreSvendby

SindreSvendby/README.md

Last active September 27, 2016 21:43
Show Gist options
  • Save SindreSvendby/9e5bcbd73d5f0025c1e842fdcd2fee0f to your computer and use it in GitHub Desktop.
Save SindreSvendby/9e5bcbd73d5f0025c1e842fdcd2fee0f to your computer and use it in GitHub Desktop.
Download ZIP
in-view (fork to support multiple instances)
Raw
README.md

Example of usage of in-view fork

browserify

browserify index.js > bundle.js

Start the server

php -S localhost:8080

See in-view fork on github

Raw
index.html
<head>
<script src="/bundle.js"></script>
</head>
<h1>H1 1</h1> <h2>H2 1</h2><br/>
<h1>H1 2</h1> <h2>H2 2</h2><br/>
<h1>H1 3</h1> <h2>H2 3</h2><br/>
<h1>H1 4</h1> <h2>H2 4</h2><br/>
<h1>H1 5</h1> <h2>H2 5</h2><br/>
<h1>H1 6</h1> <h2>H2 6</h2><br/>
<h1>H1 7</h1> <h2>H2 7</h2><br/>
<h1>H1 8</h1> <h2>H2 8</h2><br/>
<h1>H1 9</h1> <h2>H2 9</h2><br/>
<h1 class="heading1">H1 10</h1> <h2>H2 10</h2><br/>
<h1>H1 11</h1> <h2>H2 11</h2><br/>
<h1>H1 12</h1> <h2>H2 12</h2><br/>
<h1>H1 13</h1> <h2>H2 13</h2><br/>
<h1>H1 14</h1> <h2>H2 14</h2><br/>
<h1>H1 15</h1> <h2>H2 15</h2><br/>
<h1>H1 16</h1> <h2>H2 16</h2><br/>
<h1>H1 17</h1> <h2>H2 17</h2><br/>
<h1>H1 18</h1> <h2>H2 18</h2><br/>
<h1>H1 19</h1> <h2>H2 19</h2><br/>
<h1>H1 20</h1> <h2>H2 20</h2><br/>
<h1>H1 21</h1> <h2>H2 21</h2><br/>
<h1>H1 22</h1> <h2>H2 22</h2><br/>
<h1>H1 23</h1> <h2>H2 23</h2><br/>
<h1>H1 24</h1> <h2>H2 24</h2><br/>
<h1>H1 25</h1> <h2>H2 25</h2><br/>
<h1>H1 26</h1> <h2>H2 26</h2><br/>
<h1>H1 27</h1> <h2>H2 27</h2><br/>
<h1>H1 28</h1> <h2>H2 28</h2><br/>
<h1>H1 29</h1> <h2>H2 29</h2><br/>
<h1>H1 30</h1> <h2>H2 30</h2><br/>
<h1>H1 31</h1> <h2>H2 31</h2><br/>
<h1>H1 32</h1> <h2>H2 32</h2><br/>
<h1>H1 33</h1> <h2>H2 33</h2><br/>
<h1>H1 34</h1> <h2>H2 34</h2><br/>
<h1>H1 35</h1> <h2>H2 35</h2><br/>
<h1>H1 36</h1> <h2>H2 36</h2><br/>
<h1>H1 37</h1> <h2>H2 37</h2><br/>
<h1>H1 38</h1> <h2>H2 38</h2><br/>
<h1>H1 39</h1> <h2>H2 39</h2><br/>
Raw
index.js
document.addEventListener('DOMContentLoaded', onLoad, false);
function onLoad() {
var inView = require('in-view');
var inview1 = inView();
var inview2 = inView();
inview1.offset(200);
inview2.offset(350);
inview1('h1')
.on('enter', onEnter)
.on('exit', onExit);
inview2('h2')
.on('enter', onEnter2)
.on('exit', onExit2);
window.inView = inView;
}
function onEnter(el) {
el.style.color = "blue"
}
function onEnter2(el) {
el.style.color = "green"
}
function onExit2(el) {
el.style.color = "black"
}
function onExit(el) {
el.style.color = "black"
}
Raw
package.json
{
"name": "in-view-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"in-view": "git://github.com/SindreSvendby/in-view.git#master"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment