Bug Fixes And Added TypeWriter

- Added TypeWriter
- Rewrote code to reduce lagg and glitchyness
- Removed Obscele code
- Added Animations for php and react

Author: zoeyfrisart

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 .DS_Store?
 *.wav
-*.mp3
+*.mp3
+typed.js

css/style.css

@@ -73,6 +73,15 @@ h2{
   line-height: 22px;
 }
 
+.madeWith{
+  position: absolute;
+  bottom: 60px;
+  width: 1400px;
+  height: 45px;
+  margin: 0px;
+  font-size: 50px
+}
+
 #music-switch{
   position: absolute;
   overflow: hidden;
@@ -111,8 +120,10 @@ h2{
   line-height: 30px;
 }
 
-.portfolio-item1 p{
+.portfolio-item1 span{
   color:lime;
+  font-size: 16px;
+  font-family: 'Press Start 2P', cursive;
 }
 
 .portfolio-item2{
@@ -153,6 +164,10 @@ h2{
   left: 0px;
 }
 
+.portfolio-item3{
+  z-index: 999;
+}
+
 .wrapper{
   background: white;
   width: 1400px;
@@ -268,6 +283,7 @@ h2{
   position: absolute;
   top: 0px;
   left: 0px;
+  z-index: 999;
 }
 
 [data-info="frameworksAndLanguages"]{
@@ -321,6 +337,7 @@ h2{
   position: absolute;
   top: 0px;
   left: 0px;
+  z-index: 999;
 }
 
 [data-info="watIkWilLeren"]{
@@ -329,8 +346,8 @@ h2{
 
 [data-info="react-l"]{
   position: absolute;
-  bottom: 90px;
-  right: 1400px;
+  top: 700px;
+  right: 50px;
 }
 
 [data-info="node-l"]{
@@ -341,6 +358,28 @@ h2{
 
 [data-info="php-l"]{
   position: absolute;
-  bottom: 90px;
-  right: 1400px;
-}
+  top: -500px;
+  left: 580px;
+}
+
+.typed-cursor{
+    opacity: 1;
+    -webkit-animation: blink 0.7s infinite;
+    -moz-animation: blink 0.7s infinite;
+    animation: blink 0.7s infinite;
+}
+@keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+@-webkit-keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}
+@-moz-keyframes blink{
+    0% { opacity:1; }
+    50% { opacity:0; }
+    100% { opacity:1; }
+}

index.html

@@ -8,7 +8,6 @@
   <meta name="description" content="Jquery Animation">
   <link rel="stylesheet" href="css/style.css" type="text/css">
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
-<!--  <script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.4.0/velocity.min.js"></script>-->
   <link href="https://fonts.googleapis.com/css?family=Caveat:400,700%7CMarck+Script%7CPress+Start+2P" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Bungee+Shade" rel="stylesheet">
 </head>
@@ -35,10 +34,16 @@
           rechts bovenin.
         </p>
       </div>
+      <h2 class="madeWith">Made With Love By Yannick</h2>
     </div>
     <div class="portfolio-item1">
-      <p>Hallo, Ik ben yannick!<br>Ik Volg de opleiding Mediavormgeving in de richting interactief op het MediaCollege Amsterdam.<br>Deze hele basis simpele game is gemaakt met javascript met de Jquary library<br>Je kan het process vinden op de github project pagina door op de knop rechts bovenin te drukken<br><br><br><br>
-      ~Yannick Frisart MV2C</p>
+      <span class="introductieText"></span>
+      
+<!--
+      Hallo, Ik ben yannick!<br>Ik Volg de opleiding Mediavormgeving in de richting interactief op het MediaCollege Amsterdam.<br>Deze hele basis simpele game is gemaakt met javascript met de Jquary library<br>Je kan het process vinden op de github project pagina door op de knop rechts bovenin te drukken<br><br>
+      ~Yannick Frisart MV2C<br>
+      Yannick's Macbook Pro: yannick$ git push|
+-->
     </div>
     <div class="portfolio-item2">
       <h2 data-info="vaardigheden">Mijn Vaardigheden</h2>
@@ -118,6 +123,7 @@ <h2 data-info="watIkWilLeren">Wat ik wil leren in de toekomst:</h2>
     let minHeight = false;
     let characterHeight = 300;
   </script>
+  <script src="js/typed.js"></script>
   <script src="js/scrips.js"></script>
 </body>
 </html>

js/scrips.js

@@ -9,17 +9,13 @@ function walk(e){
   if(e.keyCode === 39){ // Code Om naar Rechts te gaan
     character.src = "links/character/moving@2x.png";
     character.style.transform = 'rotate(0deg)';
-    scene.style.backgroundPosition = `${backgroundForward}px`;
-    i = i + 15;
-    backgroundForward = i - (i * 2.1);
-    backgroundBackward = backgroundForward;
+    scene.style.backgroundPosition = `${i}px`;
+    i = i - 20;
   } 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 = `${backgroundBackward}px`;
-    i = i - 15;
-    backgroundBackward = i - (i * 2);
-    backgroundForward = backgroundBackward;
+    scene.style.backgroundPosition = `${i}px`;
+    i = i + 20;
   } 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)';
@@ -71,6 +67,12 @@ if(position>= -1200 && position <= -760 && PoIt1Ran === true) {
   PoIt1Ran = false;
 } else if(position <= -1214 && position >= -1400 && PoIt1Ran === false) {
   $('.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 Jquary 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,
+        contentType: 'html'
+  });
   PoIt1Ran = true;
 } else if(position <= -1650 && position >= -1700 && PoIt1Ran === true) {
   $('.portfolio-item1').stop().animate({width: '0px', padding: '0px'}, 320);
@@ -156,23 +158,27 @@ if(position >= -3934 && position <= -3820 && PoIt4Ran === true){
 // -------------------------
 if(position >= -4760 && position <= -4600 && PoIt5Ran === true){
   $('h2[data-info="watIkWilLeren"]').stop().animate({'margin-top': '-170px'},360);
-  node.stop().animate({top: '700px'},300);
-  php.stop().animate({right: '1400px'},300);
-  react.stop().animate({right: '1400px'},300);
+  node.stop().animate({top: '700px'},400);
+  php.stop().animate({top: '-500px'},400);
+  react.stop().animate({top: '700px'},400);
   PoIt5Ran = false;
 } else if(position <= -4775 && position >= -5100 && PoIt5Ran === false){
   $('h2[data-info="watIkWilLeren"]').stop().animate({'margin-top': '170px'},360);
   node.stop().animate({top: '-100px'},760);
   node.animate({top: '100px'},600);
   node.animate({top: '10px'},600);
-  php.stop().animate({right: '30px'},360);
-  react.stop().animate({right: '30px'},360);
+  php.stop().animate({top: '200px'},760);
+  php.animate({top: '-100px'},600);
+  php.animate({top: '10px'},600);
+  react.stop().animate({top: '-100px'},760);
+  react.animate({top: '100px'},600);
+  react.animate({top: '10px'},600);
   PoIt5Ran = true;
 } else if(position <= -5200 && position >= -5400 && PoIt5Ran === true){
   $('h2[data-info="watIkWilLeren"]').stop().animate({'margin-top': '-170px'},360);
-  node.stop().animate({top: '700px'},300);
-  php.stop().animate({right: '1400px'},300);
-  react.stop().animate({right: '1400px'},300);
+  node.stop().animate({top: '700px'},400);
+  php.stop().animate({top: '-500px'},400);
+  react.stop().animate({top: '700px'},400);
   PoIt5Ran = false;
 }