ctrl-prllx/index.html at master · biophonc/ctrl-prllx · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Parallaxing Demo</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<script src="js/modernizr.js"></script>
</head>
<body>

	<section class="ctrl-prllx">

		<article class="slide-1" data-callback="userFunc" data-callback-threshold="400">
			<div class="ctrl-prllx-wp-content">
				<div class="ctrl-prllx-object"></div>
				<h1>I am supposed to be a headline</h1>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
					labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
					dolores et ea rebum.</p>
			</div>
		</article>

		<article class="slide-2" data-callback="userFunc" data-callback-threshold="400">
			<div class="ctrl-prllx-wp-content">
				<div class="ctrl-prllx-object" data-factor="0.5"><span style="font-size: 120px">OBJECT I</span></div>
				<div class="ctrl-prllx-object" data-factor="0.3" style="padding-left:300px; padding-top: 100px"><span style="font-size: 120px">ONE MORE</span></div>
				<h1>I am supposed to be a headline</h1>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
					labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
					dolores et ea rebum.</p>
			</div>
		</article>

		<article class="slide-3" data-callback="userFunc" data-callback-threshold="400">
			<div class="ctrl-prllx-wp-content">
				<div class="ctrl-prllx-object" data-factor="0.7"><span style="font-size: 120px">OBJECT II</span></div>
				<h1>I am supposed to be a headline</h1>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
					labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
					dolores et ea rebum.</p>
			</div>
		</article>
	</section>

	<div class="callback-info"></div>


	<script src="js/jquery-1.8.2.js"></script>
	<script src="js/jquery-ui-1.9.1.custom.js"></script>
	<script src="js/jquery.prllx.js"></script>
	<script>

		// callback.
		var userFunc = function(arg) {

			$(".callback-info").html("Display Element-Index: " + arg.element.index());

		}

		$(document).ready(function(){

			// slides
			$(".ctrl-prllx").children().each(
				function() {
					$(this).prllx({
						"factor": 0.3
					});
				}
			);

			// objects
			$(".ctrl-prllx-object").each(
				function() {
					$(this).prllx({
						"object": true
					});
				}
			);

		});
	</script>
</body>
</html>