-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patheyetest.html
90 lines (80 loc) · 4.18 KB
/
eyetest.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="description" content="" />
<title>jQuery.parallax</title>
<script>document.documentElement.className = 'js';</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<!-- Force latest IE rendering engine & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="../css/base2.css" />
</head>
<body>
<div class="wrap">
<div id="port">
<div class="parallax-layer" alt="" style="width:42em; height:26em;">
<div class="square" style="width:7em; height:7em; margin: 10em 0 0 18em;">
<span style="font-size: 20pt;">E</span><br />
<span style="font-size: 16pt;">F P</span><br />
<span style="font-size: 12pt;">T O Z</span><br />
<span style="font-size: 8pt;">L P E D</span><br />
<span style="font-size: 6pt;">P E C F D</span>
</div>
</div>
<div class="parallax-layer" alt="" style="width:44em; height:28em;">
<div class="header" style="width:42em; height:2em;"><span>WEB DEPTH OF FIELD</span></div>
<div class="square" style="width:8em; height:8em; margin: 12em 0 0 20em;">
<span style="font-size: 24pt;">E</span><br />
<span style="font-size: 18pt;">F P</span><br />
<span style="font-size: 14pt;">T O Z</span><br />
<span style="font-size: 12pt;">L P E D</span><br />
<span style="font-size: 10pt;">P E C F D</span>
</div>
<div class="footer" style="width:42em; height:6em;"><span>Depth of field using CSS & JS. Guaranteed to not work on any non-Firefox/Chrome browser.</span><br /><br />
<span>Made using jParallax [1] and this Dudley Storey tutorial [2].</span><br /><br />
<span>Source code available on GitHub [3].</span></div>
</div>
<div class="parallax-layer" alt="" style="width:46em; height:30em;">
<div class="square" style="width:9em; height:9em; margin: 14em 0 0 22em;">
<span style="font-size: 28pt;">E</span><br />
<span style="font-size: 20pt;">F P</span><br />
<span style="font-size: 18pt;">T O Z</span><br />
<span style="font-size: 14pt;">L P E D</span><br />
<span style="font-size: 10pt;">P E C F D</span>
</div>
</div>
<div class="parallax-layer" alt="" style="width:48em; height:32em;">
<div class="square" style="width:10em; height:10em; margin: 16em 0 0 24em;">
<span style="font-size: 32pt;">E</span><br />
<span style="font-size: 24pt;">F P</span><br />
<span style="font-size: 20pt;">T O Z</span><br />
<span style="font-size: 16pt;">L P E D</span><br />
<span style="font-size: 12pt;">P E C F D</span>
</div>
</div>
</div>
</div>
<p>[1]: <a href="http://stephband.info/jparallax/">http://stephband.info/jparallax/</a><br />
[2]: <a href="http://demosthenes.info/blog/534/Crossbrowser-Image-Blur">http://demosthenes.info/blog/534/Crossbrowser-Image-Blur</a><br />
[3]: <a href="#">n/a</a></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script src="../js/jquery.parallax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
// Declare parallax on layers
jQuery('.parallax-layer').parallax({
mouseport: jQuery("#port")
}),
jQuery('.square').parallax({
mouseport: jQuery("#port")
},
{xparallax: '10px', yparallax: '10px'},
{xparallax: '40px', yparallax: '40px'},
{xparallax: '80px', yparallax: '80px'},
{xparallax: '120px', yparallax: '120px'});
});
</script>
</body>
</html>