Scrolling Effects on CV

css/style.css

@@ -942,4 +942,8 @@ Main components
   flex: 0 0 50px;
   text-align: right;
   margin-right: 5%;
+}
+
+.timeline-1{
+  margin-left: -1000px;
 }

index.html

@@ -45,14 +45,34 @@ <h1 class="section__title section__title--intro">
     </section>
 
 
-
-
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
+    <br>
     <section id="cd-timeline" class="cd-container">
       <div class="cd-timeline-block">
         <div class="cd-timeline-img cd-picture">
         </div>
 
-        <div class="cd-timeline-content">
+        <div class="cd-timeline-content timeline-1">
           <h2>Working Student at Siemens</h2>
           <div class="timeline-content-info">
             <span class="timeline-content-info-title">
@@ -80,7 +100,7 @@ <h2>Working Student at Siemens</h2>
         <div class="cd-timeline-img cd-movie">
         </div> <!-- cd-timeline-img -->
 
-        <div class="cd-timeline-content">
+        <div class="cd-timeline-content timeline-2">
           <h2>Securitay 2024 in Dundee</h2>
           <div class="timeline-content-info">
             <span class="timeline-content-info-title">
@@ -103,7 +123,7 @@ <h2>Securitay 2024 in Dundee</h2>
         <div class="cd-timeline-img cd-movie">
         </div> <!-- cd-timeline-img -->
 
-        <div class="cd-timeline-content">
+        <div class="cd-timeline-content timeline-3">
           <h2>Media Computer Science (BEng)</h2>
           <div class="timeline-content-info">
             <span class="timeline-content-info-title">
@@ -138,8 +158,8 @@ <h2>Media Computer Science (BEng)</h2>
           <div class="cd-timeline-img cd-movie">
           </div> <!-- cd-timeline-img -->
 
-          <div class="cd-timeline-content">
-            <h2>Abitur</h2>
+          <div class="cd-timeline-content timeline-4">
+            <h2>General Higher Qualification for University Entrance</h2>
             <div class="timeline-content-info">
               <span class="timeline-content-info-title">
                 <i class="fa fa-certificate" aria-hidden="true"></i>
@@ -163,7 +183,7 @@ <h2>Abitur</h2>
           <div class="cd-timeline-img cd-movie">
           </div> <!-- cd-timeline-img -->
 
-          <div class="cd-timeline-content">
+          <div class="cd-timeline-content timeline-5">
             <h2>Internship SIEMENS Energy</h2>
             <div class="timeline-content-info">
               <span class="timeline-content-info-title">

js/index.js

@@ -11,7 +11,60 @@ navLinks.forEach(link => {
   })
 })
 
+function getDistanceToTop(element) {
+  // Get the bounding rectangle of the element
+  var rect = element.getBoundingClientRect();
+  // Calculate the distance from the top of the viewport to the top of the element
+  var distance = rect.top + window.scrollY;
+  return distance;
+}
+
 $(document).ready(function() {
+
+
+  // scroll propertys
+  function windowScroll() {
+    var st = $(document).scrollTop();
+    let C = 70;
+    console.log(st);
+
+
+
+    let windowHeight = $(window).height();
+
+    let destinyAdaption = windowHeight / 2;;;
+
+    let C1 = $(".timeline-1").offset().top;
+    let C2 = $(".timeline-2").offset().top;
+    let C3 = $(".timeline-3").offset().top;
+    let C4 = $(".timeline-4").offset().top;
+    let C5 = $(".timeline-5").offset().top;
+
+    let objectlist = [C1, C2, C3, C4, C5]
+
+    for (let i = 0; i < objectlist.length; i++) {
+      if (i%2 == 0) {
+        if (0 >= -.5 * (objectlist[i] - destinyAdaption - st)){
+          $(".timeline-"+ (i+1)).css({"margin-left": -.5 * (objectlist[i] - destinyAdaption - st) + "px"});
+        }
+      } else {
+        if (-10 >= -.5 * (objectlist[i] - destinyAdaption - st)){
+          $(".timeline-"+ (i+1)).css({"margin-right": -.5 * (objectlist[i] - destinyAdaption - st) + "px"});
+        }
+      }
+    }
+
+
+
+
+  }
+  $(document).scroll(function(){
+    windowScroll();
+  })
+
+
+
+
   $('.carousel-container').each(function() {
     var $carousel = $(this).find('.about-me__img');
     var $items = $carousel.find('.item');
@@ -142,3 +195,4 @@ $(document).ready(function() {
     });
   });
 });
+