Added 4e item and performace improvement

- Added the 4e animation
- Fixed laggy glitchy animation
- improved performace by a lot

Author: zoeyfrisart

css/style.css

@@ -22,6 +22,13 @@ p{
   font-family: 'Press Start 2P', cursive;
 }
 
+h2{
+  font-family: 'Bungee Shade', cursive;
+  font-size: 42px;
+  color: #e2cb1e;
+  text-align: center;
+}
+
 .guide{
   display: block;
   width: 1400px;
@@ -253,4 +260,41 @@ p{
   color: #e2cb1e;
   text-align: center;
   margin-top: -800px;
-}
+}
+
+.portfolio-item4{
+  height: 700px;
+  width: 1400px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+[data-info="frameworksAndLanguages"]{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-around;
+  position: absolute;
+  width: 1400px;
+  height: 300px;
+  bottom: 100px;
+}
+
+[data-info="es6-l"]{
+  position: absolute;
+  bottom: -300px;
+  right: 630px;
+}
+
+[data-info="less-l"]{
+  position: absolute;
+  left: 1400px;
+  bottom: 90px;
+}
+
+[data-info="jquary-l"]{
+  position: absolute;
+  bottom: 90px;
+  right: 1400px;
+}

index.html

@@ -8,6 +8,7 @@
   <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>
@@ -70,7 +71,12 @@ <h2 data-info="timeSpent">Tijd per week buiten school:</h2>
       </div>
     </div>
     <div class="portfolio-item4">
-      
+      <h2 data-info="watImLearning">Wat ik nu aan het leren ben:</h2>
+      <div data-info="frameworksAndLanguages">
+        <img data-info="less-l" src="links/attributes/less.png" alt="less" height="120">
+        <img data-info="es6-l" src="links/attributes/es6.png" alt="es6" height="140">
+        <img data-info="jquary-l" src="links/attributes/jquary.png" alt="jquary" height="120">
+      </div>
     </div>
     <div class="portfolio-item5">
 
@@ -93,6 +99,11 @@ <h2 data-info="timeSpent">Tijd per week buiten school:</h2>
     var i = 10;
     var backgroundForward = 0;
     var backgroundBackward = 0;
+    let PoIt1Ran = false;
+    let PoIt2Ran = false;
+    let PoIt3Ran = false;
+    let PoIt4Ran = false;
+    let PoIt5Ran = false;
   </script>
   <script src="js/scrips.js"></script>
 </body>

js/scrips.js

@@ -4,7 +4,6 @@ $(document).ready(function(){
 // ----------------------------
 //     character Movement
 // ----------------------------
-
 function walk(e){
   /*Move right*/
   let position = parseInt(scene.style.backgroundPositionX);
@@ -47,36 +46,42 @@ function walk(e){
 //  Portfolio Item 1 code
 // -------------------------
 
-if(position>= -1200 && position <= -760) {
-  $('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 120);
-} else if(position <= -1214 && position >= -1400) {
-  $('.portfolio-item1').stop().animate({height: '500px', width: '1200px', padding: '15px'}, 220);
-} else if(position <= -1650 && position >= -1700) {
-  $('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 120);
+if(position>= -1200 && position <= -760 && PoIt1Ran === true) {
+  $('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 220);
+  PoIt1Ran = false;
+} else if(position <= -1214 && position >= -1400 && PoIt1Ran === false) {
+  $('.portfolio-item1').stop().animate({height: '500px', width: '1200px', padding: '15px'}, 420);
+  PoIt1Ran = true;
+} else if(position <= -1650 && position >= -1700 && PoIt1Ran === true) {
+  $('.portfolio-item1').stop().animate({height: '0px', width: '0px', padding: '0px'}, 220);
+  PoIt1Ran = false;
 }
 
 // -------------------------
 //  Portfolio Item 2 code
 // -------------------------
 
-if(position>= -1990 && position <= -1715) {
+if(position>= -1990 && position <= -1715 && PoIt2Ran === true) {
 //  $('.portfolio-item2').stop().slideUp(100);
   $('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 160);
   $('img[data-info="css3"]').stop().animate({top: '800px'}, 170);
   $('img[data-info="html5"]').stop().animate({top: '800px'}, 170);
   $('img[data-info="js"]').stop().animate({top: '800px'}, 170);
-} else if(position <= -2000 && position >= -2700) {
+  PoIt2Ran = false;
+} else if(position <= -2000 && position >= -2700 && PoIt2Ran === false) {
 //  $('.portfolio-item2').stop().slideDown(200);
   $('h2[data-info="vaardigheden"]').stop().animate({top: '-50px'}, 170);
   $('img[data-info="css3"]').stop().animate({top: '120px'}, 190, 'swing');
   $('img[data-info="html5"]').stop().animate({top: '120px'}, 190, 'swing');
   $('img[data-info="js"]').stop().animate({top: '120px'}, 190, 'swing');
-} else if(position <= -2900 && position >= -3050) {
+  PoIt2Ran = true
+} else if(position <= -2900 && position >= -3050 && PoIt2Ran === true) {
 //  $('.portfolio-item2').stop().slideUp(100);
   $('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 160);
   $('img[data-info="css3"]').stop().animate({top: '800px'}, 170);
   $('img[data-info="html5"]').stop().animate({top: '800px'}, 170);
   $('img[data-info="js"]').stop().animate({top: '800px'}, 170);
+  PoIt2Ran = false;
 }
 
 // -------------------------
@@ -88,17 +93,34 @@ if(position >= -3490 && position <= - 3100) {
   $('p[data-info="css-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
   $('p[data-info="js-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
 } else if(position <= -3500 && position >= -4000) {
-  $('h2[data-info="timeSpent"]').stop().animate({'margin-top': '170px'}, 420);
-  $('p[data-info="html-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},450);
-  $('p[data-info="css-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},450);
-  $('p[data-info="js-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},450);
+  $('h2[data-info="timeSpent"]').stop().animate({'margin-top': '170px'}, 380);
+  $('p[data-info="html-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},290);
+  $('p[data-info="css-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},290);
+  $('p[data-info="js-hours"]').stop().animate({opacity: '1', 'font-size': '45px'},290);
 } else if(position <= -4200 && position >= -4250) {
   $('h2[data-info="timeSpent"]').stop().animate({'margin-top': '-800px'}, 160);
   $('p[data-info="html-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
   $('p[data-info="css-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
   $('p[data-info="js-hours"]').stop().animate({opacity: '0', 'font-size': '10px'},200);
 }
 
+// -------------------------
+//  Portfolio Item 4 code
+// -------------------------
+if(position >= -4490 && position <= -4290){
+  $('img[data-info="es6-l"]').stop().animate({bottom: '-300px'},200);
+  $('img[data-info="jquary-l"]').stop().animate({right: '1400px'},200);
+  $('img[data-info="less-l"]').stop().animate({left: '1400px'},200);
+} else if(position <= -4500 && position >= -5000){
+  $('img[data-info="es6-l"]').stop().animate({bottom: '80px'},450);
+  $('img[data-info="jquary-l"]').stop().animate({right: '50px'},450);
+  $('img[data-info="less-l"]').stop().animate({left: '50px'},450);
+} else if(position <= -5200 && position >= -5250){
+  $('img[data-info="es6-l"]').stop().animate({bottom: '-300px'},200);
+  $('img[data-info="jquary-l"]').stop().animate({right: '1400px'},200);
+  $('img[data-info="less-l"]').stop().animate({left: '1400px'},200);
+}
+  
 // --------------------------
 //    Background Music
 // --------------------------