Skip to content

Commit

Permalink
added second animation
Browse files Browse the repository at this point in the history 
- Gitignore ds_store files
- Made text color of html css and js white
  • Loading branch information
@zoeyfrisart
zoeyfrisart committed Jan 6, 2017
1 parent 0b67e06 commit 77f46ad
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 15 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.DS_Store
32 changes: 29 additions & 3 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
font-family: 'Caveat', cursive;
font-family: 'Marck Script', cursive;
font-family: 'Press Start 2P', cursive;
font-family: 'Bungee Shade', cursive;
*/

body{
Expand Down Expand Up @@ -113,14 +114,38 @@ p{
right: 200px;
width: 1000px;
height: 400px;
overflow: hidden;
background: blue;
/* background: blue;*/
border-radius: 5px;
padding: 10px;
display: none;
display: ;
z-index: 50;
}

.portfolio-item2 h2{
font-family: 'Bungee Shade', cursive;
font-size: 45px;
color: #e2cb1e;
position: absolute;
top: -300px;
}

.portfolio-item2 img{
position: absolute;
top: 800px;
}

[data-info="css3"]{
left: 200px;
}

[data-info="html5"]{
left: 400px;
}

[data-info="js"]{
left: 0px;
}

.wrapper{
background: white;
width: 1400px;
Expand All @@ -129,6 +154,7 @@ p{
background-image: url(../links/background/background.jpg);
background-position: 1px;
transition: background 0.2s linear;
overflow: hidden;
}

#character{
Expand Down
11 changes: 8 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.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>
<body>
<div class="center-wrapper">
<div class="wrapper">
<div class="grass"></div>
<img src="links/character.png" alt="character" id="character">
<div id="music-switch" onclick="backgroundMusicSwitch()"></div>
<a href="https://github.com/yannick1691/jquaryGame" target="_blank" class="github"><img src="links/icons/Octocat.png" height="55"></a>
<a href="https://github.com/yannick1691/jquaryGame" target="_blank" class="github"><img src="links/icons/Octocat.png" height="55" alt="github"></a>
<div class="guide">
<div class="step1">
<p>
Expand All @@ -36,10 +37,14 @@
</div>
</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</p>
<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>
</div>
<div class="portfolio-item2">
<p>Hallo Dit is een test Tekst voor de animatie</p>
<h2 data-info="vaardigheden">Mijn Vaardigheden</h2>
<img data-info="css3" src="links/attributes/css3.png" alt="css3" height="200">
<img data-info="html5" src="links/attributes/html5.png" alt="html5" height="200">
<img data-info="js" src="links/attributes/js.png" alt="javascript" height="200">
</div>
</div>
</div>
Expand Down
30 changes: 21 additions & 9 deletions js/scrips.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,15 @@ function walk(e){
character.style.transform = `rotate(${i}deg)`;
scene.style.backgroundPosition = `${backgroundForward}px`;
grass.style.backgroundPosition = `${backgroundForward}px`;
i = i + 16;
i = i + 15;
backgroundForward = i - (i * 2.1);
backgroundBackward = backgroundForward;
} else if(e.keyCode === 37 && position <= -20) {
// character.style.left = `${i}px`;
character.style.transform = `rotate(${i}deg)`;
scene.style.backgroundPosition = `${backgroundBackward}px`;
grass.style.backgroundPosition = `${backgroundBackward}px`;
i = i - 16;
i = i - 15;
backgroundBackward = i - (i * 2);
backgroundForward = backgroundBackward;
} else if(e.keyCode === 38){
Expand All @@ -43,7 +43,7 @@ function walk(e){
// Portfolio Item 1 code
// -------------------------

if(position>= -1200 && position <= -1100){
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);
Expand All @@ -55,12 +55,24 @@ if(position>= -1200 && position <= -1100){
// Portfolio Item 2 code
// -------------------------

if(position>= -2000 && position <= -1900){
$('.portfolio-item2').stop().slideUp(100);
} else if(position <= -2000 && position >= -2200){
$('.portfolio-item2').stop().slideDown(200);
} else if(position <= -2600) {
$('.portfolio-item2').stop().slideUp(100);
if(position>= -1990 && position <= -1710){
// $('.portfolio-item2').stop().slideUp(100);
$('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 80);
$('img[data-info="css3"]').stop().animate({top: '800px'}, 60);
$('img[data-info="html5"]').stop().animate({top: '800px'}, 60);
$('img[data-info="js"]').stop().animate({top: '800px'}, 60);
} else if(position <= -2000 && position >= -2700){
// $('.portfolio-item2').stop().slideDown(200);
$('h2[data-info="vaardigheden"]').stop().animate({top: '-50px'}, 'slow');
$('img[data-info="css3"]').stop().animate({top: '120px'}, 'slow', 'swing');
$('img[data-info="html5"]').stop().animate({top: '120px'}, 'slow', 'swing');
$('img[data-info="js"]').stop().animate({top: '120px'}, 'slow', 'swing');
} else if(position <= -3000) {
// $('.portfolio-item2').stop().slideUp(100);
$('h2[data-info="vaardigheden"]').stop().animate({top: '-300px'}, 80);
$('img[data-info="css3"]').stop().animate({top: '800px'}, 60);
$('img[data-info="html5"]').stop().animate({top: '800px'}, 60);
$('img[data-info="js"]').stop().animate({top: '800px'}, 60);
}
// --------------------------
// Background Music
Expand Down
Binary file added links/attributes/css3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added links/attributes/html5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added links/attributes/js.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 77f46ad

Please sign in to comment.