Let's make a Flip Book using HTML CSS JavaScript (Step by Step Guide)

[@user-eu5wo2bt8r]

The simplicity of your logic is truly genius. It takes a great mind to code like that. Thank you tremendously

[@hugocangi6214]

HELLO FRIEND, I JUST FINISHED THE FLIP BOOK SINCE YESTERDAY, I THANK YOU A LOT, YOU EXPLAIN VERY WELL I EMAIL TO FOLLOW YOU GREETINGS GOOD WEEKEND

[@tsheposepadile]

One of the best tutorials I've ever seen. You made it so easy to follow along. Thank you. 🙏

[@turniponabike]

You did it!!! This is amazing and creative. I'm so glad you made this. I've been wanting to do a book for a long time but I could not come up with everything you did here. Now I am going to do my children's book with this. Thank you Coding Star!

[@codingstar8227]

I really enjoyed creating this project. Thanks Turnip for the awesome idea! Hope this video helps 😃

[@9-volt247]

@@codingstar8227 Why do you rarely comment?

[@jonathanel-aziz7708]

Nice! Tried this for a magazine and so easy, the problem is to make it responsive.

[@MyStudio-io3so]

Turn.js is a better choice. The pages turn like a real magazine. Not stiff and robotic.

[@xxc-j1l]

i very like your lecturing style

[@vladimirtravkin4958]

Many thanks for the detailed lesson. This is one of the best tutorials on this topic. I will be waiting for your new lessons. Thanks again!

[@clarkjeans2221]

(I am not good at English.) - I didn't try your awesome code yet, but it looks like it will work. I wanted good example or code for flip book, but I can't search that well. But your guide is perfect for me!! Thank you so much, I hope your subs get higher. Have a nice nice nice day!

[@nizambao4653]

Thank you so much for this video.

[@kimsy520]

Thank you! I can’t wait to create my writing prompts book with this 😀

[@just_uriht]

Great content!!! Explained very well! As a beginner I find this super super useful!!!

[@BersediaBelajar]

❤Yesss...Great Content... Thank you so much for your tutorial...

[@ckasprojects-fk8hv]

This is Really awesome, thanks for this tutorial, it worked like a sharm 🙂💯

[@soumelee5661]

You explain so well! you are very good teacher.

[@hirokonara_]

I cant flip it :(

[@WizInsight108]

Thank you so much for the tutorial.

[@lightyear3429]

You never asked to like & subscribe, yet I'm sure many would do regardless, including myself. It's very rare to see a tutorial that good. The only thing I didn't understand is what translateX(0%) is doing - I would think it moves along the X axis at 0%, meaning doesn't move the div at all...

[@mvnk001]

thanks ❤❤

[@sagniksaha4179]

you got a new subscriber . Awesome man great work

[@codingstar8227]

Thank you! :)

[@uzma81985]

it seems pretty easy:BTW:where did u make ur code?which platform?

[@CV-ec6mk]

awesome job man thanks for sharing

[@codingstar8227]

Thank you!

[@sally8021]

that's so good, thank you so much, it's really helpful

[@codingstar8227]

Glad it helped :) I'll upload more useful videos in the future!

[@Goldenknowledgeforyou]

Thank You 😃😃😃😃😃

[@deepwebtv]

good looking. keep growing!

[@codingstar8227]

Thank you 😆

[@lucasjustable]

Great video!!!

[@codingstar8227]

Thank Lucas♡

[@nafeysolutions4808]

Love this book. .. you gave something for free .. which is sold for tens of dollars

[@miscetc-tm2yt]

How is your mouse doing that? All operating systems should have that mouse feature by default.

[@elenalouka2801]

Great work! Thanks so much! I coudnt find anything as useful as that!

[@codingstar8227]

Thanks Elena for your kind comment! Hope this helped 😃

[@mr.click_bate9944]

How do I add more pages?

[@l--db8uh]

great, you just gain another follower😁

[@katepopza]

this is very good content, thank you so much

[@katepopza]

so if i have 3 menu flip i tried it and it didn't work

[@tempowong4718]

Any idea to make it to be responsive? I got trouble on the context (T_T)

[@smileilunga2820]

I would really love to do this but I’m worried about responsiveness

[@MicroDobb]

Thank you, Sir! Can you help with a question - how I can do any button for example on page 1 to page 3 or backward. Thank you!

[@sejauhperjalanan7563]

How to flip UP?

[@codingstar8227]

The flip animation is done by using CSS. To flip up and down, you should think about tweaking the "transform" and the "transform-origin" properties of the pages (also the layouts of the button should be adjusted as well). I would start with setting "transform-origin: top;" and "transform: rotateY(some angle)".

[@vedantagarwal5268]

hi when I added more pages, during the transition the next page is appearing before the full transition is over. how can i delay this

[@maxcortezkubelka1744]

Woooow, I have a problem, when I add more pages, when I put the next page, the images stay static for a few seconds and lose all the magic, how can I fix it?

[@codingstar8227]

Hey Max! When you add more page (add another page in the HTML), make sure to modify css and javascript accordingly. I will soon provide you with the source code which has 1 more page added to it.

[@codingstar8227]

I created a new Github Repository for the source code with an extra page added. You can view it here: github.com/codingstar-jason/3D-fip-book-tutorial-extra-page/tree/main

