diff --git a/css/style.css b/css/style.css
index 68bf7a2..54f79f5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -158,18 +158,18 @@ h2{
width: 1400px;
height: 700px;
position: relative;
- background-image: url(../links/background/background.jpg);
+ background-image: url(../links/background/background.png);
background-position: 1px;
transition: background 0.2s linear;
overflow: hidden;
}
#character{
- width: 40px;
+ width: 90px;
position: absolute;
bottom: 30px;
left: 102px;
- transition: all 0.1s ease-in-out;
+ transition: all 0.25s ease-in-out, transform 0.8s ease-in-out;
transform: rotate(0deg);
z-index: 10;
}
@@ -302,3 +302,45 @@ h2{
[data-info="watImLearning"]{
margin-top: -170px;
}
+
+
+[data-info="langEnFrameworks"]{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ position: absolute;
+ width: 1400px;
+ height: 300px;
+ bottom: 100px;
+}
+
+.portfolio-item5{
+ height: 700px;
+ width: 1400px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+[data-info="watIkWilLeren"]{
+ margin-top: -170px;
+}
+
+[data-info="react-l"]{
+ position: absolute;
+ bottom: 90px;
+ right: 1400px;
+}
+
+[data-info="node-l"]{
+ position: absolute;
+ top: 700px;
+ left: 50px;
+}
+
+[data-info="php-l"]{
+ position: absolute;
+ bottom: 90px;
+ right: 1400px;
+}
diff --git a/index.html b/index.html
index 76ecf7a..3199222 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,7 @@
-
-
+
@@ -79,7 +78,12 @@
Wat ik nu aan het leren ben:
-
+
Wat ik wil leren in de toekomst:
+
@@ -97,13 +101,19 @@ Wat ik nu aan het leren ben:
const guide = document.querySelector('.guide');
let audioPlaying = false;
var i = 10;
+ var f = 10;
var backgroundForward = 0;
+ var backgroundForward2 = 0;
var backgroundBackward = 0;
+ var backgroundBackward2 = 0;
let PoIt1Ran = false;
let PoIt2Ran = false;
let PoIt3Ran = false;
let PoIt4Ran = false;
let PoIt5Ran = false;
+ let node = $('img[data-info="node-l"]');
+ let php = $('img[data-info="php-l"]');
+ let react = $('img[data-info="react-l"]')
diff --git a/js/scrips.js b/js/scrips.js
index 595c1ee..4babebf 100644
--- a/js/scrips.js
+++ b/js/scrips.js
@@ -7,29 +7,28 @@ $(document).ready(function(){
function walk(e){
/*Move right*/
let position = parseInt(scene.style.backgroundPositionX);
- if(e.keyCode === 39){
+ let characterHeight = parseInt(character.style.bottom);
+ if(e.keyCode === 39){ // Code Om naar Rechts te gaan
// character.style.left = `${i}px`;
- character.style.transform = `rotate(${i}deg)`;
+ character.style.transform = 'rotate(0deg)';
scene.style.backgroundPosition = `${backgroundForward}px`;
- grass.style.backgroundPosition = `${backgroundForward}px`;
i = i + 15;
backgroundForward = i - (i * 2.1);
backgroundBackward = backgroundForward;
- } else if(e.keyCode === 37 && position <= -20) {
+ } else if(e.keyCode === 37 && position <= -20) { // Code Om Naar Links Te Gaan
// character.style.left = `${i}px`;
character.style.transform = `rotate(${i}deg)`;
scene.style.backgroundPosition = `${backgroundBackward}px`;
- grass.style.backgroundPosition = `${backgroundBackward}px`;
i = i - 15;
backgroundBackward = i - (i * 2);
backgroundForward = backgroundBackward;
- } else if(e.keyCode === 38){
- character.style.bottom = '205px';
+ } else if(e.keyCode === 38){ // Code Om Omhoog te gaan
+ f = f + 20;
+ character.style.transform = 'rotate(-90deg)';
+ character.style.bottom = `${f}px`;
+// f = parseInt(character.style.bottom);
jumpSound.currentTime = 0;
jumpSound.play();
- setTimeout(reset, 150);
-// $('.jumpi').removeClass('hidden').addClass('visible');
-// character.style.bottom = '10px';
}
console.info(position);
@@ -129,6 +128,33 @@ if(position >= -3934 && position <= -3820 && PoIt4Ran === true){
$('img[data-info="less-l"]').stop().animate({left: '1400px'},300);
PoIt4Ran = false;
}
+
+
+// -------------------------
+// Portfolio Item 5 code
+// -------------------------
+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);
+ 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);
+ 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);
+ PoIt5Ran = false;
+}
+
// --------------------------
// Background Music
@@ -148,11 +174,6 @@ function test(e){
console.log(e.keyCode);
}
-function reset(){
- character.style.bottom = '30px';
- $('.jumpi').fadeOut(1000);
-}
-
function backgroundMusicSwitch(){
if(audioPlaying === false){
backgroundMusic.play();
diff --git a/links/attributes/node.png b/links/attributes/node.png
new file mode 100644
index 0000000..923d438
Binary files /dev/null and b/links/attributes/node.png differ
diff --git a/links/attributes/php.png b/links/attributes/php.png
new file mode 100644
index 0000000..92fcbae
Binary files /dev/null and b/links/attributes/php.png differ
diff --git a/links/attributes/react.png b/links/attributes/react.png
new file mode 100644
index 0000000..d1d0163
Binary files /dev/null and b/links/attributes/react.png differ
diff --git a/links/background/background.png b/links/background/background.png
new file mode 100644
index 0000000..cc1902f
Binary files /dev/null and b/links/background/background.png differ
diff --git a/links/character/moving@2x.png b/links/character/moving@2x.png
new file mode 100644
index 0000000..efca66c
Binary files /dev/null and b/links/character/moving@2x.png differ
diff --git a/links/character/notMoving@2x.png b/links/character/notMoving@2x.png
new file mode 100644
index 0000000..f091042
Binary files /dev/null and b/links/character/notMoving@2x.png differ