Browse Source

scroll slider

master
lowrussia 5 years ago
parent
commit
14a53f7f5e
  1. 17
      css/stylesheet.css
  2. 22
      index.html

17
css/stylesheet.css

@ -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

@ -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>
@ -131,4 +146,3 @@
</div>
</body>
</html>

Loading…
Cancel
Save