webgl / webgl_tutorials · Commits

Commit b3ac61966a2ce97dbc14a444a1d40f4bb5bd649c

Authored by Georg Hopp
1 parent d8dd1126

Add some kind of parallax effect

Inline Side-by-side
Showing 6 changed files with 50 additions and 11 deletions
... ... @@ -17,8 +17,9 @@
17 17 border-width: 3px;
18 18 padding: 10px;
19 19 }
20   -.content {
21   - position: fixed;
  20 +#content {
  21 + position: absolute;
  22 + box-shadow: 10px 10px 10px black;
22 23 top: 50%;
23 24 left: 50%;
24 25 /* bring your own prefixes */
... ... @@ -41,7 +42,7 @@
41 42 position: fixed;
42 43 border-radius: 15px;
43 44 border-width: 2px;
44   - z-index: 1;
  45 + z-index: 10;
45 46 }
46 47 h1,h2,h3,h4,h5,h6 {
47 48 font-weight: normal;
... ...
... ... @@ -2,6 +2,7 @@
2 2 <head>
3 3 <title>Colored animated cube.</title>
4 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 6 <script type="text/javascript" src="js/gl-matrix-min.js"></script>
6 7 <script type="text/javascript" src="js/cube.js"></script>
7 8
... ... @@ -36,12 +37,12 @@
36 37 </style>
37 38 </head>
38 39
39   - <body onLoad="startGl()">
  40 + <body onLoad="startGl();init()" onScroll="parallax()">
40 41 <div id="background"></div>
41 42 <div id="back" class="text">
42 43 <a href="index.html">back</a>
43 44 </div>
44   - <div class="content text">
  45 + <div id="content" class="text">
45 46 <h1>Colored animated cube.</h1>
46 47 <p>
47 48 An animated cube. Each side has a different color.
... ...
... ... @@ -2,11 +2,12 @@
2 2 <head>
3 3 <title> Oh my Gosh </title>
4 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 6 </head>
6 7
7   - <body>
  8 + <body onLoad="init()" onScroll="parallax()">
8 9 <div id="background"></div>
9   - <div class="content text">
  10 + <div id="content" class="text">
10 11 <h1>Some WebGL tests</h1>
11 12 <p>
12 13 This is my WebGL playground. The examples are taken from the
... ...
  1 +/*
  2 + * OK, this is not really a parallax... I just want to see my content move
  3 + * somewhat faster than the background... hey, ho, let's go
  4 + */
  5 +var background, content, content_top, content_left;
  6 +
  7 +function init() {
  8 + content = document.getElementById("content");
  9 + content_top = parseFloat(window.getComputedStyle(content).top);
  10 + content_left = parseFloat(window.getComputedStyle(content).left);
  11 + background = document.getElementById("background");
  12 + background_top = parseFloat(window.getComputedStyle(background).top);
  13 + background_left = parseFloat(window.getComputedStyle(background).left);
  14 +}
  15 +
  16 +function parallax() {
  17 + if (! document.documentElement) return;
  18 +
  19 + var v_scroll =
  20 + (document.documentElement
  21 + && document.documentElement.scrollTop)
  22 + || document.body.scrollTop;
  23 +
  24 + var h_scroll =
  25 + (document.documentElement
  26 + && document.documentElement.scrollLeft)
  27 + || document.body.scrollLeft;
  28 +
  29 + background.style.top = background_top + Math.round(v_scroll/2);
  30 + background.style.left = background_left + Math.round(h_scroll/2);
  31 + content.style.top = content_top + Math.round(v_scroll/3.0);
  32 + content.style.left = content_left + Math.round(h_scroll/3.0);
  33 +}
  34 +// vim: set ts=2 sw=2:
... ...
... ... @@ -2,6 +2,7 @@
2 2 <head>
3 3 <title>First very simple WebGL example...</title>
4 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 6 <script type="text/javascript" src="js/gl-matrix-min.js"></script>
6 7 <script type="text/javascript" src="js/square.js"></script>
7 8
... ... @@ -30,12 +31,12 @@
30 31 </style>
31 32 </head>
32 33
33   - <body onLoad="startGl()">
  34 + <body onLoad="startGl();init()" onScroll="parallax()">
34 35 <div id="background"></div>
35 36 <div id="back" class="text">
36 37 <a href="index.html">back</a>
37 38 </div>
38   - <div class="content text">
  39 + <div id="content" class="text">
39 40 <h1>First very simple WebGL example...</h1>
40 41 <p>
41 42 This is the beginning, not even 3D. Just initialize the
... ...
... ... @@ -2,6 +2,7 @@
2 2 <head>
3 3 <title>My first animated and textured WebGL content.</title>
4 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 6 <script type="text/javascript" src="js/gl-matrix-min.js"></script>
6 7 <script type="text/javascript" src="js/texture.js"></script>
7 8
... ... @@ -36,12 +37,12 @@
36 37 </style>
37 38 </head>
38 39
39   - <body onLoad="startGl()">
  40 + <body onLoad="startGl();init()" onScroll="parallax()">
40 41 <div id="background"></div>
41 42 <div id="back" class="text">
42 43 <a href="index.html">back</a>
43 44 </div>
44   - <div class="content text">
  45 + <div id="content" class="text">
45 46 <div class="gl texture">
46 47 <canvas id="cube" width="200", height="200"></canvas>
47 48 </div>
... ...
Please register or login to post a comment