lens prototype
This commit is contained in:
parent
080ae6804a
commit
e4b03a4f65
5 changed files with 142 additions and 36 deletions
|
|
@ -4,34 +4,72 @@
|
||||||
// to be a lens and then you have to move the window around to be able to see the different
|
// to be a lens and then you have to move the window around to be able to see the different
|
||||||
// links on the page
|
// links on the page
|
||||||
|
|
||||||
|
const FOCUS_SIZE = 400;
|
||||||
|
|
||||||
function _init(){
|
function _init(){
|
||||||
let lens = document.querySelector('.lens');
|
let root = document.querySelector(':root');
|
||||||
|
let lens = document.getElementsByClassName('lens')[0];
|
||||||
|
let filter = document.getElementById('filter');
|
||||||
|
let hid_hint = false;
|
||||||
|
|
||||||
lens.style.setProperty(
|
// let FOCUS_SIZE = root.style.getPropertyValue('--lens-size')
|
||||||
|
|
||||||
|
root.style.setProperty(
|
||||||
'--screen-width',
|
'--screen-width',
|
||||||
`${window.screen.availWidth}px`
|
`${window.screen.availWidth}px`
|
||||||
);
|
);
|
||||||
lens.style.setProperty(
|
root.style.setProperty(
|
||||||
'--screen-height',
|
'--screen-height',
|
||||||
`${window.screen.availHeight}px`
|
`${window.screen.availHeight}px`
|
||||||
);
|
);
|
||||||
function set_position(){
|
function set_position(){
|
||||||
|
|
||||||
lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)`
|
lens.style.transform = `translate(-${window.screenX}px, -${window.screenY}px)`
|
||||||
// lens.style.setProperty(
|
|
||||||
// '--screen-left',
|
|
||||||
//
|
|
||||||
// )
|
|
||||||
// lens.style.setProperty(
|
|
||||||
// '--screen-top',
|
|
||||||
// `${window.screenY}px`
|
|
||||||
// )
|
|
||||||
// console.log('set vars')
|
|
||||||
setTimeout(set_position, 10);
|
setTimeout(set_position, 10);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function get_blur(){
|
||||||
|
return Math.max(
|
||||||
|
Math.sqrt(
|
||||||
|
(
|
||||||
|
Math.abs(window.innerHeight-FOCUS_SIZE) +
|
||||||
|
Math.abs(window.innerWidth-FOCUS_SIZE)
|
||||||
|
) / 4)-5,
|
||||||
|
0)
|
||||||
|
}
|
||||||
|
|
||||||
|
function set_blur(){
|
||||||
|
let blur_radius = get_blur()
|
||||||
|
filter.style.setProperty(
|
||||||
|
'--blur-radius',
|
||||||
|
`${blur_radius}px`
|
||||||
|
)
|
||||||
|
setTimeout(set_blur, 50);
|
||||||
|
}
|
||||||
|
|
||||||
|
function show_hint(){
|
||||||
|
if (get_blur() > 3) {
|
||||||
|
let hint = document.getElementById('hint');
|
||||||
|
hint.classList.remove('hidden')
|
||||||
|
|
||||||
|
setTimeout(check_hint, 2000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function check_hint(){
|
||||||
|
if (get_blur() < 3){
|
||||||
|
let hint = document.getElementById('hint');
|
||||||
|
hint.classList.add('rehidden');
|
||||||
|
hid_hint = true;
|
||||||
|
|
||||||
|
}
|
||||||
|
if (hid_hint === false){
|
||||||
|
setTimeout(check_hint, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
set_position();
|
set_position();
|
||||||
|
set_blur();
|
||||||
|
setTimeout(show_hint, 2000);
|
||||||
// setTimeout(set_size,100);
|
// setTimeout(set_size,100);
|
||||||
// set_size()
|
// set_size()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,3 +2,13 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#container {
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction:column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@ html {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: auto;
|
margin: auto;
|
||||||
text-align: center;
|
|
||||||
max-width: $page-width;
|
max-width: $page-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -20,6 +19,5 @@ h1 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
//background-image: url('~assets/example.png');
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,13 @@
|
||||||
|
:root {
|
||||||
|
|
||||||
.lens {
|
|
||||||
--screen-width: 100vw;
|
--screen-width: 100vw;
|
||||||
--screen-height: 100vh;
|
--screen-height: 100vh;
|
||||||
|
--blur-radius: 100px;
|
||||||
|
--lens-size: 400px;
|
||||||
|
--hint-color: deeppink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lens {
|
||||||
|
|
||||||
//--screen-left: 0;
|
//--screen-left: 0;
|
||||||
//--screen-top: 0;
|
//--screen-top: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -16,6 +21,56 @@
|
||||||
transition: transform ease 100ms;
|
transition: transform ease 100ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter {
|
#filter {
|
||||||
|
z-index: 999;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
position:absolute;
|
||||||
|
backdrop-filter: blur(var(--blur-radius));
|
||||||
|
//background-color: #ffffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#hint {
|
||||||
|
width: var(--lens-size);
|
||||||
|
height: var(--lens-size);
|
||||||
|
position: absolute;
|
||||||
|
border: 3px solid var(--hint-color);
|
||||||
|
top: calc(50% - var(--lens-size)/2);
|
||||||
|
left: calc(50% - var(--lens-size)/2);
|
||||||
|
border-radius: calc(var(--lens-size));
|
||||||
|
transition: opacity 1000ms;
|
||||||
|
opacity: 100%;
|
||||||
|
z-index: 10000;
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: Times, "Times New Roman", serif;
|
||||||
|
background-color: deeppink;
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
width: 50%;
|
||||||
|
color: white;
|
||||||
|
margin: auto;
|
||||||
|
font-size: 2em;
|
||||||
|
top: 40%;
|
||||||
|
position: relative;
|
||||||
|
//left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hidden, &.rehidden {
|
||||||
|
border-color: #ff000000;
|
||||||
|
opacity: 0%;
|
||||||
|
//transition: all 1000ms;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
transition: all 0ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,23 +10,28 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="root" class="lens">
|
<div id="root" class="lens">
|
||||||
|
<div id="container">
|
||||||
|
|
||||||
<h1>Internet Website 2.0</h1>
|
<h1>Internet Website 2.0</h1>
|
||||||
<h2>~Welcome to the net~</h2>
|
<h2>~Welcome to the net~</h2>
|
||||||
<ul class="categories">
|
<ul class="categories">
|
||||||
<li>
|
<li>
|
||||||
<h3>These are the Things I like</h3>
|
<h3>These are the Things I like</h3>
|
||||||
<p>And some reasons that I like them</p>
|
<p>And some reasons that I like them</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h3>Some are known</h3>
|
<h3>Some are known</h3>
|
||||||
<p>Others cannot be known, or are illegal to know</p>
|
<p>Others cannot be known, or are illegal to know</p>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<h3>All are good</h3>
|
<h3>All are good</h3>
|
||||||
<p>Because I am not bad</p>
|
<p>Because I am not bad</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="filter"></div>
|
||||||
|
<div id="hint" class="hidden">
|
||||||
|
<p>(Your browser is out of focus)</p></div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue