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,20 +38,21 @@
38 </head> 38 </head>
39 39
40 <body onLoad="startGl();init()" onScroll="parallax()"> 40 <body onLoad="startGl();init()" onScroll="parallax()">
41 - <div id="background"></div>  
42 <div id="back" class="text"> 41 <div id="back" class="text">
43 <a href="index.html">back</a> 42 <a href="index.html">back</a>
44 </div> 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 </div> 55 </div>
54 - <p class="result_container"></p>  
55 </div> 56 </div>
56 </body> 57 </body>
57 </html> 58 </html>
@@ -6,23 +6,24 @@ @@ -6,23 +6,24 @@
6 </head> 6 </head>
7 7
8 <body onLoad="init()" onScroll="parallax()"> 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 </div> 27 </div>
27 </body> 28 </body>
28 </html> 29 </html>
@@ -2,15 +2,38 @@ @@ -2,15 +2,38 @@
2 * OK, this is not really a parallax... I just want to see my content move 2 * OK, this is not really a parallax... I just want to see my content move
3 * somewhat faster than the background... hey, ho, let's go 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 function init() { 8 function init() {
8 content = document.getElementById("content"); 9 content = document.getElementById("content");
9 content_top = parseFloat(window.getComputedStyle(content).top); 10 content_top = parseFloat(window.getComputedStyle(content).top);
10 content_left = parseFloat(window.getComputedStyle(content).left); 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 function parallax() { 39 function parallax() {
@@ -26,9 +49,7 @@ function parallax() { @@ -26,9 +49,7 @@ function parallax() {
26 && document.documentElement.scrollLeft) 49 && document.documentElement.scrollLeft)
27 || document.body.scrollLeft; 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 // vim: set ts=2 sw=2: 55 // vim: set ts=2 sw=2:
@@ -32,21 +32,22 @@ @@ -32,21 +32,22 @@
32 </head> 32 </head>
33 33
34 <body onLoad="startGl();init()" onScroll="parallax()"> 34 <body onLoad="startGl();init()" onScroll="parallax()">
35 - <div id="background"></div>  
36 <div id="back" class="text"> 35 <div id="back" class="text">
37 <a href="index.html">back</a> 36 <a href="index.html">back</a>
38 </div> 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 </div> 50 </div>
49 - <p class="result_container"></p>  
50 </div> 51 </div>
51 </body> 52 </body>
52 </html> 53 </html>
@@ -38,31 +38,32 @@ @@ -38,31 +38,32 @@
38 </head> 38 </head>
39 39
40 <body onLoad="startGl();init()" onScroll="parallax()"> 40 <body onLoad="startGl();init()" onScroll="parallax()">
41 - <div id="background"></div>  
42 <div id="back" class="text"> 41 <div id="back" class="text">
43 <a href="index.html">back</a> 42 <a href="index.html">back</a>
44 </div> 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 </div> 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 </div> 67 </div>
67 </body> 68 </body>
68 </html> 69 </html>
Please register or login to post a comment