How To Make An Interactive Envelope?
Today, I am going to demonstrate how to make the envelope with a contact letter in it as demonstrated.
Prerequisites:-
i. Basic knowledge of general things like paragraphs, background colors, etc.
ii. Basic Knowledge CSS Pseudo Classes
iii. CSS animation using @keyframes
iv. CSS Transforms
v. Know-how of shapes using CSS (I demonstrated this below)
vi. Basic JavaScript which involves Immediately Invoked Functions Expression (IIFE), Event-Handling, and Nested Functions.
CSS Shapes
Now, I will illustrate how to make this envelope. I am using Visual Studio Code to do the coding part and use Mozilla Firefox for debugging as this browser has great tools to debug CSS.
Let’s Make Something Cool
Step 1 — I will create a div with class attribute value “envelope” to group all the components.
HTML:-
Step 2 — Now, I will add 3 div’s as child elements as illustrated below.
Notice how I am giving multiple class names to separate properties specific to a given div element.
The purpose of the class-names are as follows:-
1. “cover” — To specify positioning in CSS and to set the width and height of the box.
2. “top”, “right”, “bottom” and “left” — This specifies a part of the envelope. This will become clear later on.
Step 3 (Optional) — I will set the background color of the body to black color to make the envelope color more prominent and specify margin and padding to 0 value.
CSS:-
Step 4 — Now, I will style the “cover”, “top”, “left” and “bottom right” as follows.
Explanation:-
i. I have set the value of position property of “cover” to absolute so that all the elements stack above each other.
ii. I have set the height and width of the cover to 0 value, so I can turn the div into a triangle (Refer to the top CSS Shapes section to get more clarity).
iii. The rest of the properties make the shape of the div a triangle.
iv. I have set the transform-origin property of the “top” class to make it rotate about the x-axis along the top of that element.
Step 5 — Now, I will style the “envelope” div as follows.
Explanation:-
i. I have set the value of position property to relative so that the “cover” div position themselves according to the “envelope” div.
ii. I have set the height and width of this div such that it matches the envelope “top”, “left” and “bottom right” dimensions.
iii. I have set the background-color as shown to match it to the top part so that when it opens the color matches with the body.
iv. I have set the top, left, margin-left and margin-right arbitrarily so that it appears in the middle of the browser window.
Step 6 — Now, I will insert a “letter” div inside the “envelope” div and style it as shown below.
HTML:-
CSS:-
Explanation:-
i. I have set the background-color as shown to give the feel of a paper.
ii. I have set the value of width to 95% to make it appear as a separate body inside the envelope and it can be as large as possible.
iii. The properties margin-left, margin-right is used to position the paper in the middle of the envelope.
iv. I have set the box-sizing property to border-box and given some padding for later when we will add content inside it.
Note — 1. You can verify “letter” div by setting the visibility of “cover” div to hidden.
2. The used font is a Google Font.
Now, I will add JavaScript Event-Listeners to trigger animations.
Step 7 — I will write all functions and variables inside an Immediately Invoked Function Expression (IIFE) to avoid polluting the global namespace and I will use strict mode.
Step 8 — Now, I will add event-listeners and ids to the required div which is self-explanatory.
JavaScript:-
HTML:-
Step 9 — I will add z-Index to the “top”, “letter” and “bottom right” class so that the letter appears below all the elements. In my case, I have used odd-numbers.
Step 10 — I will add some more classes in CSS which corresponds to the events.
.open Class
This class corresponds to the opening of the envelope. This will be used on .top class.
.close Class
This class corresponds to the closing of the envelope. This will be used on .top class.
.in Class
This class corresponds to the state when the “letter” div is inside the envelope.
.out-partial Class
This class corresponds to the state when the “letter” div is partially outside the envelope.
Step 11 — I will make the default state of envelope “top” div closed.
Now, I will add event-listeners.
I have defined four functions as follows:-
1. openEnvelopeOnHover(): This function will remove the class “close” and add the class “open” and will then call the function pullOutPartial() which will pull the letter out partially.
2. pullOutPartial(): This function will pull out the letter partially by removing the class “in” and adding “out-partial” to the “letter” div.
3. closeEnvelopeOnHover(): This function will first put the letter inside the envelope by calling putIn() and then will remove the class “open” and add the class “close”.
4. putIn(): This function will put the letter inside the envelope by removing the class “out-partial” and adding the class “in”.
Note — The transition property in all classes will make the change of state silky smooth.
Important Note: –
1. I have used transition property on all the classes to make animations smoother and used animation-delay such that the “closing of the envelope” and “letter going inside” animation do not overlap.
2. I have used the variable flag whose purpose will be explained later.
The function body is as follows:-
(Important) Step 12 — I will add perspective: 1000px property and transform-style:preserve-3d so that the “envelope” parent and its child are rendered properly in 3D-space.
Output:-
So, We have made the basic “envelope” and “letter” and will now move to the part where we will add a “click” event listener to pull the letter out completely so that the user can write the message.
Note — I have used a “flag” variable as an indicator that a user has clicked on the envelope and for scalability so I can add more interactions later on. The working is as follow:-
When the “flag” variable is equal to 0
This is used as an indicator to tell the computer that I am going to pull the letter out completely and to remove the “mouseout” event in which it will put the letter inside on hovering out.
When the “flag” variable is equal to 1
This is used as an indicator to tell the computer that the user has not clicked on the letter yet and continue to function as normal with hover-in and hover-out events.
Tip — You should include an extra button that tells the user to click on it to open the letter. You can add this later by yourself after this tutorial so I am leaving that part in this tutorial.
Step 13 — Now, I will add a “click” event listener with an event handler function named “openEnvelope()” and add three CSS classes named “pull”, “put” and “final” and two CSS animations using @keyframes named “pullLetter” and “putLetter”.
JavaScript:-
CSS:-
- @keyframes animation
The “pullLetter” animation will pull the letter out using translateY transform and will then “putLetter” will put the letter in the original position simultaneously increasing the size using the scale transform.
2. CSS classes
The “pull” and “put” classes are used to trigger the animations whereas the “final” class is used to fix the position of the letter at the ending of the animation “put”.
Step 14 — Now I will write the “openEnvelope()” event handler function.
JavaScript:-
Step-by-Step Explanation:-
- The first two lines will set the “flag” variable to value 0 and will then call the function “closeEnvelopeHover()” to remove the “mouseout” event listener to stop the incorrect triggering of hover animations.
- The second line will add the class “pull” dynamically which in turn will trigger the animation of opening the letter and pulling the letter out.
- The third line is an event listener which will trigger the anonymous function written as the second argument when the “pull” animation end using an event named “animationend”.
- The function in the previous step will change the z-index of the “bottom right” and “left” class from 5 to 0 dynamically so that they don’t appear above the letter and set the z-index of the letter to 20(any arbitrary value than the maximum of all envelope elements will do) dynamically.
- The function will then add the class “put” dynamically which will trigger the put the letter at its original position and over the envelope.
- The end of the “put” animation will then trigger another event handler function as written in the above code snippet which will set the transition property to none value so that the final state can be immediately set using “final” class without any animation.
- The function will then remove the class “pull” and “put” as they are no longer useful and will then set the cursor to default to indicate that no interactive events are remaining.
- After the completion of the above steps, the function will remove the “click” event listener to stop the further triggering of the above steps.
Final Output
The “letter” will appear like this in its final state.
Now, I will add the remaining things so that the user can provide inputs and will style them so that it appears like a letter.
Step 15 — Now I will add the form element so that I can input the message from the user.
HTML:-
Specify the above attributes according to your needs.
Step 16 — Now, I will add CSS styling to the form.
CSS:-
The previous two-step purely depends upon you. Customize and share the improved version via CodePen with me and I will be happy to see that people have learned from this article.
Output:-
So, this is how you can create the demonstrated envelope using CSS and JavaScript easily.
Thank You for reading this article.
You can contact me through my E-Mail.
