Sticky items for set range
This commit is contained in:
Ruben van de Ven
parent
a15195237d
commit
c4b7c28ca6
2 changed files with 53 additions and 19 deletions
70
canvas.html
70
canvas.html
|
|
@ -46,6 +46,7 @@
|
|||
|
||||
.anchor {
|
||||
cursor: pointer;
|
||||
/* TODO investigate scroll-snap-align: center; having scroll-snap-type: y proximity; on html*/
|
||||
}
|
||||
|
||||
/*Filenames with code blocks: https://stackoverflow.com/a/58199362*/
|
||||
|
|
@ -87,38 +88,40 @@
|
|||
background-color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.anchor{
|
||||
.anchor {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.anchor.active:not(.playing)::before{
|
||||
content:'⏵';
|
||||
.anchor.active:not(.playing)::before {
|
||||
content: '⏵';
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background:gray;
|
||||
background: gray;
|
||||
left: calc(50% - 20px);
|
||||
top: calc(50% - 20px);
|
||||
vertical-align: middle;
|
||||
line-height: 35px;
|
||||
border-radius: 5px;
|
||||
color:white;
|
||||
color: white;
|
||||
}
|
||||
.anchor.active:not(.playing):hover::before{
|
||||
background:black
|
||||
|
||||
.anchor.active:not(.playing):hover::before {
|
||||
background: black
|
||||
}
|
||||
.anchor.playing:hover::before{
|
||||
content:'⏸︎';
|
||||
|
||||
.anchor.playing:hover::before {
|
||||
content: '⏸︎';
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background:black;
|
||||
background: black;
|
||||
left: calc(50% - 20px);
|
||||
top: calc(50% - 20px);
|
||||
vertical-align: middle;
|
||||
line-height: 35px;
|
||||
border-radius: 5px;
|
||||
color:white;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="paper.css" />
|
||||
|
|
@ -152,6 +155,10 @@
|
|||
div.controls{display:none !important;}`
|
||||
);
|
||||
|
||||
function easeInOutSine(x) {
|
||||
return -(Math.cos(Math.PI * x) - 1) / 2;
|
||||
|
||||
}
|
||||
|
||||
function easeInOutQuart(x) {
|
||||
return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
|
||||
|
|
@ -224,6 +231,10 @@
|
|||
prev = offset
|
||||
}
|
||||
|
||||
|
||||
const sticky_dy = 200;
|
||||
const intro_outro_dy = window.innerHeight + sticky_dy;
|
||||
|
||||
let source_pos, target_pos, source_scale, target_scale, source_color, target_color, source_x_offset, target_x_offset;
|
||||
|
||||
const x_column_width = window.innerWidth - document.body.getBoundingClientRect().width + 200; // for some reason the 200 is neccesary
|
||||
|
|
@ -232,8 +243,11 @@
|
|||
|
||||
const fit_scale = x_column_width / (canvasCenter[0] * 1.7)
|
||||
|
||||
let sticky_start = true;
|
||||
let sticky_end = true;
|
||||
|
||||
if (prev === null) {
|
||||
prev = [next[0] - window.innerHeight / 2, null]
|
||||
prev = [next[0] - intro_outro_dy, null]
|
||||
|
||||
source_scale = fit_scale
|
||||
target_scale = .45
|
||||
|
|
@ -246,8 +260,10 @@
|
|||
source_x_offset = x_center_map;
|
||||
target_x_offset = x_center_column;
|
||||
|
||||
sticky_start = false; // no sticky before first item
|
||||
|
||||
} else if (next === null) {
|
||||
next = [prev[0] + window.innerHeight / 2, null]
|
||||
next = [prev[0] + intro_outro_dy, null]
|
||||
|
||||
source_scale = .45
|
||||
target_scale = fit_scale
|
||||
|
|
@ -260,6 +276,8 @@
|
|||
source_x_offset = x_center_column;
|
||||
target_x_offset = x_center_map;
|
||||
|
||||
sticky_end = false; // no sticky after last item
|
||||
|
||||
} else {
|
||||
source_pos = centerPoints[prev[1]]
|
||||
target_pos = centerPoints[next[1]]
|
||||
|
|
@ -273,9 +291,25 @@
|
|||
}
|
||||
|
||||
|
||||
const t = Math.min(1, Math.max(0, (center_y - prev[0]) / (next[0] - prev[0])))
|
||||
t_ease = easeInOutQuart(t)
|
||||
// t_ease = easeInOutBack(t)
|
||||
const t_old = Math.min(1, Math.max(0, (center_y - prev[0]) / (next[0] - prev[0])))
|
||||
const s = (center_y - prev[0] - (sticky_dy * sticky_start)) / (next[0] - prev[0] - (sticky_start + sticky_end) * sticky_dy);
|
||||
const t = Math.min(1, Math.max(0, s))
|
||||
// console.log(t_old, t)
|
||||
t_ease = easeInOutSine(t)
|
||||
// t_ease = easeInOutQuart(t) // use this if not snapping
|
||||
|
||||
let sticky_offset = 0;
|
||||
if (s > 0 && s < 1) {
|
||||
// scrolling from one item to the next
|
||||
sticky_offset = t_ease * (sticky_start + sticky_end) * sticky_dy - (sticky_dy * sticky_start);
|
||||
} else {
|
||||
// sticky item
|
||||
if (sticky_end && center_y > next[0] - sticky_dy) {
|
||||
sticky_offset = sticky_dy - (center_y - next[0] + sticky_dy)
|
||||
} else if (sticky_start && s <= 0) {
|
||||
sticky_offset = ((center_y - prev[0]) / sticky_dy) * (- sticky_dy);
|
||||
}
|
||||
}
|
||||
|
||||
const dx = target_pos[0] - source_pos[0];
|
||||
const dy = target_pos[1] - source_pos[1];
|
||||
|
|
@ -288,7 +322,7 @@
|
|||
scale = source_scale + t_ease * ds;
|
||||
x_offset = (target_x_offset - source_x_offset) * t_ease + source_x_offset
|
||||
x = -1 * (source_pos[0] + dx * t_ease) * scale + x_offset;
|
||||
y = -1 * (source_pos[1] + dy * t_ease) * scale + window.innerHeight / 2;
|
||||
y = -1 * (source_pos[1] + dy * t_ease) * scale + window.innerHeight / 2 + sticky_offset;
|
||||
|
||||
const color = (target_color - source_color) * t_ease + source_color
|
||||
// sheet.rules[0].style.setProperty('--override-color', `rgba(${color},${color},${color},0.7)`);
|
||||
|
|
@ -350,7 +384,7 @@
|
|||
|
||||
let options = {
|
||||
// root: document.querySelector("#scrollArea"), // viewport by default
|
||||
rootMargin: `${-Math.floor((window.innerHeight-10) / 2)}px 0px`, //"0px",
|
||||
rootMargin: `${-Math.floor((window.innerHeight - 10) / 2)}px 0px`, //"0px",
|
||||
threshold: 0,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ html {
|
|||
font-family: sans-serif;
|
||||
font-size: 20px;
|
||||
color: #1a1a1a;
|
||||
background-color: #fafafa;
|
||||
background-color: white;
|
||||
}
|
||||
body {
|
||||
margin: 0 50px 0 auto;
|
||||
|
|
|
|||
Loading…
Reference in a new issue