-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathexample.html
74 lines (64 loc) · 2.83 KB
/
example.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
<!DOCTYPE html>
<meta chaset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
#first-screen {
}
#second-screen {
}
#third-screen div{
width: 60%;
margin-left: 10%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="jquery.uscrollr.js"></script>
<script>
$(function() {
$('#first-screen, #second-screen, #third-screen, #fourth-screen, #fifth-screen').css('height', $(window).height());
// the default start for animation is when the WHOLE element is visible in the browser window
// the default stop for animation is when the bottom of the element reaches the bottom of the window
$('#second-screen h1').uScrollr({
pre: -100, // begin animation when element is 100px above the bottom of screen
post: 200, // contunie animation untill object is 200px above visible screen
callback: function($elem, r) {
$elem.css({marginLeft: r * $elem.parent().width()});
}
});
$('#third-screen #a').uScrollr({
post: -200, // animation stops 200 px BEFORE reacing top of window
callback: function($elem, r) {
$elem.css({opacity: r});
}
});
$('#third-screen #b').uScrollr({
callback: function($elem, r) {
$elem.css({opacity: 1-r});
}
});
// in the case of rotation animation i use a helper element instead of the alement itself
// because the angle of the element affects the offset of the element
$('#fourth-screen .helper').uScrollr({
callback: function($elem, r) {
var angle = 180 * r;
$elem.siblings('h2').css({
'-webkit-transform': 'rotate(' + angle + 'deg)'
});
}
});
});
</script>
<div id="first-screen">Some examples below. See the source code or download from <a href="https://github.com/bohemel/jQuery-UScollr">https://github.com/bohemel/jQuery-UScollr</a></div>
<div id="second-screen"><h1>Welcome to the jQuery UScollr Demo</h1></div>
<div id="third-screen">
<div id="a"><h2 style="color:blue;">This is a text that fades is. It is also blue!</h2></div>
<div id="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis.</div>
</div>
<div id="fourth-screen">
<h2 style="color: red; text-align: center;">THIS ROTATES!!!</h2>
<div class="helper"></div>
</div>
<div id="fifth-screen"></div>