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 @@
-
- character + character
github
@@ -79,7 +78,12 @@

Wat ik nu aan het leren ben:

- +

Wat ik wil leren in de toekomst:

+
+ node + php + react +
@@ -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