From b3ac61966a2ce97dbc14a444a1d40f4bb5bd649c Mon Sep 17 00:00:00 2001 From: Georg Hopp Date: Wed, 30 Mar 2016 17:31:29 +0200 Subject: [PATCH] Add some kind of parallax effect --- css/main.css | 7 ++++--- cube.html | 5 +++-- index.html | 5 +++-- js/parallax.js | 34 ++++++++++++++++++++++++++++++++++ square.html | 5 +++-- texture.html | 5 +++-- 6 files changed, 50 insertions(+), 11 deletions(-) create mode 100644 js/parallax.js diff --git a/css/main.css b/css/main.css index 6099e0d..5d52032 100644 --- a/css/main.css +++ b/css/main.css @@ -17,8 +17,9 @@ border-width: 3px; padding: 10px; } -.content { - position: fixed; +#content { + position: absolute; + box-shadow: 10px 10px 10px black; top: 50%; left: 50%; /* bring your own prefixes */ @@ -41,7 +42,7 @@ position: fixed; border-radius: 15px; border-width: 2px; - z-index: 1; + z-index: 10; } h1,h2,h3,h4,h5,h6 { font-weight: normal; diff --git a/cube.html b/cube.html index 9fbcee0..a56255f 100644 --- a/cube.html +++ b/cube.html @@ -2,6 +2,7 @@ Colored animated cube. + @@ -36,12 +37,12 @@ - +
back
-
+

Colored animated cube.

An animated cube. Each side has a different color. diff --git a/index.html b/index.html index 534095d..7dc35c2 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,12 @@ Oh my Gosh + - +

-
+

Some WebGL tests

This is my WebGL playground. The examples are taken from the diff --git a/js/parallax.js b/js/parallax.js new file mode 100644 index 0000000..307e56b --- /dev/null +++ b/js/parallax.js @@ -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: diff --git a/square.html b/square.html index ac4a555..a897164 100644 --- a/square.html +++ b/square.html @@ -2,6 +2,7 @@ First very simple WebGL example... + @@ -30,12 +31,12 @@ - +

back
-
+

First very simple WebGL example...

This is the beginning, not even 3D. Just initialize the diff --git a/texture.html b/texture.html index 6730931..c60ac3a 100644 --- a/texture.html +++ b/texture.html @@ -2,6 +2,7 @@ My first animated and textured WebGL content. + @@ -36,12 +37,12 @@ - +

back
-
+