Merge branch 'master' of s/relearn-curved-slider-webpage into master
This commit is contained in:
commit
92585f3e44
@ -1,6 +1,6 @@
|
|||||||
body{
|
body{
|
||||||
position: relative;
|
position: relative;
|
||||||
margin:1em;
|
margin:0;
|
||||||
padding:0;
|
padding:0;
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
@ -21,10 +21,10 @@ h1{
|
|||||||
|
|
||||||
div#sliders{
|
div#sliders{
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 1000px;
|
width: 500px;
|
||||||
height: 500px;
|
height: 400px;
|
||||||
top:60px;
|
top:60px;
|
||||||
left:340px;
|
right:100px;
|
||||||
}
|
}
|
||||||
div#slider{
|
div#slider{
|
||||||
float: left;
|
float: left;
|
||||||
@ -44,4 +44,11 @@ div.controlpoint{
|
|||||||
}
|
}
|
||||||
#rotterdam li{
|
#rotterdam li{
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#curve {
|
||||||
|
padding : 1em;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
22
index.html
22
index.html
@ -21,7 +21,7 @@
|
|||||||
width : 100%;
|
width : 100%;
|
||||||
height : 400px;
|
height : 400px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
#slider2 {
|
#slider2 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top:0;
|
top:0;
|
||||||
@ -50,10 +50,25 @@
|
|||||||
curve : { width:4, color:"#333", cap:"round" }
|
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>
|
</script>
|
||||||
|
|
||||||
<div id="curve">
|
<div id="curve">
|
||||||
<h1>Relearn
|
<h1>Relearn
|
||||||
<select onchange="window.location.href=this.value" style="display: inline-block;">
|
<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/2019/" selected="selected">2019</option>
|
||||||
<option value="http://relearn.be/2017/">2017</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>
|
<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>
|
<h2>RELEARN 2019.Rotterdam</h2>
|
||||||
|
|
||||||
<p>7th, 8th & 9th of June 2019<br>
|
<p>7th, 8th & 9th of June 2019<br>
|
||||||
@ -132,4 +147,3 @@
|
|||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</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