Code revamp
- Better sticky position for the years headers - Replace blur effect with gradients - Fix scrolling bug on Chrome
This commit is contained in:
Lim Chee Aun
parent
8830cdf2a5
commit
61fc68ff7d
83
index.html
83
index.html
@ -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 @@ header a:hover{
|
||||
h1{
|
||||
display: inline;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
line-height: 1em;
|
||||
opacity: .5;
|
||||
z-index: 3;
|
||||
@ -59,55 +51,66 @@ h1{
|
||||
}
|
||||
#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{
|
||||
|
||||
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 + ' '
|
||||
+ '<b>' + d.time.title + '</b> ' + d.text
|
||||
+ '</div>';
|
||||
},
|
||||
renderYears: function(firstYear, lastYear){
|
||||
@ -311,9 +314,9 @@ 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{
|
||||
});
|
||||
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{
|
||||
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{
|
||||
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;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user