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

Add some kind of parallax effect

master
Georg Hopp 10 years ago
parent
d8dd1126fd
commit
b3ac61966a
6 changed files with 50 additions and 11 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. 7
      css/main.css
  2. 5
      cube.html
  3. 5
      index.html
  4. 34
      js/parallax.js
  5. 5
      square.html
  6. 5
      texture.html

7
css/main.css
View File

@ -17,8 +17,9 @@
border-width: 3px; border-width: 3px;
padding: 10px; padding: 10px;
} }
.content {
position: fixed;
#content {
position: absolute;
box-shadow: 10px 10px 10px black;
top: 50%; top: 50%;
left: 50%; left: 50%;
/* bring your own prefixes */ /* bring your own prefixes */
@ -41,7 +42,7 @@
position: fixed; position: fixed;
border-radius: 15px; border-radius: 15px;
border-width: 2px; border-width: 2px;
z-index: 1;
z-index: 10;
} }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
font-weight: normal; font-weight: normal;

5
cube.html
View File

@ -2,6 +2,7 @@
<head> <head>
<title>Colored animated cube.</title> <title>Colored animated cube.</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/gl-matrix-min.js"></script> <script type="text/javascript" src="js/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/cube.js"></script> <script type="text/javascript" src="js/cube.js"></script>
@ -36,12 +37,12 @@
</style> </style>
</head> </head>
<body onLoad="startGl()">
<body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div> <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 class="content text">
<div id="content" class="text">
<h1>Colored animated cube.</h1> <h1>Colored animated cube.</h1>
<p> <p>
An animated cube. Each side has a different color. An animated cube. Each side has a different color.

5
index.html
View File

@ -2,11 +2,12 @@
<head> <head>
<title> Oh my Gosh </title> <title> Oh my Gosh </title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/parallax.js"></script>
</head> </head>
<body>
<body onLoad="init()" onScroll="parallax()">
<div id="background"></div> <div id="background"></div>
<div class="content text">
<div id="content" class="text">
<h1>Some WebGL tests</h1> <h1>Some WebGL tests</h1>
<p> <p>
This is my WebGL playground. The examples are taken from the This is my WebGL playground. The examples are taken from the

34
js/parallax.js
View File

@ -0,0 +1,34 @@
/*
* 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;
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);
}
function parallax() {
if (! document.documentElement) return;
var v_scroll =
(document.documentElement
&& document.documentElement.scrollTop)
|| document.body.scrollTop;
var h_scroll =
(document.documentElement
&& 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);
}
// vim: set ts=2 sw=2:

5
square.html
View File

@ -2,6 +2,7 @@
<head> <head>
<title>First very simple WebGL example...</title> <title>First very simple WebGL example...</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/gl-matrix-min.js"></script> <script type="text/javascript" src="js/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/square.js"></script> <script type="text/javascript" src="js/square.js"></script>
@ -30,12 +31,12 @@
</style> </style>
</head> </head>
<body onLoad="startGl()">
<body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div> <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 class="content text">
<div id="content" class="text">
<h1>First very simple WebGL example...</h1> <h1>First very simple WebGL example...</h1>
<p> <p>
This is the beginning, not even 3D. Just initialize the This is the beginning, not even 3D. Just initialize the

5
texture.html
View File

@ -2,6 +2,7 @@
<head> <head>
<title>My first animated and textured WebGL content.</title> <title>My first animated and textured WebGL content.</title>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/parallax.js"></script>
<script type="text/javascript" src="js/gl-matrix-min.js"></script> <script type="text/javascript" src="js/gl-matrix-min.js"></script>
<script type="text/javascript" src="js/texture.js"></script> <script type="text/javascript" src="js/texture.js"></script>
@ -36,12 +37,12 @@
</style> </style>
</head> </head>
<body onLoad="startGl()">
<body onLoad="startGl();init()" onScroll="parallax()">
<div id="background"></div> <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 class="content 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>
</div> </div>

Write Preview
Loading…
Cancel
Save