Make a foldable greeting card
Making a birthday card is pretty much a must these days, but what do you if you are not good at art? Easy, you make use of technology to make a digital one!
Prerequisites : HTML, CSS Transitions, Basic Javascript
Step 1: Add HTML and CSS to make three pages of your card
Note that I have used Bootstrap classes, as they automatically make the page responsive and I don’t need to spend time on sizing and placing the cards (right now).
Step 2: Positioning the elements correctly on top of each other and making a button to click on.
Note how I have used relative and absolute positioning to position the pages and button. I have given z-index =1 to the cover so that it is visible over the pink page which is below it. By default, z-index of an element is 0 and the element with higher z-index is visible. So, “cover” will cover the “right” page. You will see why I have positioned the “left” page on the left shortly.
Step 3: Adding the transition effects to pages and making button clickable through Javascript
The transitions have been explained in the image in comments, so you will find easier to see what part of code does what.
I have added the classes is-flipped-cover and is-flipped-left. When the element has these classes they will rotate according to the transition specified. We are going to toggle the class with the click of the button using Javascript.
Also, I am going to add the class is-flipped-left initially to the left page, so that it is flipped initially, and gets below the cover(now you see why I had placed it to the left).
Let me explain how the Javascript code works. First, a variable is assigned to each of button, left and cover. As is evident from the name of the method .toggle, on button click, it first checks if the class is-flipped-left is present. If it is present, it is removed. Otherwise, it is added to the element. This way, either cover or the left page is flipped.
Congratulations, you have made your digital greeting card! Go ahead and design it now!
