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
|
||||
// links on the page
|
||||
|
||||
const FOCUS_SIZE = 400;
|
||||
|
||||
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',
|
||||
`${window.screen.availWidth}px`
|
||||
);
|
||||
lens.style.setProperty(
|
||||
root.style.setProperty(
|
||||
'--screen-height',
|
||||
`${window.screen.availHeight}px`
|
||||
);
|
||||
function set_position(){
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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_blur();
|
||||
setTimeout(show_hint, 2000);
|
||||
// setTimeout(set_size,100);
|
||||
// set_size()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,13 @@ body {
|
|||
width: 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 {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
max-width: $page-width;
|
||||
}
|
||||
|
||||
|
|
@ -20,6 +19,5 @@ h1 {
|
|||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
//background-image: url('~assets/example.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
|
||||
|
||||
.lens {
|
||||
:root {
|
||||
--screen-width: 100vw;
|
||||
--screen-height: 100vh;
|
||||
--blur-radius: 100px;
|
||||
--lens-size: 400px;
|
||||
--hint-color: deeppink;
|
||||
}
|
||||
|
||||
.lens {
|
||||
|
||||
//--screen-left: 0;
|
||||
//--screen-top: 0;
|
||||
position: absolute;
|
||||
|
|
@ -16,6 +21,56 @@
|
|||
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>
|
||||
<div id="root" class="lens">
|
||||
<div id="container">
|
||||
|
||||
<h1>Internet Website 2.0</h1>
|
||||
<h2>~Welcome to the net~</h2>
|
||||
<ul class="categories">
|
||||
<li>
|
||||
<h3>These are the Things I like</h3>
|
||||
<p>And some reasons that I like them</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Some are known</h3>
|
||||
<p>Others cannot be known, or are illegal to know</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>All are good</h3>
|
||||
<p>Because I am not bad</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h1>Internet Website 2.0</h1>
|
||||
<h2>~Welcome to the net~</h2>
|
||||
<ul class="categories">
|
||||
<li>
|
||||
<h3>These are the Things I like</h3>
|
||||
<p>And some reasons that I like them</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Some are known</h3>
|
||||
<p>Others cannot be known, or are illegal to know</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>All are good</h3>
|
||||
<p>Because I am not bad</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="filter"></div>
|
||||
<div id="hint" class="hidden">
|
||||
<p>(Your browser is out of focus)</p></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue