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

Compare commits

base: svilayphiou:34ad61faf45fef12a76601b10fe7e24b8bfa0331
Branches Tags
svilayphiou:master
varia:master
...
compare: svilayphiou:f3e9e2205b7d7fa95d99becc6d514b6262ec1567
Branches Tags
svilayphiou:master
varia:master

3 Commits
34ad61faf4 ... f3e9e2205b

Author SHA1 Message Date
Stephanie Vilayphiou f3e9e2205b Merge branch 'master' of ssh://vvvvvvaria.org:12345/svilayphiou/relearn-curved-slider-webpage
5 years ago
Stephanie Vilayphiou f202fe2c06 controlpoints next to the curve
5 years ago
Stephanie Vilayphiou 57b97edccc nicer curve
5 years ago
3 changed files with 45 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats
  1. 34
      css/stylesheet.css
  2. 2
      css/warped.css
  3. 14
      index.html

34
css/stylesheet.css
View File

@ -29,6 +29,7 @@ body{
color:purple;
background-color:#ff4d4d33;
font-family: 'AvaraBold';
overflow: hidden;
}
hr{
border:0;
@ -118,6 +119,26 @@ div#slider{
background: transparent;
}
#controlpoints li {
position: absolute;
z-index: 10000;
list-style-type: none;
width: 10em;
line-height: 1.3em;
}
#controlpoints li#cp-paris {
top: 220px;
left: 20px;
}
#controlpoints li#cp-brussels {
top: 0px;
left: 220px;
}
#controlpoints li#cp-rotterdam {
top: 140px;
right: 20px;
}
#warped {
font-weight: bold;
position: absolute;
@ -318,4 +339,17 @@ and (max-width : 1024px) {
margin-top: 1em;
}
#controlpoints li#cp-paris {
top: 120px;
left: 40px;
}
#controlpoints li#cp-brussels {
top: 10px;
left: 20px;
}
#controlpoints li#cp-rotterdam {
top: 10px;
right: -40px;
}
}

2
css/warped.css
View File

@ -54,7 +54,7 @@
#warped .w11 {-moz-transform: rotate(-7.1rad);-webkit-transform: rotate(-7.1rad);-o-transform:
rotate(-7.1rad);-ms-transform: rotate(-7.1rad); transform: rotate(-7.1rad);
width: 23px; height: 43px; left: 501.17px; top: 120.42px;}
width: 23px; height: 43px; left: 506.17px; top: 115.42px;}
#warped .w12 {-moz-transform: rotate(-7.39rad);-webkit-transform: rotate(-7.39rad);-o-transform:
rotate(-7.39rad);-ms-transform: rotate(-7.39rad); transform: rotate(-7.39rad);

14
index.html
View File

@ -13,9 +13,14 @@
<body>
<!-- The curved slider -->
<div id="sliders">
<div id='warped'>
<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>
<ul id='controlpoints'>
<li id="cp-rotterdam">Rotterdam, 07→09/06</li>
<li id="cp-brussels">Brussels, 21→22/06</li>
<li id="cp-paris">Paris, 07→09/09</li>
</ul>
<div id='warped'>
<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>
@ -239,7 +244,8 @@ We will take care of a <em>daily vegetarian lunch</em> (please let us know about
<script>
jQuery(function($){
$("#slider").pathslider({
points : [250,50,-150,100,-50,-400,250,250],
//points : [250,50,-150,100,-50,-400,250,250],
points : [350,100,-750,350,400,-500,150,200],
value : 0,
rotateGrip : true,
tolerance : 3,

Write Preview
Loading…
Cancel
Save