svilayphiou/relearn-curved-slider-webpage
1
0
Fork 0
forked from varia/relearn-curved-slider-webpage
Code Issues Pull Requests Releases Wiki Activity

scroll slider

Browse Source
This commit is contained in:
lowrussia 2019-05-11 23:13:49 +02:00
parent cdb74c2a88
commit 14a53f7f5e
2 changed files with 30 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/stylesheet.css
View File

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

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