9am
commented
1 year ago 
Open 9am opened 1 year ago
9am
commented
1 year ago
9am
commented
1 year ago 13 years ago, I just started my career at a startup company. We were building a social APP running on Adobe Flash runtime, which is written in ActionScript3. At that time, web technology is not ready for an RIA(rich interact application), so many things are missing(transition, rotation...) if you want to build something fancy(right in the middle of the Browser Chaos), Flash is the only way to keep the consistency of your app among those browsers.
After 1 year of using the fantastic ActionScript3, I decided to make something outside of work using it. This is my habit of learning a new skill: I will come up with an idea. To fulfill that idea, the proportion of skills I already know to skills I don't know is about 80/20. So after this project, I will test the 80% I've learned and learn 20% new.
The idea to test my ActionScript3 at that time was a Flipping Book.
Flipping Book is an interactive animation that simulates a 3d book flipping effect using 2d programming.
After 12 years, flash is dead, and the web has evolved a lot in a way I can't even imagine. So same old trick but new technology, I'll build it again. And I know for sure I will learn something new and have some fun during the process. Let's Go!
The geometry is simple as in the old days, take the right top trigger area as an example:
MR) from the Mouse to the Root corner of the active trigger area.MR as PB.PB and the book boundary lines [i0, i1, i2, i3][R0, R1, i2, i0] will be the mask of the page after the next.PB, which will be the mask of the next page.Mouse. It can not be outside those two circles since one side of the page is stuck to the middle of the book.Although there are so many details to consider, this model is good enough, to begin with.
In 2023, we have so many choices to do this. SVG has been there for a while and Canvas also provides a bunch of drawing APIs. A normal HTML tag seems to be the last one we consider. It's pretty hard to draw a random polygon with only HTML and CSS. With the old border trick, a triangle is the best we can get.
But to consider actual content in the book, Canvas can only draw an HTMLImageElement. And SVG can only work with its own elements. It would be really nice if we could find a way to draw the polygons using only a normal HTML tag and CSS.
Leave this challenge to the next section, we can build our first implementation with Canvas.
As you can see in the GIF, for the next or previous page, we can only see part of the page content. So we need to figure out how to "block" things out.
Canvas provide an API to clip the context CanvasRenderingContext2D.clip(). SVG gives us a <clipPath> element to do the trick. And as for CSS, we have clip-path and mask now.
At this point, everything comes to the right place. We can render any HTML content to the page, and use CSS to transition: rotate() the element and clip-path the area to any path we want.
We need shadows, without them the book will be like this:
SVG and Canvas have filter to make this happen. Lucky for us, CSS gives us linear-gradient and filter too.
To make it even better, we can use CSS custom properties to update the depth of the shadow as we drag the page.
With all of those in mind, I build a lib. Feel free to try it~ @9am/flipr 📖
npm install @9am/flipr
What are the new things I've learned from building this?
Rxjs to get the mouse movement and DnD process, it's a new way of thinking user interaction for me.transform, clip-path, and gradient.typescript.Well, hope you enjoy it. I'll see you next time.
@9am 🕘
