introduction
a slideshow
use the arrow on the bottom-right to advance
zooming in on this is VERY recommended
hello!
hi, my name is Gergő! you can also call me gray. I'm 17 years old and I use he/him pronouns. I've been coding for about 9 years now, and I am the CTO of NeerY. here are some (significant) coding things I've done:
music
outside of coding, my favourite thing is probably music. i listen to music a lot (at least 30k minutes listened on Spotify every year), and i really like experimental hip-hop, especially JPEGMAFIA. i also used to make mashups and i am currently making some music. here are the music things i've done:
- soundcloud (mashups)
- bandcamp (original music): soon
- collection of obscure JPEGMAFIA tracks/videos (NSFW)
-
last.fm
contact
if you want to contact me, you can do so on my e-mail and twitter. i offer coding help! so if you need help with anything, feel free to shoot me a message somewhere. here are some things i'm knowledgeable at:
- backend: rust, node.js, c#
- frontend: react, svelte
- mobile: react native
- other/WTF: cohost css fuckery, cohost API, js sandbox breaking, gameboy assembly, nintendo + playdate console hacking, nintendo homebrew coding, playdate game coding, spotify internals, no mans sky API
thanks for reading <3
consider following
This is an ingenious little pile of solutions. It's basically a literal stack of cards with some clever holes punched in them to facilitate pagination. I'm going to try to adapt it to break it down visually here.
First up, I've made all the slides' backgrounds slightly transparent, so you can see through them, and see that the structure is in fact a stack; each successive slide goes on top of the last one. In HTML structure, each one actually lives inside the previous, and its visibility is governed by whether the <details> element is open.
this is the first slide,
it lives outside of all the details elements
this outlined section is the details element,
which toggles the first slide
welcome to slide 2!
if you peek at the bottom-right, you may notice the outlined details element is now wider; this is because there's a 2.5 rem-wide div which is toggled along with the slide contents (which are absolute-positioned so they don't affect the size), causing it to expand
the next slide's details element (outlined in green) is placed over the top of the last one's, but without the extra div expanding it; in this way you can click on either, to go forward and back!
it's z-index and clever positioning!
this clever combination of z-index to control layering, absolute positioned slides, and adding content to allow clicking on the previous element enables this whole slide show; here on slide 3 you can see that slide 2's is now wider, and slide 1's is covered entirely.
there's also a "flipped" summary element, to get your browser to render the backwards arrow, but that element plays no actual part in the process
this technique is very cool
shoutouts to @mog for coming up with it
and I hope this breakdown has helped you!
I started digging into this in because I'm thinking about how to use a similar technique, and realised it might be nice to share my understanding of it - I hope this helps you!
thank you for writing it up! being able to push the <summary> around is a gamechanger. this is basically also how memomaze works, except with some more stuff (e.g. masking) to drive the file size down.
however, there is one caveat to this: i can't find a way to be to move the summary down, and still maintain the stacking context (the obvious solution, transform: rotate(180deg), breaks the context). maintaining the context is maybe not important for something simple like a slideshow, but for something that is quite complex in its z-indexing, like memomaze for example, it's essential.
if someone finds a way to do it, please, let me know!
(ps: there are some more useful tricks used in memomaze, and while i can't be arsed to write it up, feel free to dig into it if you'd like.)
(pps: both memomaze and the slideshow are fixed width and height, because at that time i thought it was only possible that way, but now that i think about it, you can make it work with a dynamic size with top: 0; bottom: 0; left: 0; right: 0;. it's more simple this way, but if someone wants to make one that's dynamically sized, it should be possible!)
(ppps: i'm still working on the warioware breakdown, which should open all sorts of animation fuckery! stay tuned :))
