ghopp
/
webgl_tutorials
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

finalize my parallax effect

master
Georg Hopp 10 years ago
parent
b3ac61966a
commit
10559fa3f8
5 changed files with 92 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 21
      cube.html
  2. 35
      index.html
  3. 37
      js/parallax.js
  4. 23
      square.html
  5. 43
      texture.html

21
cube.html
View File

@ -38,20 +38,21 @@
</head> </head>
<body onLoad="startGl();init()" onScroll="parallax()"> <body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div>
<div id="back" class="text"> <div id="back" class="text">
<a href="index.html">back</a> <a href="index.html">back</a>
</div> </div>
<div id="content" class="text">
<h1>Colored animated cube.</h1>
<p>
An animated cube. Each side has a different color.
</p>
<h2>Result</h2>
<div class="gl">
<canvas id="cube" width="200" height="200"></canvas>
<div id="background">
<div id="content" class="text">
<h1>Colored animated cube.</h1>
<p>
An animated cube. Each side has a different color.
</p>
<h2>Result</h2>
<div class="gl">
<canvas id="cube" width="200" height="200"></canvas>
</div>
<p class="result_container"></p>
</div> </div>
<p class="result_container"></p>
</div> </div>
</body> </body>
</html> </html>

35
index.html
View File

@ -6,23 +6,24 @@
</head> </head>
<body onLoad="init()" onScroll="parallax()"> <body onLoad="init()" onScroll="parallax()">
<div id="background"></div>
<div id="content" class="text">
<h1>Some WebGL tests</h1>
<p>
This is my WebGL playground. The examples are taken from the
book <a href="http://oreil.ly/program-3d-apps-html5-webGL">
Programming 3D Applications with HTML5 and WebGL</a> written
by Tony Parisi and published at O'Reily.
</p>
<h2>Examples</h2>
<p>
<ul>
<li><a href="square.html">square</a></li>
<li><a href="cube.html">cube</a></li>
<li><a href="texture.html">texture</a></li>
</ul>
</p>
<div id="background">
<div id="content" class="text">
<h1>Some WebGL tests</h1>
<p>
This is my WebGL playground. The examples are taken from the
book <a href="http://oreil.ly/program-3d-apps-html5-webGL">
Programming 3D Applications with HTML5 and WebGL</a> written
by Tony Parisi and published at O'Reily.
</p>
<h2>Examples</h2>
<p>
<ul>
<li><a href="square.html">square</a></li>
<li><a href="cube.html">cube</a></li>
<li><a href="texture.html">texture</a></li>
</ul>
</p>
</div>
</div> </div>
</body> </body>
</html> </html>

37
js/parallax.js
View File

@ -2,15 +2,38 @@
* OK, this is not really a parallax... I just want to see my content move * 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 * 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() { function init() {
content = document.getElementById("content"); content = document.getElementById("content");
content_top = parseFloat(window.getComputedStyle(content).top); content_top = parseFloat(window.getComputedStyle(content).top);
content_left = parseFloat(window.getComputedStyle(content).left); 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() { function parallax() {
@ -26,9 +49,7 @@ function parallax() {
&& document.documentElement.scrollLeft) && document.documentElement.scrollLeft)
|| document.body.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: // vim: set ts=2 sw=2:

23
square.html
View File

@ -32,21 +32,22 @@
</head> </head>
<body onLoad="startGl();init()" onScroll="parallax()"> <body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div>
<div id="back" class="text"> <div id="back" class="text">
<a href="index.html">back</a> <a href="index.html">back</a>
</div> </div>
<div id="content" class="text">
<h1>First very simple WebGL example...</h1>
<p>
This is the beginning, not even 3D. Just initialize the
GL context and draw a square.
</p>
<h2>Result</h2>
<div class="gl">
<canvas id="square" width="200" height="200"></canvas>
<div id="background">
<div id="content" class="text">
<h1>First very simple WebGL example...</h1>
<p>
This is the beginning, not even 3D. Just initialize the
GL context and draw a square.
</p>
<h2>Result</h2>
<div class="gl">
<canvas id="square" width="200" height="200"></canvas>
</div>
<p class="result_container"></p>
</div> </div>
<p class="result_container"></p>
</div> </div>
</body> </body>
</html> </html>

43
texture.html
View File

@ -38,31 +38,32 @@
</head> </head>
<body onLoad="startGl();init()" onScroll="parallax()"> <body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div>
<div id="back" class="text"> <div id="back" class="text">
<a href="index.html">back</a> <a href="index.html">back</a>
</div> </div>
<div id="content" class="text">
<div class="gl texture">
<canvas id="cube" width="200", height="200"></canvas>
<div id="background">
<div id="content" class="text">
<div class="gl texture">
<canvas id="cube" width="200", height="200"></canvas>
</div>
<h1>My first animated and textured WebGL content.</h1>
<p>
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.
</p>
<h2>Hidden on purpose.</h2>
<p>
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.
</p>
<h2>More to come...</h2>
</div> </div>
<h1>My first animated and textured WebGL content.</h1>
<p>
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.
</p>
<h2>Hidden on purpose.</h2>
<p>
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.
</p>
<h2>More to come...</h2>
</div> </div>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save