Merge branch 'master' of s/relearn-curved-slider-webpage into master
This commit is contained in:
Gitea
commit
92585f3e44
@ -1,6 +1,6 @@
|
||||
body{
|
||||
position: relative;
|
||||
margin:1em;
|
||||
margin:0;
|
||||
padding:0;
|
||||
font-size: 120%;
|
||||
line-height: 1.4;
|
||||
@ -21,10 +21,10 @@ h1{
|
||||
|
||||
div#sliders{
|
||||
position: fixed;
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
top:60px;
|
||||
left:340px;
|
||||
right:100px;
|
||||
}
|
||||
div#slider{
|
||||
float: left;
|
||||
@ -44,4 +44,11 @@ div.controlpoint{
|
||||
}
|
||||
#rotterdam li{
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#curve {
|
||||
padding : 1em;
|
||||
height: 100vh;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
22
index.html
22
index.html
@ -21,7 +21,7 @@
|
||||
width : 100%;
|
||||
height : 400px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
#slider2 {
|
||||
position: absolute;
|
||||
top:0;
|
||||
@ -50,10 +50,25 @@
|
||||
curve : { width:4, color:"#333", cap:"round" }
|
||||
});
|
||||
});
|
||||
|
||||
// scroll
|
||||
$(document).ready(function() {
|
||||
$('#slider').bind('slide.pathslider', function(event, slider){
|
||||
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
|
||||
$('#curve').scrollTop(scrollPos);
|
||||
});
|
||||
|
||||
$('#slider2').bind('slide.pathslider', function(event, slider){
|
||||
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
|
||||
$('#curve').scrollTop(scrollPos);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div id="curve">
|
||||
<h1>Relearn
|
||||
<h1>Relearn
|
||||
<select onchange="window.location.href=this.value" style="display: inline-block;">
|
||||
<option value="http://relearn.be/2019/" selected="selected">2019</option>
|
||||
<option value="http://relearn.be/2017/">2017</option>
|
||||
@ -66,7 +81,7 @@
|
||||
|
||||
<p>Relearn 2019 is a curve, transversing multiple times and spaces.</p>
|
||||
|
||||
<div id="rotterdam" class="controlpoint">
|
||||
<div id="rotterdam" class="controlpoint">
|
||||
<h2>RELEARN 2019.Rotterdam</h2>
|
||||
|
||||
<p>7th, 8th & 9th of June 2019<br>
|
||||
@ -132,4 +147,3 @@
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
118
index2.html
Normal file
118
index2.html
Normal file
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- source: https://bl.ocks.org/mbostock/8027637 -->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
|
||||
path {
|
||||
fill: none;
|
||||
stroke: #000;
|
||||
stroke-width: 8px;
|
||||
}
|
||||
|
||||
line {
|
||||
fill: none;
|
||||
stroke: red;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
rect {
|
||||
fill: none;
|
||||
cursor: crosshair;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<script src="https://d3js.org/d3.v3.min.js"></script>
|
||||
<script>
|
||||
|
||||
var points = [[600,600],[600, 400],[300,300], [400, 600]];
|
||||
|
||||
var width = 960,
|
||||
height = 500;
|
||||
|
||||
var line = d3.svg.line()
|
||||
.interpolate("cardinal");
|
||||
|
||||
var svg = d3.select("body").append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
var path = svg.append("path")
|
||||
.datum(points)
|
||||
.attr("d", line);
|
||||
|
||||
var line = svg.append("line");
|
||||
|
||||
var circle = svg.append("circle")
|
||||
.attr("cx", -10)
|
||||
.attr("cy", -10)
|
||||
.attr("r", 60);
|
||||
|
||||
var isDown = false;
|
||||
svg.append("rect")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.on("mousedown", function(){
|
||||
svg.on("mousemove", mousemoved);
|
||||
})
|
||||
.on("mouseup")
|
||||
|
||||
function mousemoved() {
|
||||
var m = d3.mouse(this),
|
||||
p = closestPoint(path.node(), m);
|
||||
line.attr("x1", p[0]).attr("y1", p[1]).attr("x2", m[0]).attr("y2", m[1]);
|
||||
circle.attr("cx", p[0]).attr("cy", p[1]);
|
||||
}
|
||||
|
||||
function closestPoint(pathNode, point) {
|
||||
var pathLength = pathNode.getTotalLength(),
|
||||
precision = 8,
|
||||
best,
|
||||
bestLength,
|
||||
bestDistance = Infinity;
|
||||
|
||||
// linear scan for coarse approximation
|
||||
for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
|
||||
if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
|
||||
best = scan, bestLength = scanLength, bestDistance = scanDistance;
|
||||
}
|
||||
}
|
||||
|
||||
// binary search for precise estimate
|
||||
precision /= 2;
|
||||
while (precision > 0.5) {
|
||||
var before,
|
||||
after,
|
||||
beforeLength,
|
||||
afterLength,
|
||||
beforeDistance,
|
||||
afterDistance;
|
||||
if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
|
||||
best = before, bestLength = beforeLength, bestDistance = beforeDistance;
|
||||
} else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
|
||||
best = after, bestLength = afterLength, bestDistance = afterDistance;
|
||||
} else {
|
||||
precision /= 2;
|
||||
}
|
||||
}
|
||||
|
||||
best = [best.x, best.y];
|
||||
best.distance = Math.sqrt(bestDistance);
|
||||
return best;
|
||||
|
||||
function distance2(p) {
|
||||
var dx = p.x - point[0],
|
||||
dy = p.y - point[1];
|
||||
return dx * dx + dy * dy;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<html>
|
||||
Loading…
Reference in New Issue
Block a user