ada/ebgamesreal-live
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Speech bubble working, need to add dissmal functionality and content.

Browse source
This commit is contained in:
Alex Huddleston 2020-04-10 21:52:08 -05:00
parent b118ad2d4b
commit 9304c72470
5 changed files with 130 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
ebgames_2002_files/speech_bubble.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

92
index.css
View file

@ -28,13 +28,60 @@
#ebgamesguy {
position: fixed;
bottom: -9rem;
bottom: -10rem;
right: 5rem;
float: right;
width: auto;
height: auto;
max-width: 100%;
animation: crawl-up 14s linear 0s 1;
animation: crawl-up 10s linear 0s 1;
}
#ebgamesguy-txt-speech-container {
position: absolute;
left: -50px;
top: -130px;
max-width: 75%;
width: auto;
height: auto;
display: none;
opacity: 100%;
animation: fade-in 15s linear 0s 1;
}
#ebgamesguy-txt-container {
position: absolute;
z-index: 1;
display: flex;
width: 100%;
height: 100%;
max-width: 65%;
max-height: 80%;
align-items: center;
top: 0;
bottom: 0;
left: 5%;
right: 0;
}
#ebgamesguy-txt {
text-align: center;
width: 100%;
max-width: 100%;
overflow-wrap: break-word;
}
#ebgamesguy-speech-container {
max-width: 75%;
width: auto;
height: auto;
transform: rotateY(180deg);
}
#ebgamesguy-speech {
max-width: 100%;
width: auto;
height: auto;
}
@keyframes crawl-up {
@ -72,7 +119,46 @@
bottom: -12rem;
}
100% {
bottom: -9rem;
bottom: -10rem;
}
}
@keyframes fade-in {
0% {
opacity: 0%;
}
70% {
opacity: 0%;
}
71% {
opacity: 10%;
}
72% {
opacity: 25%;
}
76% {
opacity: 33%;
}
77% {
opacity: 40%;
}
83% {
opacity: 47%;
}
84% {
opacity: 57%;
}
87% {
opacity: 63%;
}
90% {
opacity: 71%;
}
96% {
opacity: 86%;
}
100% {
opacity: 100%;
}
}

12
index.html
View file

@ -848,7 +848,17 @@
</font>
</center>
&nbsp;<br>&nbsp;<br>&nbsp;<br>
<img src="ebgames_2002_files/ebgamesguy.png" id="ebgamesguy">
<div id="ebgamesguy">
<img src="ebgames_2002_files/ebgamesguy.png" id="ebgamesguy-img">
<div id="ebgamesguy-txt-speech-container">
<div id="ebgamesguy-txt-container">
<p id="ebgamesguy-txt">I am an abomination of nature</p>
</div>
<div id="ebgamesguy-speech-container">
<img src="ebgames_2002_files/speech_bubble.png" id="ebgamesguy-speech">
</div>
</div>
</div>
</body>
</html>

14
index.js
View file

@ -1,5 +1,11 @@
console.log("Hello, world!");
const showSpeech = function () {
ebgamesguy = document.getElementById("ebgamesguy-txt-speech-container");
if (! ebgamesguy.style.display) {
ebgamesguy.style.display = "flex";
}
};
anchorImage = function() {
ebgamesguy = document.getElementById("ebgamesguy");
}
window.addEventListener("load", function () {
console.log("Hello, world!");
showSpeech();
});

20
temp.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>
EB Games Regrets To Inform
</h1>
<p>
This site is not quite ready yet.
</p>
<p>
Please follow <a href="https://gamestop.store/@ebgamesguy">@ebgamesguy@gamestop.store</a> for updates.
</p>
</body>
</html>