diff --git a/Timeline/timeline.css b/Timeline/timeline.css new file mode 100644 index 0000000..970c26d --- /dev/null +++ b/Timeline/timeline.css @@ -0,0 +1,88 @@ +.timeline { + position: relative; + width: 100%; + background: whitesmoke; + height: 525px; + overflow: hidden; +} + +.timeline-wrapper { + box-sizing: content-box; + height: 100%; + overflow-y: scroll; + padding-top: 30px; +} + +.timeline:after { + content: ''; + position: absolute; + background-color: black; + width: 1px; + height: 100%; + /* minus scrollbar */ + left: calc(50% - 7px); + top: 0; +} + +.timeline__row { + position: relative; + display: block; + height: 100px; + margin-bottom: 20px; +} + +.timeline__row:after { + content: ''; + position: absolute; + background-color: black; + display: block; + width: 20px; + height: 20px; + border-radius: 25px; + top: calc(50% - 10px); + left: calc(50% - 10px); +} + +.timeline__box { + position: absolute; + border: solid 1px black; + width: 35%; + height: 100%; + padding: 10px; +} + +.timeline__row:nth-child(odd) .timeline__box { + left: 5%; +} + +.timeline__row:nth-child(even) .timeline__box { + right: 5%; +} + +.timeline__row:nth-child(even) .timeline__box:after, +.timeline__row:nth-child(odd) .timeline__box:after { + content: ''; + position: absolute; + display: block; + background: black; + width: 30%; + height: 1px; + top: 50%; +} + +.timeline__row:nth-child(odd) .timeline__box:after { + left: 100%; +} + +.timeline__row:nth-child(even) .timeline__box:after { + right: 100%; +} + +.timeline__year { + background: darkkhaki; + position: absolute; + top: -20px; + left: 20px; + padding: 2px 3px; + border-radius: 5px; +} \ No newline at end of file diff --git a/Timeline/timeline.html b/Timeline/timeline.html new file mode 100644 index 0000000..886d9e7 --- /dev/null +++ b/Timeline/timeline.html @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + +

Timeline sample

+ +
+
+ +
+
+ + + + + + + + diff --git a/Timeline/timeline.js b/Timeline/timeline.js new file mode 100644 index 0000000..3755e9f --- /dev/null +++ b/Timeline/timeline.js @@ -0,0 +1,59 @@ +init(); + +function init() { + const timelineElement = document.querySelector('.timeline'); + const timelineWrapper = timelineElement.querySelector('.timeline-wrapper'); + fillTestData(timelineWrapper); + + getAllElements(timelineWrapper).forEach(function(value) { + if (isElementFullyVisible(timelineElement, value)) { + return; + } + value.style.visibility = 'hidden'; + }); + + timelineElement.addEventListener('scroll', function(e) { + getAllElements(timelineWrapper).forEach(function(value) { + console.log(isElementFullyVisible(timelineElement, value)); + }); + }); +} + +function fillTestData(timelineWrapper) { + const testData = new Map(); + + testData.set('1900', 'In the Year 1900 lorem ipsum...') + testData.set('1910', 'In the Year 1910 lorem ipsum...') + testData.set('1915', 'In the Year 1915 lorem ipsum...') + testData.set('1925', 'In the Year 1925 lorem ipsum...') + testData.set('1930', 'In the Year 1930 lorem ipsum...') + testData.set('1945', 'In the Year 1945 lorem ipsum...') + + testData.forEach(function(value, key) { + timelineWrapper.insertAdjacentHTML('beforeend', ` +
+
+
+ ` + key + ` +
+
+ ` + value + ` +
+
+
+ `); + }); +} + +function getAllElements(timeline) { + return timeline.querySelectorAll('.timeline__row'); +} + +function isElementFullyVisible(timeline, timelineElement) { + const rect = timelineElement.getBoundingClientRect(); + const elemTop = rect.top; + const elemBottom = rect.bottom; + + return elemTop >= 0 && elemBottom <= timeline.offsetHeight; + +} \ No newline at end of file diff --git a/index.html b/index.html index bec111f..10cc241 100644 --- a/index.html +++ b/index.html @@ -156,6 +156,14 @@
Gallery
Photo Gallery + +
+
+
Timeline
+

Name:
Juan Jimenez

+ Timeline
+
+