webgl / webgl_tutorials · Commits

Commit 10559fa3f8931fdd76c7cb76d8717810b175c856

Authored by Georg Hopp
1 parent b3ac6196

finalize my parallax effect

Inline Side-by-side
Showing 5 changed files with 92 additions and 67 deletions
... ... @@ -38,20 +38,21 @@
38 38 </head>
39 39
40 40 <body onLoad="startGl();init()" onScroll="parallax()">
41   - <div id="background"></div>
42 41 <div id="back" class="text">
43 42 <a href="index.html">back</a>
44 43 </div>
45   - <div id="content" class="text">
46   - <h1>Colored animated cube.</h1>
47   - <p>
48   - An animated cube. Each side has a different color.
49   - </p>
50   - <h2>Result</h2>
51   - <div class="gl">
52   - <canvas id="cube" width="200" height="200"></canvas>
  44 + <div id="background">
  45 + <div id="content" class="text">
  46 + <h1>Colored animated cube.</h1>
  47 + <p>
  48 + An animated cube. Each side has a different color.
  49 + </p>
  50 + <h2>Result</h2>
  51 + <div class="gl">
  52 + <canvas id="cube" width="200" height="200"></canvas>
  53 + </div>
  54 + <p class="result_container"></p>
53 55 </div>
54   - <p class="result_container"></p>
55 56 </div>
56 57 </body>
57 58 </html>
... ...
... ... @@ -6,23 +6,24 @@
6 6 </head>
7 7
8 8 <body onLoad="init()" onScroll="parallax()">
9   - <div id="background"></div>
10   - <div id="content" class="text">
11   - <h1>Some WebGL tests</h1>
12   - <p>
13   - This is my WebGL playground. The examples are taken from the
14   - book <a href="http://oreil.ly/program-3d-apps-html5-webGL">
15   - Programming 3D Applications with HTML5 and WebGL</a> written
16   - by Tony Parisi and published at O'Reily.
17   - </p>
18   - <h2>Examples</h2>
19   - <p>
20   - <ul>
21   - <li><a href="square.html">square</a></li>
22   - <li><a href="cube.html">cube</a></li>
23   - <li><a href="texture.html">texture</a></li>
24   - </ul>
25   - </p>
  9 + <div id="background">
  10 + <div id="content" class="text">
  11 + <h1>Some WebGL tests</h1>
  12 + <p>
  13 + This is my WebGL playground. The examples are taken from the
  14 + book <a href="http://oreil.ly/program-3d-apps-html5-webGL">
  15 + Programming 3D Applications with HTML5 and WebGL</a> written
  16 + by Tony Parisi and published at O'Reily.
  17 + </p>
  18 + <h2>Examples</h2>
  19 + <p>
  20 + <ul>
  21 + <li><a href="square.html">square</a></li>
  22 + <li><a href="cube.html">cube</a></li>
  23 + <li><a href="texture.html">texture</a></li>
  24 + </ul>
  25 + </p>
  26 + </div>
26 27 </div>
27 28 </body>
28 29 </html>
... ...
... ... @@ -2,15 +2,38 @@
2 2 * OK, this is not really a parallax... I just want to see my content move
3 3 * somewhat faster than the background... hey, ho, let's go
4 4 */
5   -var background, content, content_top, content_left;
  5 +var content, content_top, content_left, content_width, content_height;
  6 +var width_delta, height_delta;
