Merged dev into master

Author: zoeyfrisart

css/style.css

@@ -73,6 +73,20 @@ h2{
   line-height: 22px;
 }
 
+.step4{
+  display: block;
+  position: absolute;
+  bottom: 110px;
+  right: 0;
+  left: 0;
+}
+
+.step4 p{
+  text-align: center;
+  line-height: 22px;
+  color: orangered;
+}
+
 .madeWith{
   position: absolute;
   bottom: 60px;
@@ -467,7 +481,32 @@ img[alt="digitalocean"]{
   opacity: 0.0;
 }
 
+.end{
+  position: absolute;
+  top: 150px;
+  left: 0;
+  right: 0;
+}
+
+#imagesPar{
+  position:relative;
+  overflow:hidden;
+  width:300px;
+  height:300px;
+}
+
+.parallax-layer
+      { position:absolute; }
 
+
+[data-info="theEnd"]{
+  font-size: 120px;
+  line-height: 90px;
+  margin-top: -500px;
+}
+[data-info="theEnd"] small{
+  font-size: 40px;
+}
 .typed-cursor{
     opacity: 1;
     -webkit-animation: blink 0.7s infinite;

index.html

@@ -34,6 +34,14 @@
           rechts bovenin.
         </p>
       </div>
+      <div class="step4">
+        <p>
+          Blijf naar rechts gaan voor de animaties!
+          <br>
+          --> --> --> --> --> --> --> --> --> --> --> -->
+          
+        </p>
+      </div>
       <h2 class="madeWith">Made With Love By Yannick</h2>
     </div>
     <div class="portfolio-item1">
@@ -57,19 +65,19 @@ <h2 data-info="timeSpent">Tijd per week buiten school:</h2>
         <div class="css-hours">
           <p data-info="css-hours">
             css:<br>
-            <span class="hours-spent">~4 uur</span>
+            <span class="hours-spent">~4 - 5 uur</span>
           </p>
         </div>
         <div class="html-hours">
           <p data-info="html-hours">
            html:<br>
-           <span class="hours-spent">~3 uur</span>
+           <span class="hours-spent">~2 - 3 uur</span>
           </p>
         </div>
         <div class="js-hours">
           <p data-info="js-hours">
            Javascript:<br>
-           <span class="hours-spent">~5 uur</span>
+           <span class="hours-spent">~5 - 15 uur</span>
           </p>
         </div>
       </div>
@@ -110,6 +118,9 @@ <h3 data-info="digitaloceanh3">server</h3>
         </div>
       </div>
     </div>
+    <div class="end">
+      <h2 data-info="theEnd">The End<br><small>have a nice day</small></h2>
+    </div>
   </div>
  </div>
  <audio src="links/music/background.mp3" loop css="hidden" data-music="background"></audio>
@@ -144,10 +155,12 @@ <h3 data-info="digitaloceanh3">server</h3>
     let digitalOcean = $('img[alt="digitalocean"]'); // Logo digitalocean
     let digitalOceanh3 = $('h3[data-info="digitaloceanh3"]'); // h3 digitalocean
     let digitalOceanp = $('p[data-info="digitaloceanp"]'); // p digitalocean
+    let endH2 = $('h2[data-info="theEnd"]'); // h2 of The End
     let maxHeight = false; // Variable used in scrip to prevent character from leaving the viewport
     let minHeight = false; // variable used to prevent character from going below the viewport
     let characterHeight = 300; // variable used to define character start position
-  </script>
+    let endRan = false //Variable to prevent spammy jquaryAnimation by keydown element
+	</script>
   <script src="js/typed.js"></script>
   <script src="js/scrips.js"></script>
 </body>

js/scrips.js

@@ -11,12 +11,12 @@ function walk(e){ // Everything in this function is triggered when event keydown
     character.src = "links/character/moving@2x.png"; 
     character.style.transform = 'rotate(0deg)';
     scene.style.backgroundPosition = `${i}px`;
-    i = i - 20; 
+    i = i - 23; 
   } else if(e.keyCode === 37 && position <= -20) {  // Code Om Naar Links Te Gaan
     character.src = "links/character/moving@2x.png";
     character.style.transform = 'rotate(180deg)';
     scene.style.backgroundPosition = `${i}px`;
-    i = i + 20;
+    i = i + 23;
   } else if(e.keyCode === 38 && characterHeight >= 591 && maxHeight === false){  // Code Die Kijkt of je Max height heb bereikt
     character.src = "links/character/moving@2x.png";
     character.style.transform = 'rotate(-90deg)';
@@ -70,8 +70,8 @@ if(position>= -1200 && position <= -760 && PoIt1Ran === true) { // Fade out port
   $('.portfolio-item1').stop().animate({width: '1200px', padding: '15px'}, 620);
   $(".introductieText").typed({
         strings: ["Hallo, Ik ben yannick!", "Ik Volg de opleiding Mediavormgeving in de richting interactief op het MediaCollege Amsterdam.", "Deze hele basis simpele 'game' is gemaakt met javascript met de Jquery library", "Je kan het process vinden op de github project pagina door op de knop rechts bovenin te drukken", "~Yannick Frisart MV2C", "────────────────────────────────────<br>──────────▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄──────────<br>────────▄▀▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▀▄────────<br>──────▐▌▒████▒▒▒▒▒▒▒▒████▒▒▐▌──────<br>──────▐▌▒▒████▒▒▒▒▒▒▒▒████▒▒▐▌──────<br>▐▌▀▄──▐▌▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐▌──▄▀▐▌<br>▐▌▒▒▀▄▐▌▒▒▐▌▀▄▄▀▀▄▄▀▀▄▄▀▐▌▒▒▐▌▄▀▒▒▐▌<br>▐▌▒▒▒▒▐▌▒▒▐▌▒▒▒▒▒▒▒▒▒▒▒▒▐▌▒▒▐▌▒▒▒▒▐▌<br>──▀▄▒▒▐▌▒▒▐▌▒▒▒▒▒▒▒▒▒▒▒▒▐▌▒▒▐▌▒▒▄▀──<br>────▀▄▐▌▒▒▐▌▒▒▒▒▒▒▒▒▒▒▒▒▐▌▒▒▐▌▄▀────<br>──────▐▌▒▒▐▌▄▀▀▄▄▀▀▄▄▀▀▄▐▌▒▒▐▌──────<br>──────▐▌▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐▌──────<br>──────▐▌▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▐▌──────<br>Yannick's Macbook Pro: yannick$ git push"],
-        typeSpeed: 0,
-        backDelay: 2200,
+        typeSpeed: 30,
+        backDelay: 300,
         contentType: 'html'
   });
   PoIt1Ran = true;
@@ -227,6 +227,16 @@ if(position >= -4760 && position <= -4600 && PoIt5Ran === true){ // fade out por
     PoIt6Ran = false;
   }
 
+// -------------------------
+//  End Code
+// -------------------------
+if(position >= - 6100 && endRan === true){
+  endH2.stop().animate({'margin-top': '-500px'},500);
+  endRan = false;
+} else if(position <= -6116 && endRan === false){
+  endH2.stop().animate({'margin-top': '0px'},900);
+  endRan = true;
+}
 // --------------------------
 //    Background Music
 // --------------------------