I am new to web design/development and coding and am self-taught. But it’s something that really excites me, so I am still trying to “properly” learn. I fell in love with this flick-through section on the product pages of Papier. It shows the inside of their journals by turning the pages yourself and even offers an on/off toggle to show how the spreads can be used. I know there are PDF flipthrough extensions and plug-ins that you can install if you purchase subscriptions, however, Papier’s approach looks incredibly different than traditional flipbooks I’ve seen or tested on. There’s no “frame” for prev/next controls and they offer the toggle switch. I tried digging into the source code a bit, but I’m still a beginner of course, and them referencing “flickthrough-app” in the code means nothing to me. Or anything I’ve been able to find out online, So my question is: How is something like this created/coded? And how can this be accomplished for something I might like to try coding in the future? And a good underlying question in all this, what is the best way to see how something was coded aside from “Inspect” or digging into the source code? Is there, really? Thanks for helping out this novice! Here’s the link for a product on Papier (https://www.papier.com/us/joy-34184). Scroll down the flick-through section for a visual on what I’m talking about!
Based on the source code, it looks like they created the pages as an SVG and then overlaid a photo file on top. But I can’t figure out what else was done based off this code.