hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2024-11-06 15:45:54 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Finished Gold Rush Animations!

Browse source
This commit is contained in:
Squirrel-314 2021-01-16 17:45:40 -05:00
parent aee9944b0e
commit 6eef5e58c1
2 changed files with 49 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -63,7 +63,7 @@
<div class="text"> <div class="text">
<br> <br>
<h1>Gold Rush!</h1> <h1>Gold Rush!</h1>
<p class="about-gold">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p> <p class="about-gold gold-text">A simple-but-promising incremental game, made with JavaScript. This was my first game, and recently had a complete redo, with many new features which you will have to find out about yourself! You can play it <a href="https://squirrel-314.github.io">here</a>, or check ou the GitHub repository <a href="https://github.com/Squirrel-314/squirrel-314.github.io">here</a>, and if you use Linux, you can download the 0.9 version app <a href="download-gold-rush.html">here</a>!</p>
</div> </div>
</div> </div>
<div class="block" id="coming-soon"> <div class="block" id="coming-soon">

49
styles.css
View file

@ -355,7 +355,7 @@ Gold Rush
} }
#gold-rush:hover h1 { #gold-rush:hover h1 {
animation: show-text 1.2s 2 forwards; animation: show-text 1.2s 3 forwards;
} }
@keyframes show-text { @keyframes show-text {
@ -367,6 +367,53 @@ Gold Rush
} }
} }
.gold-text {
animation: bounce-out 3s ease-in forwards;
transform: translate(1000px, 500px);
margin: auto;
transition: 0.8s;
}
#gold-rush:hover .gold-text {
animation: bounce-in 3s ease-in forwards;
}
@keyframes bounce-in {
0% {
transform: translateX(500px) translateY(-80px) scale(0);
width: 500px;
opacity: 0.2;
}
75% {
transform: translateX(200px) translateY(80px) scale(0.8);
width: 500px;
opacity: .8;
}
100% {
transform: translate(0, 0) scale(1);
width: 500px;
opacity: 1;
}
}
@keyframes bounce-out {
0% {
transform: translate(0, 0) scale(1);
width: 500px;
opacity: 1;
}
25% {
transform: translateX(200px) translateY(80px) scale(0.8);
width: 500px;
opacity: .8;
}
100% {
transform: translateX(500px) translateY(-80px) scale(0);
width: 500px;
opacity: 0.2;
}
}
/*================================================== /*==================================================
Coming Soon! Coming Soon!
==================================================*/ ==================================================*/