Learn how to captivate users with a shake input effect! Follow our tutorial on HTML, CSS, and JS to create an engaging web form experience.
Table of Contents
In the dynamic landscape of web development, user engagement is paramount. One effective way to enhance the user experience is by incorporating interactive elements into web forms. One such captivating feature is the shake input effect, which adds a touch of vibrancy to the user interface.
This tutorial will guide you through the process of creating a shake effect for input elements using the trifecta of web development technologies: HTML, CSS, and JavaScript. Whether you're a novice eager to delve into the world of web animation or an experienced developer looking to add flair to your projects, this step-by-step guide is tailored for you.
As we embark on this journey, we'll explore the significance of the shake input effect, set up the HTML structure, style it with CSS to make it visually appealing, and add the magic touch with JavaScript to bring the animation to life.
Get ready to elevate your web development skills and captivate your audience with an engaging shake input effect. Let's dive in!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our input field.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code:
1. <!DOCTYPE html>: This is a declaration specifying the document type and version of HTML being used (HTML5 in this case).
2. <html lang="en">: This is the opening tag for the HTML document, and it includes the language attribute set to "en" for English.
3. <head>: This section contains meta-information about the HTML document, such as the character set, viewport settings, the title of the page, and links to external stylesheets.
- <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Sets the viewport to the width of the device and initial zoom level.
- <title>Shake Input</title>: Sets the title of the webpage to "Shake Input".
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">: Links to the Bootstrap CSS framework hosted on a Content Delivery Network (CDN).
- <link rel="stylesheet" href="styles.css">: Links to a local stylesheet named "styles.css."
4. <body>: This is the main content of the HTML document, including the webpage structure and visible content.
5. <div class="container">: Creates a container element with the "container" class, which is a Bootstrap class for creating a responsive container.
6. <h2>Login Form</h2>: Adds a heading "Login Form" to the page.
7. <div class="row container">: Creates a row within the container. The "row" class is also from Bootstrap.
8. <form>: Starts a form element that will contain input fields for user login.
9. Inside the form, there are two form groups:
- <div class="form-group">: Bootstrap class for styling form elements.
- <label for="exampleInputEmail1">: Label for the email input field.
- <input type="email" name="email" class="form-control" autocomplete="off" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">: Email input field with various attributes for styling and functionality.
- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>: A small piece of text below the email input field providing additional information.
- Similar structure for the password input field.
10. <button type="submit" class="btn btn-primary">Submit</button>: Submit button for the form.
11. <script>: Includes JavaScript files needed for the webpage.
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>: Links to the jQuery library hosted on a CDN.
- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>: Links to the Bootstrap JavaScript library hosted on a CDN.
- <script src="script.js"></script>: Links to a local JavaScript file named "script.js."
This is the basic structure of our shake input field using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the input field is in place, the next step is to add styling to the input field using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our shake effect. Let's break down the code:
.my-shake {
animation-name: shake;
animation-duration: 0.5s;
animation-timing-function: ease-in;
animation-iteration-count: infinite;
border: 1px solid red;
}
- .my-shake: This is a selector for elements with the class "my-shake."
- animation-name: shake;: Specifies the name of the animation, which is defined later as "@keyframes shake."
- animation-duration: 0.5s;: Sets the duration of the animation to 0.5 seconds.
- animation-timing-function: ease-in;: Specifies the timing function for the animation. In this case, it's easing in at the beginning of each iteration.
- animation-iteration-count: infinite;: Sets the number of times the animation should repeat. In this case, it's set to "infinite," meaning the animation will continue indefinitely.
- border: 1px solid red;: Adds a 1-pixel solid red border to the element.
@keyframes shake {
0% {
transform: rotate(0deg);
}
12% {
transform: rotate(-2deg);
}
25% {
transform: rotate(0deg);
}
37% {
transform: rotate(2deg);
}
50% {
transform: rotate(0deg);
}
62% {
transform: rotate(-2deg);
}
75% {
transform: rotate(0deg);
}
87% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
}
This part defines the keyframes for the "shake" animation:
- @keyframes shake { ... }: Indicates the beginning of the keyframes rule named "shake."
- The percentages represent the progression of the animation.
- transform: rotate(deg);: Specifies the rotation at each keyframe.
This will give our input field an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
.my-shake {
animation-name: shake;
animation-duration: 0.5s;
animation-timing-function: easy-in;
animation-iteration-count: infinite;
border: 1px solid red;
}
@keyframes shake {
0% {
transform: rotate(0deg);
}
12% {
transform: rotate(-2deg);
}
25% {
transform: rotate(0deg);
}
37% {
transform: rotate(2deg);
}
50% {
transform: rotate(0deg);
}
62% {
transform: rotate(-2deg);
}
75% {
transform: rotate(0deg);
}
87% {
transform: rotate(2deg);
}
100% {
transform: rotate(0deg);
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Let's break down the code step by step:
1. $('form').on('submit', function(e) { ... });: This code attaches an event handler to the submit event of a form using jQuery. When the form is submitted, the function inside the on method will be executed.
2. let allFilled = true;: This variable is initialized as true and will be used to track whether all the required fields are filled or not.
3. $(this).find('input[type="email"],input[type="password"]').each(function(indx, item) { ... });: This line finds all input fields of type email or password within the form and iterates over them using the each method.
4. let filled = item.value.length;: This line calculates the length of the value in the current input field.
5. The code inside the if (!filled) { ... } block is executed when a field is not filled:
- $(item).addClass('my-shake');: It adds a CSS class called 'my-shake' to the input field, creating a shaking effect.
- setTimeout(function() { $(item).removeClass('my-shake'); }, 500);: After 500 milliseconds, the 'my-shake' class is removed, stopping the shaking effect.
- allFilled = !!filled;: Sets allFilled to false.
6. Finally, return allFilled; determines whether the form should be submitted (true if all fields are filled) or not (false if any field is empty).
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$('form').on('submit', function(e) {
let allFilled = true;
$(this).find('input[type="email"],input[type="password"]').each(function(indx, item) {
let filled = item.value.length;
if (!filled) {
$(item).addClass('my-shake');
setTimeout(function() {
$(item).removeClass('my-shake');
}, 500);
allFilled = !!filled;
}
});
return allFilled;
});Final Output:
Conclusion:
In conclusion, we've embarked on a journey through the realms of web development, exploring how a simple yet effective shake input effect can significantly enhance user engagement. By combining the power of HTML, CSS, and JavaScript, you now have the tools to breathe life into your web forms and captivate your audience.
As you implement the shake effect, remember to test its performance across different browsers and optimize it for a seamless user experience. The interactive nature of web design not only adds aesthetic appeal but also contributes to the overall usability of your applications.
This tutorial is just the beginning of your exploration into the world of web animations. Continue to experiment, tweak, and apply these principles to your projects. As you refine your skills, you'll discover endless possibilities to create immersive and user-friendly web interfaces.
Thank you for joining us on this tutorial. Now, armed with the knowledge of shake input effects, go ahead and infuse your web projects with a dash of interactivity. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
