parfait

haha just kidding... unless?

  • they/them

25 yr old cute things enthusiast


noa
@noa
Untitled · Ren'Co 0.0.1
hi coposters! im inside a visual novel. whoa! so cool
ok so its actually kinda possible to make visual novel style somewhat
also in this version you can go back now! click on the top half of the post and it will go back
i dont know what to do with this format so uuh here. have a visual novel format.
i… havent formatted this for sharing so you're going to have to copy the html and reverse engineer it
SORRy:(((
here i can give you my jsx file at least: (note it's missing the css, you have to copy it from cohost. there are two)

You must log in to comment.

in reply to @noa's post:

two questions real quick:

  1. wha tthe fuck!?
  2. how does this work? are you, like, injecting JS somehow, or is this a pure-CSS thing you've got going on? whatever the trick is, this is amazing and I cannot even begin to understand how it works

this is pure css. specifically, inline css only (which means unfortunately, you cannot make a turing machine in cohost. but you can still do some crazy stuff like this).

and, you can understand it! (if you know some css that is)

so, there's some things going on:

  • pagination:
    • ok, the first thing to understand is one-way pagination
    • cohost allows < details > / < summary > tags. they're used for things that you can open and close to see inside. here's the mdn page.
    • when you click anywhere in the summary element, all the stuff in the rest of the details shows up. when you click it again, it hides.
    • if we put an element inside that details body that's position:absolute;top:0;left:0;width:100%;height:100%, clicking on the summary element will cause it to cover up the whole page
    • now, we can make for instance a button that causes something to pop up on a post! pretty cool
    • two way pagination (forwards and back) is black magic. so. uuh. basically, you want to move the summary element after it is clicked. one way to do that is:
      1. ok well first, make the details display:contents.
      2. then, put it inside a display:flex container. because otherwise details doesn't normally allow display:flex for whatever reason.
      3. now, inside the summary you can add an element and give it a size and when it shows, it will move the element.
      4. next: k*ll yourself because it is m*rder trying to add a back button to coposts i wouldn't wish it on my worst enemy.
      5. do some positioning or whatever and you're done! forwards and back button! amazing
  • the typewriter effect:
    • so with inline css only, you can't create your own css animations
    • fortunately, cohost comes with three (3) animations for you to use in your coposts
    • there is: "bounce" (it makes stuff bounce. try it on an eggbug. eggbug bounce. bounce.), "slideupleft", and "slideupright"
    • slideupleft and slideupright start with transform:scale(0) (the element is invisible) and transition to transform:scale(1) (the element is fully visible) from the bottom left or bottom right, respectively.
    • setting animation: slideupleft 0.01s steps(1, end) 5s both makes the item appear after 5 seconds
    • specifically:
      • 0.01s is the length of the animation
      • steps(1, end) is the 'timing function'. usually this is 'linear' or 'ease-in-out', it makes the animation smooth. but 'steps(count, end)' makes it go in steps. and with 1 step, it goes from completely hidden to completely visible immediately
        • oh you know what? i bet this is completely unnecessary. if i set the animation length to like 0 or 0.000001 it would probably accomplish the exact same thing. can't believe i didn't think of that.
      • 5s is how long to wait before starting the animation
      • both is the 'fill mode' - it says what to do before the animation starts and after it ends. 'both' means before it starts, it should use the first thing in the animation (transform: scale(0)), and after it ends it should keep the last thing in the animation (transform: scale(1))

how i figured this out:

  • so i already know a bunch of css, and that helps with trying to position things in horrible places. mostly from years ago when i was battling with the pain of trying to write css by hand. never do it. it's horrible. also, css was even worse years ago than it is now and it's still horrible now. i use tailwind css now, it's so much nicer. you still need to know how the css flex stuff works and you think you know how it works and it works great for a year and then you go to add something and then suddenly everything in your layout gets squished and stretched and it's a mess. css.
  • my first attempt at the visual novel was this one: first attempt.
    • in that one, i originally had the typewriter animation smooth, new words would pop up from their bottom left corner. it was kinda cute but like somewhat distracting and weird. i think i looked up the syntax for the animation: property and while reading documentation for something related, i saw smoothstep and noticed hey, maybe i can use this to make the typewriter thing i want. i originally didn't think there would be any way to make the typewriter effect and just kinda stumbled into it.
    • in that first one, there is no back button. i put my attempt at a back button below. that one uses absolute positioning and a trick i copied from someone else's back button post. but i was unsatisfied with it because like it couldn't scale to any size because absolute positioning was making it so the child element couldn't retroencabulate the bioreactor uuh. the child element couldn't scale properly or something. and i was like "dang. if only i could get around this". and i went outside and was kinda mindlessly thinking about the problem and suddenly realised "oh hey, if i use flex positioning, i can skip the need for absolute and then i won't have that problem" and immediately tried it as soon as i got home.
  • from other posts, i knew that details/summary is allowed
  • i found the animations by looking at how other posts did animations and then searching through the stylesheets in devtools to find what animations are available

inline css copost host post :eggbug:

oh also like
if you want to make fancy copost stuff
it can be useful to look at how other posts are made
but it really has to be a very specific, targeted "how was this one interaction done" thing

like this amazing post by blackle - you can look at it and find 'how was that cord done' or 'how was the drag thing done' but it's going to take a lot of time to figure out each thing about it and if you're trying to learn it, you'll have to mess around with its style and try to make your own for each component to really understand how it works. i have not done that and only have a vague idea about how it works. it's basically black magic to me.

also i can't believe that post is possible. like not only the crazy css stuff but like it's beautiful and it must have taken a lot of time to make

this is amazing, thanks for the in-depth info! i am, allegedly, a frontend by day, so in theory i know CSS... but in practice i just know the side of CSS needed to build whatever SaaS stuff people wanna throw money at, not the kind of CSS needed for amazing creative work like this. clearly i got some studyin' to do!