varia/relearn-curved-slider-webpage
14
0
Fork 3
Code Issues Pull Requests Releases Wiki Activity

subtle changes in the layout of the text + attempt at making a loop with just one path + syncing the bézier when we scroll the text in a more traditional way

Browse Source
This commit is contained in:
Stephanie Vilayphiou 2019-05-21 16:39:32 +02:00
parent 814d6fc01b
commit d36fa5dcfd
2 changed files with 62 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/stylesheet.css
View File

@ -30,6 +30,7 @@ body{
hr{
border:0;
border-bottom:1px dotted;
margin-bottom: 1em;
}
h1{
@ -38,7 +39,7 @@ h1{
h3 {
font-size: 1em;
margin: 0;
margin-bottom: 0;
}
dl {
@ -49,6 +50,14 @@ dt {
/*text-decoration: underline;*/
}
p {
margin: 0;
}
p + p {
margin-top: 1em;
}
sup {
line-height: 0;
}
@ -64,8 +73,8 @@ div#sliders{
position: fixed;
width: 500px;
top:60px;
right:100px;
bottom: 0;
left: 61%;
bottom: 1em;
}
div#slider{
float: left;
@ -96,7 +105,7 @@ div#slider{
div#relearn-infos {
position: absolute;
bottom: 0;
right: 0;
left: 2em;
}
div#relearn-infos ul {
margin: 0;
@ -105,7 +114,7 @@ div#relearn-infos ul {
/* --- control points ---*/
#curve {
width: 55%;
padding : 0 1em;
padding : 1em 2em;
height: 100vh;
overflow: auto;
}
@ -124,6 +133,7 @@ div#relearn-infos ul {
div.controlpoint{
max-width: 800px;
margin: 1em 0;
float: left;
border-top: 1px solid black;
@ -134,16 +144,31 @@ div.controlpoint ul {
column-count: 2;
}
.practical {
column-count: 2;
.practical-infos {
display: flex;
flex-wrap: wrap;
margin-top: 1em;
}
.practical p {
display: inline-block;
margin: 0;
.programme p {
width: 50%;
float: left;
}
.participation,
.hosting {
flex-basis: 50%;
box-sizing: border-box;
}
.participation {
padding-right: 0.5em;
}
.hosting {
padding-left: 0.5em;
}
#rotterdam{
color:#0054ff;
}

38
index.html
View File

@ -16,13 +16,13 @@
<span class='w0'>R</span><span class='w1'>e</span><span class='w2'>l</span><span class='w3'>e</span><span class='w4'>a</span><span class='w5'>r</span><span class='w6'>n</span><span class='w7'> </span><span class='w8'> </span><span class='w9'>2</span><span class='w10'>0</span><span class='w11'>1</span><span class='w12'>9</span>
</div>
<div id="slider"></div>
<div id="slider2"></div>
<!--<div id="slider2"></div>-->
<div id="relearn-infos">
<h3>Resources &amp; contact</h3>
<ul>
<li><a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/relearn" target='_blank'>subscribe to the Relearn mailinglist </a></li>
<li><a href="https://gitlab.com/relearn" target='_blank'>Relearn’s gitlab repository </a></li>
<li><a href="https://tumulte.domainepublic.net/cgi-bin/mailman/listinfo/relearn" target='_blank'>Subscribe to the Relearn mailinglist </a></li>
<li><a href="https://webchat.freenode.net/" target='_blank'>IRC channel: #relearn on Freenode</a></li>
<li><a href="https://gitlab.com/relearn" target='_blank'>Relearn gitlab repository </a></li>
<li><a href="https://gallery.constantvzw.org/index.php/search?album=1&amp;q=relearn" target='_blank'>Photographs of previous Relearn editions</a></li>
</ul>
</div>
@ -49,6 +49,7 @@ Free, Libre and Open Source Software plays a fundamental role at Relearn, as it
<p>
</p>
<hr>
<p>Relearn 2019 is a curve, transversing multiple times and spaces.</p>
<p>
@ -116,27 +117,36 @@ people joining a succession of events but still share commonalities.
<hr />
<div class='practical'>
<div class='practical-infos'>
<h3>Programme</h3>
<div class='programme'>
<h3>Programme</h3>
<p><em>Friday 7<sup>th</sup> June, 20:00 – 22:00</em><br>(ongoing, no fixed starting time)<br>
Relearn public evening program: embed yourself into Relearn</p>
<p><em>Saturday–Sunday, 8–9<sup>th</sup> June 10:00 – 18:00</em><br>
Relearn sub-zone-trajectories</p>
<p><u>Friday 7<sup>th</sup> June</u><br>
20:00–22:00 (ongoing, no fixed starting time)<br>
Relearn public evening program: embed yourself into Relearn</p>
<p><u>Saturday–Sunday, 8–9<sup>th</sup> June</u><br>
10:00–18:00<br>
Relearn sub-zone-trajectories</p>
</div>
<div class='participation'>
<h3>Participation</h3>
<p>If you would like to join this Relearn session, please send an email to <a href="mailto:&#105;&#110;&#102;&#111;&#064;&#118;&#097;&#114;&#105;&#097;&#046;&#122;&#111;&#110;&#101;">&#105;&#110;&#102;&#111;&#064;&#118;&#097;&#114;&#105;&#097;&#046;&#122;&#111;&#110;&#101;</a> with a short motivation of your interest. We will reply to subscriptions on a regular basis, up to the <strong>26<sup>th</sup> of May</strong>.</p>
<p>Our <em>capacities</em> allow us to have a group of 30 relearners. Our preference goes out to people that can join the whole session (Friday evening, Saturday and Sunday).
</p>
<p>If you would like to join us only on the Friday evening, there is no need to subscribe, just come over ! :)</p>
</div>
<div class='hosting'>
<h3>Hosting</h3>
<p>
We will take care of a <em>daily vegetarian lunch</em> (please let us know about allergies or other dietary preferences). Following a tradition from previous years, we will arrange a <em>hosting network</em> in the city and find a place to stay for everyone. Please mention in the email if you need to be hosted or could host one or more relearners in your house.</p>
<p>If you would like to join us only on the Friday evening, there is no need to subscribe, just come over! :)</p>
</div>
</div>
</div>
</div>
@ -145,7 +155,7 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<script>
jQuery(function($){
$("#slider").pathslider({
points : [50,10,-150,0,150,200,300,100],
points : [250,50,-150,100,-50,-400,250,250],
value : 49,
rotateGrip : true,
tolerance : 3,
@ -166,8 +176,14 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
$(document).ready(function() {
$('#slider').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
console.log(scrollPos);
$('#curve').stop().animate({scrollTop: scrollPos}, 200);
});
$('#curve').scroll(function() {
offset = ($('#curve').scrollTop() / $(document).height()) * 33;
console.log(offset);
$('#slider').getpathslider().setSlider(offset);
});
$('#slider2').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100