[@maxcortezkubelka1744]

@@codingstar8227 Thank you so much Crack...!!!

[@user-js9hu4og9m]

hi , i was wondering what is your chrome extention, i see that you can create shapes ( squares and rectangles) when "selecting" and it has color !

[@AdewaleLords-Favour]

@coding star Thank you for this tutorial but I need your help, I used the code, but there is an error, the last front page does not respond to hover nor does the cursor change to indicate it is a text unlike the others, and it actually looks like the page os not interactive at all, please how can I fix this?

[@innovaebruno1500]

Brazil loves you

[@SohaibZaman]

I am new to js.. can any one plz tell me why we started cases from 2 instead of 1 in goPrevPage function??

[@yolandaxing9827]

thank you so much for the tutorial! is it possible to make it compatible to a phone size as well?

[@gevorgnersesyan4904]

Hello, thank you for this amazing video. But I couln't make it to work. I think soemthing was changed in commands during these years. Can you help me to figure out the problem? Thanx

[@matt3g863]

Hey would you recommend this method if you are doing a book with more than 20 pages?

[@_tech_js]

Yes, he is right please can you tell

[@lightyear3429]

For a book like that, add a form somewhere at the bottom - to enter the number of current page

[@matt3g863]

@@lightyear3429 okay 👍🏾

[@DiyintheGhetto]

Hello, Is it possible to do the same way but with pages. How you can flip it like a book?

[@_tech_js]

Thank you so much. But I want it for more than 20 pages than how to do that

[@georgeseletski8241]

how to make pages soft as in magazines ?

[@Adnan_19946]

how do i make it responsive so that it turns to a scrolling book at mobile sizes

[@eliranbramli]

I cannot add input to page three. Can you help me?

[@jerrym2mmh]

hey you miss closeBook(false) function in goNextPage in video but it contain source code however thank for this tutorial.

[@deepwebtv]

Hey quick question, I was wondering if there was any tips you could give to make the page fit better on a mobile device. I know that is supposed to do the job, but it doesn't. I'm trying to mess around with the CSS to figure it out. Any tips would really help me. Thank you again for this.

[@codingstar8227]

Good question :). You can add "media queries" in CSS to change css properties depending on the width of the screen. Adding media queries will add responsiveness to your website making the css dimensions change according to the size of the screen. I recommend you to have a look at my another tutorial on "responsive navbar". This is will give you some idea how to apply media query 😁. Link: kzbin.info/www/bejne/Z4TOYmB3bbNlf9k

[@haroonqadir3474]

How do we add images to it

[@alisonmak2147]

It's been awesome following through your video with coding, but just quick question, I'm not sure why I'm receiving a ESLint parsing error: The keyword 'const' is reserved, is there a way to fix this?

[@sneakyosrs]

hello tysm for the tutorial! is this responsive?

[@_nitinjayprakashdlmn3938]

Which screen recorder ?

[@azamikromy2251]

How to add new papers?,im beginers

[@adeleyda]

hello, i was trying to put in images using but it doesnt work, is there any solutions?🙏🏻

[@anime-break]

Yeah I have aslo tried but didn't working,, image are not changing position with the transform

[@11tpsantostimothyphil31]

For me only the first front page can support images. The other pages won't show them no matter what type I use.

[@heidip.h.nikolaisen6249]

really helpful !! is there a way to adjust the orientation of the page to landscape?

[@divijgogia8479]

in body css just do transform: rotateY(90deg);

[@techcodEN]

where to write codes?

[@glockenblumeglockchen7789]

You didn't say or show where you set the value of the parameter isAtBeginning. Firstly I completely missed this piece of information and had to look for the bug ... 😂

[@medprogramming5111]

My isAtBiginning not function 😢

[@arkatanukundu_171]

can you make this same thing as a react project?..facing a lot of difficulties while making it in react js

[@mnuiozasde9569]

@Arkatanu Kundu_1 have you been able to do this in react js?

[@m62149]

how to create view flipbook from pdf file?

[@codingstar8227]

There can be multiple ways of embedding pdf into the flip book. I would recommend converting each page into a JPG image and inserting each image into the flip book using the tag. You can then style the image to fit in the book (or change the dimensions of the flip book). There are lots of online tools you can use to convert them into JPG files. 😃

[@aydesignart]

@@codingstar8227 Please show us how to do this!

[@tarunvakkalagadda1877]

I am a beginner with HTML, CSS and JavaScript. So can someone please explain how to add more pages because I am struggling .

[@jonathanel-aziz7708]

He have a new repository with an extra page in gitub

[@Nicolas_Echavarria]

Ty bro 👍

[@dxt0174]

I tried your code but in my case the animatiom its not working. I dont know why. Help?

[@techcodEN]

where to write codes?

[@sapphire5939]

hi can you please make responsive single full page flip animation with prev and next button

[@codingstar8227]

Hi Sapphire, thanks for the idea :)

[@prachi-mane]

Very nice but Please make it responsive.

[@findingidentity]

can you let me know the application you used to create this

[@divijgogia8479]

Vs code

[@drashtithekdi1031]

Is this mobile responsive??

[@donghyunlee6097]

목소리 asmr 같다 ㅋㅋㅋㅋㅋ

[@codingstar8227]

😊😊😊