elf
/
fridgemagnets
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
fridgemagnets/.wireit/6275696c64/cache/944764c5fdcc5690d585cdeb3b0.../dist/styles.css

24 lines
306 B
CSS
Raw Normal View History

Updated movement code for performance and accuracy. This was a learning experience. The transform controls `rotate`, `scale`, and `translate` have independent CSS names now, so I don't have to memorize the transformation pattern needed to make them go as expected. On the other hand, `transition` is still how you describe the speed and easing. And even though they're not officially transformations, `transitionend` is how you detect when one has completed. All of the various different techniques for figuring out where something is on the page with respect to another element can be terribly confusing. Ultimately, I went with offsets-from-viewport, as that seems to be the most common way of doing the calculations. Separating `pointermove` from the animation frames used to update the page is a very nifty technique that I learned from the Svelte guys. `pointermove` only updates an (x,y) coordinate pair that you keep in memory; as long as you're "tracking a drag," you just update on every available animation frame, using the last (x,y) pair that it saved. This gives you much smoother animations.
2025-01-21 00:03:18 +00:00
html, body {
overflow: hidden;
padding: 0;
margin: 0;
}
#fridgemagnets {
width: 100vw;
height: 100vh;
}
#fridge {
overflow: hidden;
width: 100vw;
background: url('pingbg.png') repeat;
}
#footer {
background-color: #32cd32;
width: 100vw;
height: 18ex;
}