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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      cube.html
  2. 3
      index.html
  3. 37
      js/parallax.js
  4. 3
      square.html
  5. 3
      texture.html

3
cube.html
View File

@ -38,10 +38,10 @@
</head>
<body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div>
<div id="back" class="text">
<a href="index.html">back</a>
</div>
<div id="background">
<div id="content" class="text">
<h1>Colored animated cube.</h1>
<p>
@ -53,6 +53,7 @@
</div>
<p class="result_container"></p>
</div>
</div>
</body>
</html>
<!-- vim: set ts=4 sw=4: -->

3
index.html
View File

@ -6,7 +6,7 @@
</head>
<body onLoad="init()" onScroll="parallax()">
<div id="background"></div>
<div id="background">
<div id="content" class="text">
<h1>Some WebGL tests</h1>
<p>
@ -24,6 +24,7 @@
</ul>
</p>
</div>
</div>
</body>
</html>
<!-- vim: set ts=4 sw=4: -->

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
* 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:

3
square.html
View File

@ -32,10 +32,10 @@
</head>
<body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div>
<div id="back" class="text">
<a href="index.html">back</a>
</div>
<div id="background">
<div id="content" class="text">
<h1>First very simple WebGL example...</h1>
<p>
@ -48,6 +48,7 @@
</div>
<p class="result_container"></p>
</div>
</div>
</body>
</html>
<!-- vim: set ts=4 sw=4: -->

3
texture.html
View File

@ -38,10 +38,10 @@
</head>
<body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div>
<div id="back" class="text">
<a href="index.html">back</a>
</div>
<div id="background">
<div id="content" class="text">
<div class="gl texture">
<canvas id="cube" width="200", height="200"></canvas>
@ -64,6 +64,7 @@
</p>
<h2>More to come...</h2>
</div>
</div>
</body>
</html>
<!-- vim: set ts=4 sw=4: -->
Write Preview
Loading…
Cancel
Save