justin/pokesql
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Generate 60 randomly placed trees across full scrollable world, varying size and sway speed

Browse Source
This commit is contained in:
Justin Oros
2026-05-14 10:51:01 -07:00
parent e354ddc224
commit f17d3f6a76
3 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+11 -10
View File
@@ -397,18 +397,19 @@ html, body {
will-change: transform;
z-index: 5;
}
.map-trees {
.map-trees {
position: absolute;
top: 12%;
left: 0; right: 0;
display: flex;
justify-content: space-around;
padding: 0 2%;
width: 100%;
inset: 0;
pointer-events: none;
}
.tree { font-size:clamp(24px,7vw,36px); display:inline-block; animation:treeSway 3s ease-in-out infinite; filter:drop-shadow(1px 2px 0 rgba(0,0,0,.3)); }
.tree:nth-child(2){animation-delay:.5s;} .tree:nth-child(3){animation-delay:1s;} .tree:nth-child(4){animation-delay:1.5s;} .tree:nth-child(5){animation-delay:2s;}
.tree:nth-child(6){animation-delay:2.5s;} .tree:nth-child(7){animation-delay:.8s;} .tree:nth-child(8){animation-delay:1.8s;}
.tree {
position: absolute;
display: inline-block;
animation: treeSway 3s ease-in-out infinite;
filter: drop-shadow(1px 2px 0 rgba(0,0,0,.3));
line-height: 1;
}
.tree:nth-child(even) { animation-direction: reverse; }
.map-ground {
position: absolute;
bottom: 0; left: 0; right: 0;