diff --git a/cube.html b/cube.html index a56255f..2b9975b 100644 --- a/cube.html +++ b/cube.html @@ -38,20 +38,21 @@ -
back
-
-

Colored animated cube.

-

- An animated cube. Each side has a different color. -

-

Result

-
- +
+
+

Colored animated cube.

+

+ An animated cube. Each side has a different color. +

+

Result

+
+ +
+

-

diff --git a/index.html b/index.html index 7dc35c2..cd90d40 100644 --- a/index.html +++ b/index.html @@ -6,23 +6,24 @@ -
-
-

Some WebGL tests

-

- This is my WebGL playground. The examples are taken from the - book - Programming 3D Applications with HTML5 and WebGL written - by Tony Parisi and published at O'Reily. -

-

Examples

-

-

-

+
+
+

Some WebGL tests

+

+ This is my WebGL playground. The examples are taken from the + book + Programming 3D Applications with HTML5 and WebGL written + by Tony Parisi and published at O'Reily. +

+

Examples

+

+

+

+
diff --git a/js/parallax.js b/js/parallax.js index 307e56b..25c1446 100644 --- a/js/parallax.js +++ b/js/parallax.js @@ -2,15 +2,38 @@ * OK, this is not really a parallax... I just want to see my content move * somewhat faster than the background... hey, ho, let's go */ -var background, content, content_top, content_left; +var content, content_top, content_left, content_width, content_height; +var width_delta, height_delta; function init() { content = document.getElementById("content"); content_top = parseFloat(window.getComputedStyle(content).top); content_left = parseFloat(window.getComputedStyle(content).left); - background = document.getElementById("background"); - background_top = parseFloat(window.getComputedStyle(background).top); - background_left = parseFloat(window.getComputedStyle(background).left); + content_width = parseFloat(window.getComputedStyle(content).width); + content_height = parseFloat(window.getComputedStyle(content).height); + + var body = document.body, + html = document.documentElement; + + var doc = Math.max( + body.scrollHeight, + body.offsetHeight, + html.clientHeight, + html.scrollHeight, + html.offsetHeight); + + height_delta = (doc-window.innerHeight)/2; + + doc = Math.max( + body.scrollWidth, + body.offsetWidth, + html.clientWidth, + html.scrollWidth, + html.offsetWidth); + + width_delta = (doc-window.innerWidth)/2; + + window.scrollTo(width_delta, height_delta); } function parallax() { @@ -26,9 +49,7 @@ function parallax() { && document.documentElement.scrollLeft) || document.body.scrollLeft; - background.style.top = background_top + Math.round(v_scroll/2); - background.style.left = background_left + Math.round(h_scroll/2); - content.style.top = content_top + Math.round(v_scroll/3.0); - content.style.left = content_left + Math.round(h_scroll/3.0); + content.style.left = content_left - ((h_scroll - width_delta)/16); + content.style.top = content_top - ((v_scroll - height_delta)/16); } // vim: set ts=2 sw=2: diff --git a/square.html b/square.html index a897164..7490e48 100644 --- a/square.html +++ b/square.html @@ -32,21 +32,22 @@ -
back
-
-

First very simple WebGL example...

-

- This is the beginning, not even 3D. Just initialize the - GL context and draw a square. -

-

Result

-
- +
+
+

First very simple WebGL example...

+

+ This is the beginning, not even 3D. Just initialize the + GL context and draw a square. +

+

Result

+
+ +
+

-

diff --git a/texture.html b/texture.html index c60ac3a..8b6db12 100644 --- a/texture.html +++ b/texture.html @@ -38,31 +38,32 @@ -
back
-
-
- +
+
+
+ +
+

My first animated and textured WebGL content.

+

+ Finally my first small steps in the new world of WebGL. It is + pretty cool to have hardware accelerated, animated 3D objects + in your page. +

+

Hidden on purpose.

+

+ This paragraph is hidden on purpose to see how the transparent + background of the GL canvas behaves if positioned above another + element. Now, we just fill in some stuff to get the paragraph + filled with some more stuff. Eventually we will have so much text + that it becomes big enought for the height of the GL canvas. Well, + as the canvas is transparant at least the maximum height of the + cube. +

+

More to come...

-

My first animated and textured WebGL content.

-

- Finally my first small steps in the new world of WebGL. It is - pretty cool to have hardware accelerated, animated 3D objects - in your page. -

-

Hidden on purpose.

-

- This paragraph is hidden on purpose to see how the transparent - background of the GL canvas behaves if positioned above another - element. Now, we just fill in some stuff to get the paragraph - filled with some more stuff. Eventually we will have so much text - that it becomes big enought for the height of the GL canvas. Well, - as the canvas is transparant at least the maximum height of the - cube. -

-

More to come...