diff --git a/3d.css b/3d.css
index 3529c47..9c9bcec 100644
--- a/3d.css
+++ b/3d.css
@@ -35,6 +35,27 @@ html, body { width: 100%; height: 100%; overflow: hidden; }
background: blue;
}
+ .css3d :hover { opacity: 0.7; }
+
+ .css3d #a { pointer-events: none; }
+ .css3d #a * { pointer-events: all; }
+ .css3d #a:target { pointer-events: all; }
+ .css3d #a:hover { pointer-events: all; width: 70%; }
+ .css3d #a2 { left: 70%; }
+ .css3d #detector {
+ z-index: 1000; position: absolute; top: 0; bottom: 0; height: 0; width: 100%; height: 100%;
+ background: transparent; border: 10px solid rgba(100,1,0,0.4);
+ pointer-events: painted;
+}
+.css3d #detector:hover {
+ left: -100%;
+ transition: none;
+}
+.css3d #detector {
+ left: 100%;
+ transition: left 60s step-end;
+}
+
.css3d iframe { width: 50%; height: 50%; }
.css3d div:focus-within {
diff --git a/index.html b/index.html
index 9b5f5f0..14c291a 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
<h2>Procedural Designer</h2>
<p>Latest version of my <a href="https://jsmaniac.github.io/phc-thesis/phc-thesis/">Ph.D draft</a></p>
<div class="css3d" style="display: none;">
+ <div id="detector"></div>
<div tabindex="0" id="a">
A
<div tabindex="0" id="a1">
@@ -23,11 +24,12 @@
</div>
</div>
<div tabindex="0" id="b">
- B
+ B<a href="#a">goto a</a><a href="#b">goto b</a>
</div>
</div>
- <div class="view3d" style="display:one">
- <div class="scene">
+ <div class="view3d" style="display: one">
+ <div class="scene" id="main">
+ <a class="go" href="#main">→ Enter ←</a>
<div class="rest"></div>
<div tabindex="0" class="three-d room hover room-test">
<div class="three-d object test" id="hello">Hello world
diff --git a/target-within-shim.js b/target-within-shim.js
index 76f79b7..f6524d2 100644
--- a/target-within-shim.js
+++ b/target-within-shim.js
@@ -6,20 +6,26 @@ function toggle(element, className, enable) {
element.className = newcls.join(' ');
}
-function targetWithin(id, enable) {
+function reverseAncestorsAndSelf(id) {
+ ancestorsAndSelf = [];
if (id) {
for (var e = document.getElementById(id); e; e = e.parentElement) {
- toggle(e, 'target-within', enable)
+ ancestorsAndSelf[ancestorsAndSelf.length] = e;
}
}
+ return ancestorsAndSelf.reverse();
}
-var current_hash = window.location.hash.substr(1);
+var current_hash = '';
function hashChange() {
- targetWithin(current_hash, false);
+ var oldElements = reverseAncestorsAndSelf(current_hash);
current_hash = window.location.hash.substr(1);
- targetWithin(current_hash, true);
+ var newElements = reverseAncestorsAndSelf(current_hash);
+ var i = 0;
+ while (i < oldElements.length && i < newElements.length && oldElements[i] == newElements[i]) { i++; }
+ for (var j = i; j < oldElements.length; j++) { toggle(oldElements[j], 'target-within', false); }
+ for (var j = i; j < newElements.length; j++) { toggle(newElements[j], 'target-within', true); }
}
window.addEventListener('load', hashChange, false);
diff --git a/test.css b/test.css
index ba4e2f6..b2aaad0 100644
--- a/test.css
+++ b/test.css
@@ -135,15 +135,43 @@ html, body { height: 100%; }
position: absolute; top: 0; bottom: 0; left:0; right: 0; display: flex; align-items: center; justify-content: center;
transition: background 0.6s, translate 2s, left step-start 1s; transform-style: preserve-3d; }
.go::before { position: absolute; content: ''; left: 0; right: 0; height: 1.5em; z-index: -1;
- background: white; transition: background 0.2s; }
+ background: blueviolet; transition: background 0.2s; }
.go:hover::before { background: rgba(255, 255, 255, 0.6); }
.go:hover { background: rgba(255, 255, 255, 0.1); }
-:target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
-.target-within > .go { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
-:target-within > .go::before { background: rgba(255, 255, 255, 0.0); color: rgba(0, 0, 0, 0); left: 9999vmin; }
-.target-within > .go::before { background: rgba(255, 255, 255, 0.0); }
-:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; }
-.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end; }
+:target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
+.target-within > .go { background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; transition: background 0.6s, translate 2s, left step-end 1s; }
+:target-within > .go::before { opacity: 0.6; background: rgba(255, 255, 255, 0); color: rgba(0, 0, 0, 0); left: 9999vmin; }
+.target-within:target > .go::before {
+ transition: background 0.6s linear, transform linear 1s, left 1s step-end, opacity 0.6s linear;
+ background: red; color: black; mask-image: none; border: thin solid black;
+ padding: 0; top: 0; left: -9999vmin; right: unset;
+ position: fixed; width: auto; height: auto;
+ content: '← back' attr(href);
+ opacity: 0;
+}
+:target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
+.target-within > .go::after { --distance: calc(0 - var(--width)) !important; left: 9999vmin; transition: background 0.6s var(--ease-out-bounce), transform 1s var(--ease-out-bounce), left 1s step-end, opacity 1s step-end; }
+.target-within:not(:target) > .go::before {
+ animation: 1s anim 1s;
+ transition: background 0.6s, transform 1s, left 1s step-end;
+ background: red; color: black; mask-image: none; border: thin solid black;
+ padding: 0; top: 0; left: -9999vmin; right: unset;
+ position: fixed; width: auto; height: auto;
+ content: '← back' attr(href);
+ opacity: 0.9;
+}
+@keyframes anim {
+ 0% { opacity: 0; }
+ 100% { opacity: 0.9; }
+}
+@keyframes animout {
+ 0% { opacity: 0.9; }
+ 50% { opacity: 0; }
+ 100% { opacity: 1; }
+}
+/** { transition: all 2s step-end 1000s !important; }*/
+
+.target-within:not(:target) > .go { /*font-size: 1%;*/ width: 0; height: 0; border: none; background: none; color: transparent; outline: none; }
.go:hover::after { --distance: calc(var(--min-distance) + var(--shift)); background-position-x: 25%; /* don't go to 100% because the easing goes beyond the value */ }
.go::after {
--width: 10; /* vmin */
@@ -209,10 +237,6 @@ html, body { height: 100%; }
*/
}
-@keyframes trans {
- 0% { background: rgba(214, 93, 184, 0.719); }
- }
-
.rest { position: absolute; top: 0; left: 0; bottom: 0; right: 0;}
.scene:target-within:not(:target) > .room.room-test:not(:target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
.scene.target-within:not(:target) > .room.room-test:not(.target-within) { transform: var(--origin) var(--test2-hover) var(--test2-) var(--origin-); }
@@ -224,7 +248,7 @@ html, body { height: 100%; }
.object:target-within:before { opacity: 1; }
.object.target-within:before { opacity: 1; }
.object:before {
- content: "← back";
+ content: normal;/*"← back"; for hover only*/
border: thin solid brown;
background: white;
z-index: 999;