-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
93 lines (76 loc) · 4.47 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Intersection Demo</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="intersect.css">
<!-- <link href='http://fonts.googleapis.com/css?family=Lato:300,300italic' rel='stylesheet' type='text/css'> -->
<!-- <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:900' rel='stylesheet' type='text/css'>
<!-- <link href='http://fonts.googleapis.com/css?family=Muli:300' rel='stylesheet' type='text/css'> -->
</head>
<body>
<div class="container">
<div class="bigtext-container">
<!-- <div class="intersect"> -->
<!-- Div added by bigclip, for relative positioning. Needed? Don't think so... just require that position: relative, absolute or fixed is set for bigtext-container, which can be checked in the script. Add if it's not set... -->
<div class="bigtext">intersect.js</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec malesuada urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus aliquet, nunc vitae tempor tempor, ante quam facilisis diam, sed sodales turpis lorem eu magna. Vivamus vitae arcu tellus. Donec volutpat faucibus ipsum at ullamcorper. In non nulla ut felis consectetur ultrices. Aliquam lacinia mi eu enim adipiscing convallis. Duis euismod congue scelerisque. Nam facilisis ultrices faucibus. Quisque eu mauris posuere, mollis diam sed, accumsan massa. Donec ultrices tincidunt posuere. Maecenas lacinia quam nec tellus lobortis, fermentum sollicitudin enim eleifend. Etiam euismod nec nunc at posuere.</span>
<!-- <div class="intersect-mask">
<div class="intersect-content box1clip">
This should all be generated by intersect.js. box1clip class given when clipping box1, according to it's 'data-intersect-class'. Content the same as it's parent.
<div class="bigtext">intersect</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec malesuada urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus aliquet, nunc vitae tempor tempor, ante quam facilisis diam, sed sodales turpis lorem eu magna. Vivamus vitae arcu tellus. Donec volutpat faucibus ipsum at ullamcorper. In non nulla ut felis consectetur ultrices. Aliquam lacinia mi eu enim adipiscing convallis. Duis euismod congue scelerisque. Nam facilisis ultrices faucibus. Quisque eu mauris posuere, mollis diam sed, accumsan massa. Donec ultrices tincidunt posuere. Maecenas lacinia quam nec tellus lobortis, fermentum sollicitudin enim eleifend. Etiam euismod nec nunc at posuere.</span>
</div>
</div> -->
<!-- </div> -->
</div>
<div class="page">
<div class="bigpage">
<div data-intersect-class="box1clip" class="box1 clip"></div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="intersect.js"></script>
<script>
$( document ).ready(function() {
// console.log('position reported:', $('#testdiv')[0].getComputedStyle() );
// var el = $('#testdiv')[0];
// console.log('position reported:', document.defaultView.getComputedStyle(el,null).getPropertyValue('position'));
// console.log($('#testdiv').css('position'));
var clip = $('.bigtext-container').intersect({
elements: '.clip',
delayedUpdate: 0,
updateTimeout: 0
});
console.log('Ready function ran!');
// var scrollTimer;
$(window).scroll(function(div) {
// clearTimeout(scrollTimer);
// scrollTimer = setTimeout(clip.refresh, 10);
clip.refresh();
});
// var scrollTimer2;
$('.page').scroll(function(div) {
// clearTimeout(scrollTimer);
// scrollTimer = setTimeout(clip.refresh, 10);
clip.refresh();
});
// The resize listener for the main window
$(window).resize(function() {
// clearTimeout(scrollTimer);
// scrollTimer = setTimeout(clip.refresh, 10);
console.log('attempting to refresh');
clip.refreshShape();
// clip.refresh();
});
});
</script>
</body>
</html>