ShrimpSquad/ShrimpDelightSite
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shrimpy rain my dudes

Browse Source
This commit is contained in:
Lah Shrimp 2026-03-13 00:45:37 -06:00
parent d2426cca93
commit b4b3e56aaa
5 changed files with 74 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -5,12 +5,13 @@
<link rel="icon" type="image/x-icon" href="./shrimpmoji.ico"> <link rel="icon" type="image/x-icon" href="./shrimpmoji.ico">
<link rel="stylesheet" href="shrimpy-styles.css"/> <link rel="stylesheet" href="shrimpy-styles.css"/>
<script type="module"> <script type="module">
import { getProjectData, scrollToProjects} from "./shrimply-the-best.js" import { getProjectData, itsRainingShrimp} from "./shrimply-the-best.js"
window.getProjectData = getProjectData; window.getProjectData = getProjectData;
window.scrollToProjects = scrollToProjects; window.itsRainingShrimp = itsRainingShrimp;
</script> </script>
</head> </head>
<body> <body>
<div id="shrimply-the-rain"></div>
<section class="we-are-shrimp-squad"> <section class="we-are-shrimp-squad">
<img src="assets/shrimp.png"/> <img src="assets/shrimp.png"/>
SHRIMP SQUAD SHRIMP SQUAD
@ -19,7 +20,7 @@
<section> <section>
<div class="shrimp-info"> <div class="shrimp-info">
<div> We are Shrimp Squad and we make things. There's no project we can't mantis punch. Shrimply take a look at what we're known for.</div> <div> We are Shrimp Squad and we make things. There's no project we can't mantis punch. Shrimply take a look at what we're known for.</div>
<button type="button" onclick="scrollToProjects()">Dive into Seafood Delights</button> <button id="seafoodDelightsBtn" type="button">Dive into Seafood Delights</button>
</div> </div>
</section> </section>
<section class="shrimp-hero"> <section class="shrimp-hero">
@ -46,8 +47,7 @@
</html> </html>
<!-- cookies? we only offer shrimp <!--
Turn dive into seafood delights into a cookies bar popup?
todo list todo list
- more shrimpy font - more shrimpy font
@ -55,7 +55,6 @@ todo list
- menu i guess, hamburger, but the lines are waves - menu i guess, hamburger, but the lines are waves
- animations - animations
- shirmp cursor for hover - shirmp cursor for hover
- shrimp rain when button
- clean up click handling - clean up click handling
- try it out into button - try it out into button
--> -->

36
shrimple-functions.js
View File

@ -23,12 +23,38 @@ export function clearSelectedProjectClass() {
document.getElementById("htp").classList.remove("selected-project"); document.getElementById("htp").classList.remove("selected-project");
} }
export function scrollToProjects(){
const projects = document.getElementsByClassName("shrimp-projects")[0];
projects.scrollIntoView({behavior:"smooth"});
}
export function createShrimpFooter() { export function createShrimpFooter() {
const footer = document.getElementById("shrimp-gif"); const footer = document.getElementById("shrimp-gif");
footer.innerHTML = "<img src='./assets/dance-shrimp-dance.gif' alt='a shrimp dancing'>".repeat(10); footer.innerHTML = "<img src='./assets/dance-shrimp-dance.gif' alt='a shrimp dancing'>".repeat(10);
}
export function itsRainingShrimp() {
const shrimpyRain = document.getElementById("shrimply-the-rain");
// push shrimp rain to the front. It's basically an overlay
shrimpyRain.style.zIndex = 2;
var increment = 0;
var drops = "";
// maxWidthToShrimp is set based on image size so not to overflow
const maxWidthToShrimp = 83;
while (increment < maxWidthToShrimp) {
// how much you want shrimp to cover
var randomTwoHundo = (Math.floor(Math.random() * 200));
drops += '<img src="assets/shrimp.png" style="'
+ 'left: ' + increment
+ '%; bottom: ' + (randomTwoHundo) + '%;" />'
increment++;
}
shrimpyRain.innerHTML = drops;
// wait until after the animation plays to make the shrimp disappear 🪄
setTimeout(() => {
shrimpyRain.style.zIndex = -1;
shrimpyRain.innerHTML = "";
}, 2950);
} }

15
shrimply-the-best.js
View File

@ -1,7 +1,13 @@
import {getProjectData, clearSelectedProjectClass, scrollToProjects, createShrimpFooter} from "./shrimple-functions.js"; import {
getProjectData,
clearSelectedProjectClass,
createShrimpFooter,
itsRainingShrimp
} from "./shrimple-functions.js";
const biotamaBtn = document.getElementById("biotama"); const biotamaBtn = document.getElementById("biotama");
const htpBtn = document.getElementById("htp"); const htpBtn = document.getElementById("htp");
const seafoodBtn = document.getElementById("seafoodDelightsBtn");
document.addEventListener("DOMContentLoaded", function(event) { document.addEventListener("DOMContentLoaded", function(event) {
biotamaBtn.click(); biotamaBtn.click();
@ -20,4 +26,9 @@ htpBtn.addEventListener("click", function() {
getProjectData("htp"); getProjectData("htp");
}); });
export {getProjectData, scrollToProjects} seafoodBtn.addEventListener("click", function() {
itsRainingShrimp();
})
export {getProjectData, itsRainingShrimp}

0
shrimpmojo.ico → shrimpmoji.ico
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

26
shrimpy-styles.css
View File

@ -166,5 +166,29 @@ body {
from, to { border-color: transparent } from, to { border-color: transparent }
50% { border-color: var(--ashy-shrimp); } 50% { border-color: var(--ashy-shrimp); }
} }
/* end buttons */
/* end buttons */ /* shrimp rain animation */
#shrimply-the-rain {
height:100%;
width:100%;
overflow: hidden;
position:fixed;
z-index: -1;
}
#shrimply-the-rain > img {
animation: RainDown 3s linear 1;
position:absolute;
width:15%;
}
@keyframes RainDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(200vh);
}
}
/* end shrimp rain animation */