Merge branch 'master' of ssh://vvvvvvaria.org:12345/varia/relearn-curved-slider-webpage
This commit is contained in:
commit
507cf54431
@ -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;
|
||||||
|
}
|
||||||
|
24
index.html
24
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>
|
||||||
@ -67,13 +82,13 @@
|
|||||||
<p>Relearn 2019 is a curve, transversing multiple times and spaces.</p>
|
<p>Relearn 2019 is a curve, transversing multiple times and spaces.</p>
|
||||||
<p>(a few more words about the curve follow soon )</p>
|
<p>(a few more words about the curve follow soon )</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>
|
||||||
Varia, Rotterdam</p><br>
|
Varia, Rotterdam</p><br>
|
||||||
|
|
||||||
<p>For the Rotterdam control point on the Relearn curve, we propose to together attend to a <strong>subject zone</strong> (<strong>*</strong>) where different digital network practices intersect. This subject zone can morph into multiple directions throughout the session. Our specific interest is in how <strong>publishing formats</strong> (<strong>**</strong>) operate with/on/through this energy field.</p>
|
<p>For the Rotterdam control point on the Relearn curve, we propose to together attend to a <strong>subject zone</strong> (<strong>*</strong>) where different digital network practices intersect. This subject zone can morph into multiple directions throughout the session. Our specific interest is in how <strong>publishing formats</strong> (<strong>**</strong>) operate with/on/through this zone.</p>
|
||||||
|
|
||||||
<p><strong>*</strong> There are many questions in the air when we start to speak about digital infrastructures, hosters, servers, services, networks and their technical realities. Instead of picking one and diving deeper, we thought it would be more interesting to present a range and explore different vocabularies, protocols, technologies, infrastructures. We invite you to join Relearn to stretch this zone, starting from or moving towards:</p>
|
<p><strong>*</strong> There are many questions in the air when we start to speak about digital infrastructures, hosters, servers, services, networks and their technical realities. Instead of picking one and diving deeper, we thought it would be more interesting to present a range and explore different vocabularies, protocols, technologies, infrastructures. We invite you to join Relearn to stretch this zone, starting from or moving towards:</p>
|
||||||
|
|
||||||
@ -133,4 +148,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