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,8 +17,9 @@
17 border-width: 3px; 17 border-width: 3px;
18 padding: 10px; 18 padding: 10px;
19 } 19 }
20 -.content {  
21 - position: fixed; 20 +#content {
  21 + position: absolute;
  22 + box-shadow: 10px 10px 10px black;
22 top: 50%; 23 top: 50%;
23 left: 50%; 24 left: 50%;
24 /* bring your own prefixes */ 25 /* bring your own prefixes */
@@ -41,7 +42,7 @@ @@ -41,7 +42,7 @@
41 position: fixed; 42 position: fixed;
42 border-radius: 15px; 43 border-radius: 15px;
43 border-width: 2px; 44 border-width: 2px;
44 - z-index: 1; 45 + z-index: 10;
45 } 46 }
46 h1,h2,h3,h4,h5,h6 { 47 h1,h2,h3,h4,h5,h6 {
47 font-weight: normal; 48 font-weight: normal;
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 <head> 2 <head>
3 <title>Colored animated cube.</title> 3 <title>Colored animated cube.</title>
4 <link rel="stylesheet" href="css/main.css"> 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 <script type="text/javascript" src="js/gl-matrix-min.js"></script> 6 <script type="text/javascript" src="js/gl-matrix-min.js"></script>
6 <script type="text/javascript" src="js/cube.js"></script> 7 <script type="text/javascript" src="js/cube.js"></script>
7 8
@@ -36,12 +37,12 @@ @@ -36,12 +37,12 @@
36 </style> 37 </style>
37 </head> 38 </head>
38 39
39 - <body onLoad="startGl()"> 40 + <body onLoad="startGl();init()" onScroll="parallax()">
40 <div id="background"></div> 41 <div id="background"></div>
41 <div id="back" class="text"> 42 <div id="back" class="text">
42 <a href="index.html">back</a> 43 <a href="index.html">back</a>
43 </div> 44 </div>
44 - <div class="content text"> 45 + <div id="content" class="text">
45 <h1>Colored animated cube.</h1> 46 <h1>Colored animated cube.</h1>
46 <p> 47 <p>
47 An animated cube. Each side has a different color. 48 An animated cube. Each side has a different color.
@@ -2,11 +2,12 @@ @@ -2,11 +2,12 @@
2 <head> 2 <head>
3 <title> Oh my Gosh </title> 3 <title> Oh my Gosh </title>
4 <link rel="stylesheet" href="css/main.css"> 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 </head> 6 </head>
6 7
7 - <body> 8 + <body onLoad="init()" onScroll="parallax()">
8 <div id="background"></div> 9 <div id="background"></div>
9 - <div class="content text"> 10 + <div id="content" class="text">
10 <h1>Some WebGL tests</h1> 11 <h1>Some WebGL tests</h1>
11 <p> 12 <p>
12 This is my WebGL playground. The examples are taken from the 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,6 +2,7 @@
2 <head> 2 <head>
3 <title>First very simple WebGL example...</title> 3 <title>First very simple WebGL example...</title>
4 <link rel="stylesheet" href="css/main.css"> 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 <script type="text/javascript" src="js/gl-matrix-min.js"></script> 6 <script type="text/javascript" src="js/gl-matrix-min.js"></script>
6 <script type="text/javascript" src="js/square.js"></script> 7 <script type="text/javascript" src="js/square.js"></script>
7 8
@@ -30,12 +31,12 @@ @@ -30,12 +31,12 @@
30 </style> 31 </style>
31 </head> 32 </head>
32 33
33 - <body onLoad="startGl()"> 34 + <body onLoad="startGl();init()" onScroll="parallax()">
34 <div id="background"></div> 35 <div id="background"></div>
35 <div id="back" class="text"> 36 <div id="back" class="text">
36 <a href="index.html">back</a> 37 <a href="index.html">back</a>
37 </div> 38 </div>
38 - <div class="content text"> 39 + <div id="content" class="text">
39 <h1>First very simple WebGL example...</h1> 40 <h1>First very simple WebGL example...</h1>
40 <p> 41 <p>
41 This is the beginning, not even 3D. Just initialize the 42 This is the beginning, not even 3D. Just initialize the
@@ -2,6 +2,7 @@ @@ -2,6 +2,7 @@
2 <head> 2 <head>
3 <title>My first animated and textured WebGL content.</title> 3 <title>My first animated and textured WebGL content.</title>
4 <link rel="stylesheet" href="css/main.css"> 4 <link rel="stylesheet" href="css/main.css">
  5 + <script type="text/javascript" src="js/parallax.js"></script>
5 <script type="text/javascript" src="js/gl-matrix-min.js"></script> 6 <script type="text/javascript" src="js/gl-matrix-min.js"></script>
6 <script type="text/javascript" src="js/texture.js"></script> 7 <script type="text/javascript" src="js/texture.js"></script>
7 8
@@ -36,12 +37,12 @@ @@ -36,12 +37,12 @@
36 </style> 37 </style>
37 </head> 38 </head>
38 39
39 - <body onLoad="startGl()"> 40 + <body onLoad="startGl();init()" onScroll="parallax()">
40 <div id="background"></div> 41 <div id="background"></div>
41 <div id="back" class="text"> 42 <div id="back" class="text">
42 <a href="index.html">back</a> 43 <a href="index.html">back</a>
43 </div> 44 </div>
44 - <div class="content text"> 45 + <div id="content" class="text">
45 <div class="gl texture"> 46 <div class="gl texture">
46 <canvas id="cube" width="200", height="200"></canvas> 47 <canvas id="cube" width="200", height="200"></canvas>
47 </div> 48 </div>
Please register or login to post a comment