diff --git a/css/stylesheet.css b/css/stylesheet.css index ca0844b..84f7914 100644 --- a/css/stylesheet.css +++ b/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; -} \ No newline at end of file +} + + +#curve { + padding : 1em; + height: 100vh; + overflow: scroll; +} diff --git a/index.html b/index.html index 238a5f3..f2d49fb 100644 --- a/index.html +++ b/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); + }); + + }); +
-

Relearn +

Relearn