animations also in contact and experience section

css/contact.css

@@ -9,8 +9,17 @@
     background-color: #deebff;
 }
 
+#contactheader{
+    visibility: hidden;
+}
+
+#contactsubheader{
+    visibility: hidden;
+}
+
 .personalcontacts {
     margin-top: 60px;
+    visibility: hidden;
 }
 
 .personalcontacts a {

css/experience.css

@@ -65,12 +65,17 @@
     border-radius: 5mm;
 }
 
+#experienceheader {
+    visibility: hidden;
+}
+
 .ratiobtn {
     display: none;
 }
 
 #experiencecontentcontainer {
     margin-top: 100px;
+    visibility: hidden;
 }
 
 .experiencetitle {

css/general.css

@@ -12,12 +12,24 @@ body, html, #maincontent {
     /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
 }
 
-h1{
+h1 {
     text-transform: uppercase;
-    font-family:  'Open Sans', arial, sans-serif;
+    font-family: 'Open Sans', arial, sans-serif;
     font-weight: bold;
 }
 
+.animationappearnow {
+    animation: textappear 1s 0ms 1 forwards;
+}
+
+.animationappear300ms {
+    animation: textappear 1s 300ms 1 forwards;
+}
+
+.animationappear600ms {
+    animation: textappear 1s 600ms 1 forwards;
+}
+
 /* general definition of a tile */
 .tile {
     height: 80%;
@@ -56,6 +68,34 @@ h1{
     font: bold 15px/1.4 'Open Sans', arial, sans-serif;
 }
 
+/* The animation code */
+@keyframes textfade {
+    from {
+        visibility: hidden;
+        position: relative;
+        top: -20px;
+    }
+    to {
+        visibility: visible;
+        position: relative;
+        top: 0;
+    }
+}
+
+/* The animation code */
+@keyframes textappear {
+    from {
+        visibility: hidden;
+        opacity: 0;
+        top: -20px;
+    }
+    to {
+        visibility: visible;
+        opacity: 1;
+        top: 0;
+    }
+}
+
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 1201px) {
 

css/home.css

@@ -26,7 +26,7 @@
     color: #78ffd9;
 
     visibility: hidden;
-    animation: textfade 1s 900ms 1 forwards ;
+    animation: textfade 1s 900ms 1 forwards;
 }
 
 #homepicture {
@@ -46,7 +46,7 @@
     color: #ced5f6;
 
     visibility: hidden;
-    animation: textfade 1s 600ms 1 forwards ;
+    animation: textfade 1s 600ms 1 forwards;
 }
 
 #subTitleText {
@@ -54,14 +54,14 @@
     color: #bec1d4;
 
     visibility: hidden;
-    animation: textfade 1s 300ms 1 forwards ;
+    animation: textfade 1s 300ms 1 forwards;
 }
 
 #meaningFullSentence {
     width: 40%;
     color: #babccd;
 
-    animation: textfade 1s 0ms 1 forwards ;
+    animation: textfade 1s 0ms 1 forwards;
 }
 
 #homepicture:hover {
@@ -69,20 +69,6 @@
     transition: all 500ms;
 }
 
-/* The animation code */
-@keyframes textfade {
-    from {
-        visibility: hidden;
-        position: relative;
-        top: -20px;
-    }
-    to {
-        visibility: visible;
-        position: relative;
-        top: 0;
-    }
-}
-
 /* height smaller than 720px */
 @media screen and (max-height: 720px) {
     #homepicture {

index.html

@@ -19,6 +19,9 @@
     <!-- Latest compiled JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
 
+    <!--  main javascript  -->
+    <script src="js/index.js"></script>
+
     <!--  Stylesheets  -->
     <link rel="stylesheet" href="css/general.css">
     <link rel="stylesheet" href="css/home.css">
@@ -120,7 +123,7 @@
     <!-- Experience Page -->
     <div id="section3" class="tile">
         <div class="container">
-            <h1>Experience</h1>
+            <h1 id="experienceheader">Experience</h1>
             <div id="experiencecontentcontainer">
 
                 <input class="ratiobtn" id="tab1" type="radio" name="tabs" checked="">
@@ -208,8 +211,8 @@
     <!-- Contact Page -->
     <div id="section5" class="tile">
         <div class="container">
-            <h1>Contact</h1>
-            <h3>I'd love to hear from You!</h3>
+            <h1 id="contactheader">Contact</h1>
+            <h3 id="contactsubheader">I'd love to hear from You!</h3>
             <div class="personalcontacts">
                 <a href="mailto:lukas.heiligenbrunner@gmail.com" target="_blank">
                     <div id="emailsign" class="contactsign">

js/index.js

@@ -0,0 +1,32 @@
+$(function () {
+    ;(function ($, win) {
+        $.fn.inViewport = function (cb) {
+            return this.each(function (i, el) {
+                function visPx() {
+                    const H = $(this).height(),
+                        r = el.getBoundingClientRect(), t = r.top, b = r.bottom;
+                    return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
+                }
+
+                visPx();
+                $(win).on("resize scroll", visPx);
+            });
+        };
+    }(jQuery, window));
+
+
+    $("#section3").inViewport(function (px) {
+        if (px) {
+            $("#experienceheader").addClass("animationappear600ms");
+            $("#experiencecontentcontainer").addClass("animationappear300ms");
+        }
+    });
+
+    $("#section5").inViewport(function (px) {
+        if (px) {
+            $("#contactheader").addClass("animationappear600ms");
+            $("#contactsubheader").addClass("animationappear300ms");
+            $(".personalcontacts").addClass("animationappearnow");
+        }
+    });
+})