6 7
7 8 function init() {
8 9 content = document.getElementById("content");
9 10 content_top = parseFloat(window.getComputedStyle(content).top);
10 11 content_left = parseFloat(window.getComputedStyle(content).left);
11   - background = document.getElementById("background");
12   - background_top = parseFloat(window.getComputedStyle(background).top);
13   - background_left = parseFloat(window.getComputedStyle(background).left);
  12 + content_width = parseFloat(window.getComputedStyle(content).width);
  13 + content_height = parseFloat(window.getComputedStyle(content).height);
  14 +
  15 + var body = document.body,
  16 + html = document.documentElement;
  17 +
  18 + var doc = Math.max(
  19 + body.scrollHeight,
  20 + body.offsetHeight,
  21 + html.clientHeight,
  22 + html.scrollHeight,
  23 + html.offsetHeight);
  24 +
  25 + height_delta = (doc-window.innerHeight)/2;
  26 +
  27 + doc = Math.max(
  28 + body.scrollWidth,
  29 + body.offsetWidth,
  30 + html.clientWidth,
  31 + html.scrollWidth,
  32 + html.offsetWidth);
  33 +
  34 + width_delta = (doc-window.innerWidth)/2;
  35 +
  36 + window.scrollTo(width_delta, height_delta);
14 37 }
15 38
16 39 function parallax() {
... ... @@ -26,9 +49,7 @@ function parallax() {
26 49 && document.documentElement.scrollLeft)
27 50 || document.body.scrollLeft;
28 51
29   - background.style.top = background_top + Math.round(v_scroll/2);
30   - background.style.left = background_left + Math.round(h_scroll/2);
31   - content.style.top = content_top + Math.round(v_scroll/3.0);
32   - content.style.left = content_left + Math.round(h_scroll/3.0);
  52 + content.style.left = content_left - ((h_scroll - width_delta)/16);
  53 + content.style.top = content_top - ((v_scroll - height_delta)/16);
33 54 }
34 55 // vim: set ts=2 sw=2:
... ...
... ... @@ -32,21 +32,22 @@
32 32 </head>
33 33
34 34 <body onLoad="startGl();init()" onScroll="parallax()">
35   - <div id="background"></div>
36 35 <div id="back" class="text">
37 36 <a href="index.html">back</a>
38 37 </div>
39   - <div id="content" class="text">
40   - <h1>First very simple WebGL example...</h1>
41   - <p>
42   - This is the beginning, not even 3D. Just initialize the
43   - GL context and draw a square.
44   - </p>
45   - <h2>Result</h2>
46   - <div class="gl">
47   - <canvas id="square" width="200" height="200"></canvas>
  38 + <div id="background">
  39 + <div id="content" class="text">
  40 + <h1>First very simple WebGL example...</h1>
  41 + <p>
  42 + This is the beginning, not even 3D. Just initialize the
  43 + GL context and draw a square.
  44 + </p>
  45 + <h2>Result</h2>
  46 + <div class="gl">
  47 + <canvas id="square" width="200" height="200"></canvas>
  48 + </div>
  49 + <p class="result_container"></p>
48 50 </div>
49   - <p class="result_container"></p>
50 51 </div>
51 52 </body>
52 53 </html>
... ...
... ... @@ -38,31 +38,32 @@
38 38 </head>
39 39
40 40 <body onLoad="startGl();init()" onScroll="parallax()">
41   - <div id="background"></div>
42 41 <div id="back" class="text">
43 42 <a href="index.html">back</a>
44 43 </div>
45   - <div id="content" class="text">
46   - <div class="gl texture">
47   - <canvas id="cube" width="200", height="200"></canvas>
  44 + <div id="background">
  45 + <div id="content" class="text">
  46 + <div class="gl texture">
  47 + <canvas id="cube" width="200", height="200"></canvas>
  48 + </div>
  49 + <h1>My first animated and textured WebGL content.</h1>
  50 + <p>
  51 + Finally my first small steps in the new world of WebGL. It is
  52 + pretty cool to have hardware accelerated, animated 3D objects
  53 + in your page.
  54 + </p>
  55 + <h2>Hidden on purpose.</h2>
  56 + <p>
  57 + This paragraph is hidden on purpose to see how the transparent
  58 + background of the GL canvas behaves if positioned above another
  59 + element. Now, we just fill in some stuff to get the paragraph
  60 + filled with some more stuff. Eventually we will have so much text
  61 + that it becomes big enought for the height of the GL canvas. Well,
  62 + as the canvas is transparant at least the maximum height of the
  63 + cube.
  64 + </p>
  65 + <h2>More to come...</h2>
48 66 </div>
49   - <h1>My first animated and textured WebGL content.</h1>
50   - <p>
51   - Finally my first small steps in the new world of WebGL. It is
52   - pretty cool to have hardware accelerated, animated 3D objects
53   - in your page.
54   - </p>
55   - <h2>Hidden on purpose.</h2>
56   - <p>
57   - This paragraph is hidden on purpose to see how the transparent
58   - background of the GL canvas behaves if positioned above another
59   - element. Now, we just fill in some stuff to get the paragraph
60   - filled with some more stuff. Eventually we will have so much text
61   - that it becomes big enought for the height of the GL canvas. Well,
62   - as the canvas is transparant at least the maximum height of the
63   - cube.
64   - </p>
65   - <h2>More to come...</h2>
66 67 </div>
67 68 </body>
68 69 </html>
... ...
Please register or login to post a comment