diff --git a/index.html b/index.html index 92dd1ca..05ffa2b 100755 --- a/index.html +++ b/index.html @@ -5,12 +5,13 @@ +
SHRIMP SQUAD @@ -19,7 +20,7 @@
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.
- +
@@ -46,8 +47,7 @@ - \ No newline at end of file diff --git a/shrimple-functions.js b/shrimple-functions.js index e66d7c6..e0e9669 100644 --- a/shrimple-functions.js +++ b/shrimple-functions.js @@ -23,12 +23,38 @@ export function clearSelectedProjectClass() { document.getElementById("htp").classList.remove("selected-project"); } -export function scrollToProjects(){ - const projects = document.getElementsByClassName("shrimp-projects")[0]; - projects.scrollIntoView({behavior:"smooth"}); -} - export function createShrimpFooter() { const footer = document.getElementById("shrimp-gif"); footer.innerHTML = "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 += '' + + increment++; + } + + shrimpyRain.innerHTML = drops; + + // wait until after the animation plays to make the shrimp disappear 🪄 + setTimeout(() => { + shrimpyRain.style.zIndex = -1; + shrimpyRain.innerHTML = ""; + }, 2950); + } \ No newline at end of file diff --git a/shrimply-the-best.js b/shrimply-the-best.js index 1e34db8..317eb35 100644 --- a/shrimply-the-best.js +++ b/shrimply-the-best.js @@ -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 htpBtn = document.getElementById("htp"); +const seafoodBtn = document.getElementById("seafoodDelightsBtn"); document.addEventListener("DOMContentLoaded", function(event) { biotamaBtn.click(); @@ -20,4 +26,9 @@ htpBtn.addEventListener("click", function() { getProjectData("htp"); }); -export {getProjectData, scrollToProjects} \ No newline at end of file +seafoodBtn.addEventListener("click", function() { + itsRainingShrimp(); +}) + + +export {getProjectData, itsRainingShrimp} \ No newline at end of file diff --git a/shrimpmojo.ico b/shrimpmoji.ico similarity index 100% rename from shrimpmojo.ico rename to shrimpmoji.ico diff --git a/shrimpy-styles.css b/shrimpy-styles.css index 6a42901..9c30663 100644 --- a/shrimpy-styles.css +++ b/shrimpy-styles.css @@ -166,5 +166,29 @@ body { from, to { border-color: transparent } 50% { border-color: var(--ashy-shrimp); } } +/* end buttons */ -/* end buttons */ \ No newline at end of file +/* 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 */ \ No newline at end of file