Bauer Atlas and CSS

[Doug R.]

Does anyone know how to do this? I want to just have the illusion of flipping pages. I don't need anything fancy at all, just text on a page I can turn. I teased the code out of the Bauer Atlas, but there's no formatting at all so I can't really make heads or tails of it.

I want to make a story book, and this format is perfect for it.

[Estaar]

I can't believe this!

I was wondering the exact same thing earlier today and was going to post about it later. Well, I was actually going to post praise for the Bauer Atlas in the RP praise post, and ask at the same time how something like that is done.

[Doug R.]

I've found some css code that does it in varying ways, but it doesn't translate into a Cantr note, sadly. Clearly Mr. Bauer's player knew some magic to make it work. Oh, and for websearch purposes, I think it's called a "css flipbook"

[EchoMan]

I have built something similar to this professionally a long time ago, but never for Cantr. If books ever get implemented I assume they would be made in a very similar way, with ajax-calls to flip pages etc.

[Undine]

*Resurrects post*
Has anyone had luck with this in the year and a half that this post has been up? I would love to do something like Mr. Bauer did. His atlas is a work of art!

[*Wiro]

I wish the player made it open source on the forum because it's really cool.

[BosBaBe]

*summons Anicator* I think he knows how it works, from what I've seen.

[AniCator]

*whispers* It's very easy.

Edit: For those that know how to develop websites of course.
I'll try to write a reply soon that includes some instructions.

[Undine]

*whispers* It's very easy.

Edit: For those that know how to develop websites of course.
I'll try to write a reply soon that includes some instructions.

Hopefully it isn't too complicated! I know basic HTML and CSS, but I never got into the "gritty" bits.

[Calyx]

As far as I know it's done with <div> layers and visibility and/or z-index switching to display the pages before/behind each other! Not that hard, really!

I might be a bit out of date though...

[Doug R.]

I did gut the Bauer Atlas and repurpose the code for my own project, but the final product won't survive the new note system, so I can't actually edit them. Which bugs me, because I found typos...

[AniCator]

@Calyx: It's way simpler than that.

I started working on a note editor some time ago but never actually finished it.

[Swingerzetta]

That just makes me want to start stocking up on notepaper textures...

Do we know if even the Atlas its self can be edited? It DOES look mostly CSS, which our notes can handle... Or is it just a matter of getting it optimized correctly?

[AniCator]

Here's the trick that kind of reveals all the magic.

Basically these multi-page notes are long pages with their scrollbars hidden (overflow: hidden;).
The pages are equal height divs stacked on top of each other.
Then using anchors, the pages snap in place when you click on a 'page link'.

[Swingerzetta]

Oh man, that is magic. So, the whole book is there, not overlapping, just scrolled out of view? And the scrollbars are inaccessible, so instead the links do the scrolling?