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. 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> </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="background">
<div id="content" class="text"> <div id="content" class="text">
<h1>Colored animated cube.</h1> <h1>Colored animated cube.</h1>
<p> <p>
@ -53,6 +53,7 @@
</div> </div>
<p class="result_container"></p> <p class="result_container"></p>
</div> </div>
</div>
</body> </body>
</html> </html>
<!-- vim: set ts=4 sw=4: --> <!-- vim: set ts=4 sw=4: -->

3
index.html
View File

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

3
square.html
View File

@ -32,10 +32,10 @@
</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="background">
<div id="content" class="text"> <div id="content" class="text">
<h1>First very simple WebGL example...</h1> <h1>First very simple WebGL example...</h1>
<p> <p>
@ -48,6 +48,7 @@
</div> </div>
<p class="result_container"></p> <p class="result_container"></p>
</div> </div>
</div>
</body> </body>
</html> </html>
<!-- vim: set ts=4 sw=4: --> <!-- vim: set ts=4 sw=4: -->

3
texture.html
View File

@ -38,10 +38,10 @@
</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="background">
<div id="content" class="text"> <div id="content" class="text">
<div class="gl texture"> <div class="gl texture">
<canvas id="cube" width="200", height="200"></canvas> <canvas id="cube" width="200", height="200"></canvas>
@ -64,6 +64,7 @@
</p> </p>
<h2>More to come...</h2> <h2>More to come...</h2>
</div> </div>
</div>
</body> </body>
</html> </html>
<!-- vim: set ts=4 sw=4: --> <!-- vim: set ts=4 sw=4: -->
Write Preview
Loading…
Cancel
Save