Permalink
Browse files

Code revamp

- Better sticky position for the years headers
- Replace blur effect with gradients
- Fix scrolling bug on Chrome
  • Loading branch information...
cheeaun committed Aug 5, 2015
1 parent 8830cdf commit 61fc68ff7d8858cbab3d686ee047517355ce8659
Showing with 44 additions and 39 deletions.
  1. +44 −39 index.html
View
@@ -5,36 +5,29 @@
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300">
<style>
-html{
- font-family: Open Sans, Helvetica, Arial, sans-serif;
- cursor: -webkit-grab;
- cursor: -moz-grab;
- cursor: grab;
-}
-html{
- height: 100%;
-}
body{
- min-height: 100%;
+ font-family: Open Sans, Helvetica, Arial, sans-serif;
color: #fff;
background-color: #384047;
margin: 0;
padding: 0;
font-size: 12px;
-webkit-text-size-adjust: none;
- position: relative;
- overflow: hidden;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: default;
}
a{
color: #fff;
}
header{
- z-index: 2;
- background-color: rgba(56, 64, 71, .75);
- -webkit-backdrop-filter: blur(5px);
- backdrop-filter: blur(5px);
- position: absolute;
+ z-index: 3;
+ background: linear-gradient(to bottom, rgba(56,64,71,0) 0%,rgba(56,64,71,.5) 20%,rgba(56,64,71,1) 50%,rgba(56,64,71,.5) 80%,rgba(56,64,71,0) 100%);
+ position: fixed;
bottom: 0;
+ left: 0;
margin: 0;
padding: 10px;
}
@@ -50,7 +43,6 @@
h1{
display: inline;
font-size: 20px;
- font-weight: normal;
line-height: 1em;
opacity: .5;
z-index: 3;
@@ -59,55 +51,66 @@
}
#life{
position: absolute;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
+ cursor: -webkit-grab;
+ cursor: -moz-grab;
+ cursor: grab;
}
#life-years{
position: absolute;
top: 0;
bottom: 0;
white-space: nowrap;
+ pointer-events: none;
}
-#life-years section.year{
+#life-years .year{
display: inline-block;
box-sizing: border-box;
- -moz-box-sizing: border-box;
color: #fff;
- pointer-events: none;
font-weight: 300;
white-space: nowrap;
box-sizing: border-box;
height: 100%;
+ border-left: 1px dashed rgba(255,255,255,.2);
}
-#life-years section.year:nth-child(even){
- background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
+#life-years .year:first-child{
+ border-left: 0;
}
-#life-years section.year span{
- background-color: rgba(56, 64, 71, .75);
- -webkit-backdrop-filter: blur(5px);
- backdrop-filter: blur(5px);
+#life-years .year span{
+ background: linear-gradient(to bottom, rgba(56,64,71,1) 30%,rgba(56,64,71,0) 100%);
display: block;
padding: 10px;
position: -webkit-sticky;
position: sticky;
top: 0;
+ z-index: 3;
}
-#life-years section.year span i{
+#life-years .year span i{
opacity: .5;
font-style: normal;
}
#life-events{
- margin-top: 40px;
+ padding-top: 40px;
padding-bottom: 5em;
+ position: relative;
+}
+#life-events:after{
+ content: '';
+ display: block;
+ clear: left;
}
#life .event{
padding-right: 20px;
padding-bottom: 5px;
vertical-align: middle;
white-space: nowrap;
+ float: left;
+ clear: left;
}
#life .event b{
font-weight: normal;
@@ -301,7 +304,7 @@ <h1 id="title">Life</h1>
return '<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px">'
+ '<div class="time" style="width: ' + width.toFixed(2) + 'px"></div>'
- + '<b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;'
+ + '<b>' + d.time.title + '</b> ' + d.text
+ '</div>';
},
renderYears: function(firstYear, lastYear){
@@ -311,9 +314,9 @@ <h1 id="title">Life</h1>
var hideAge = life.config.hideAge;
for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
var days = (y % 4 == 0) ? 366 : 365;
- html += '<section class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
+ html += '<div class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
+ y + (hideAge ? '' : (' <i>(' + age + ')</i>'))
- + '</span></section>';
+ + '</span></div>';
}
return html;
},
@@ -333,8 +336,9 @@ <h1 id="title">Life</h1>
});
life.firstYear = firstYear;
- var html = '<div id="life-years">' + life.renderYears(firstYear, lastYear) + '</div>';
- html += '<div id="life-events">';
+ var html = '<div id="life-events">';
+ // 'comment_' class name is to hide it from Safari Reader
+ html += '<div id="life-years" class="comment_">' + life.renderYears(firstYear, lastYear) + '</div>';
data.forEach(function(d){
html += life.renderEvent(d);
});
@@ -347,7 +351,7 @@ <h1 id="title">Life</h1>
startingMousePostition: {},
containerOffset: {},
init: function(){
- life.$el.addEventListener('mousedown', function(event){
+ window.addEventListener('mousedown', function(event){
slider.startingMousePostition = {
x: event.clientX,
y: event.clientY
@@ -366,7 +370,8 @@ <h1 id="title">Life</h1>
event.preventDefault();
var x = slider.containerOffset.x + (slider.startingMousePostition.x - event.clientX);
var y = slider.containerOffset.y + (slider.startingMousePostition.y - event.clientY);
- life.$el.scrollTo(x, y);
+ life.$el.scrollLeft = x;
+ life.$el.scrollTop = y;
}
};

0 comments on commit 61fc68f

Please sign in to comment.