How to create a login and login form slider with JQuery

Login form and Sign up is one of the most important parts of a website. With the help of programming languages, we can easily create different types shape interesting and unique. Well this time we’re going to try to make one Login form and Sign up with animation Slider.

How to do … Let’s open your computer and we’ll do it Slider Login form and Sign up with JQuery.

Tutorials

1. Download Plugins

Put the plugin in the same folder as index.html and style.css.

2. Open the XAMPP control panel and activate Apache.

3. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

    		Animasi Sign Up Sign In                                        

LOGIN



SIGN UP




Have an account?
Don't have an account?

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named SliderForm – save the above code with the name index.html.

4. To see the results of the script code above, you can open your browser and type http: // localhost / SliderForm.

5. Enter the following CSS code.

body{    margin: 0px;    padding: 0px;    background-color: #228b22;}#box{    height: 200px;    width: 1000px;    background-color:#2D2D2D;    border-radius: 5px;    position: absolute;    top:50%;    left: 50%;    transform: translate(-50%,-50%);}#main{    height: 400px;    width: 450px;    background-color:white;    border-radius: 5px;    position: absolute;    top:50%;    left: 70%;    transform: translate(-50%,-50%);    z-index: 99;}#loginform,#signupform{    position: absolute;    top:50%;    left: 70%;    transform: translate(-50%,-50%);    z-index: 999;}#signupform{    top:45%;    left: 75%;    visibility: hidden;}#loginform h1,#signupform h1{    font-family: arial;    font-size: 25px;    color:#228b22;}#loginform input,#signupform input{    height: 40px;    width: 300px;    border: 0px;    outline: none;    border-bottom: 1px solid black;    margin: 5px;}#loginform button,#signupform button{    height: 35px;    width: 130px;    background-color:#228b22;    font-family: monospace;    font-size: 16px;    color:white;    border: none;    outline: none;    border-radius: 5px;    margin-top: 30px;    margin-left: 175px;}#login_btn,#signup_btn{    height: 35px;    width: 120px;    background-color:transparent;    color:white;    border:1px solid white;    border-radius: 5px;    outline: none;    position: absolute;    left: 75%;    top:65%;    transform: translate(-50%,-50%);    transition: all .5s;}#signup_btn{    left: 25%;}#login_btn:hover,#signup_btn:hover{    background-color:white;    color:#2d2d2d;    cursor: pointer;}#login_msg,#signup_msg{    font-family: arial;    font-size: 25px;    color:white;    position: absolute;    top:35%;    left: 75%;    transform: translate(-50%,-50%);    z-index: 1;}#signup_msg{    left: 25%;}

Save the CSS code in the xampplite folder – htdocs – create a new folder named SliderForm – save the CSS code with the name style.css.

6. Reload the URL address: http: // localhost / SliderForm. The registration form is ready, but the slider effect has not yet appeared.

7. Enter the following JQuery code to activate the slider.

$(document).ready(function(){    $("#signup_btn").click(function(){        $("#main").animate({left:"22.5%"},400);         $("#main").animate({left:"30%"},500);         $("#loginform").css("visibility","hidden");        $("#loginform").animate({left:"25%"},400);                $("#signupform").animate({left:"17%"},400);        $("#signupform").animate({left:"30%"},500);        $("#signupform").css("visibility","visible");    });         $("#login_btn").click(function(){        $("#main").animate({left:"77.5%"},400);         $("#main").animate({left:"70%"},500);        $("#signupform").css("visibility","hidden");        $("#signupform").animate({left:"75%"},400);                $("#loginform").animate({left:"83.5%"},400);        $("#loginform").animate({left:"70%"},500);        $("#loginform").css("visibility","visible");    });});

Save the CSS code in the xampplite folder – htdocs – create a new folder named SliderForm – save the CSS code with the name JQuery Main.js.

8. Reload the URL address: http: // localhost / SliderForm. Click button Sign up raise Registration form.

Display when registration form filled.

Click button Sign up raise Login form.

Display when Login form filled.

9. Done. Very interesting, isn’t it?

Remarks:

1. Htdocs is one of the standard folders of XAMPP, whose special task is to save files to be executed such as PHP, HTML, CSS and JavaScript files.

2. Then maybe someone asks about the meaning of http: // localhost / SliderForm. Localhost is a local server on the computer. Localhost can be activated by clicking Start Apache in the XAMPP control panel. SliderForm points to my SliderForm folder in xampplite – htdocs. Also, index.html and style.css are the names of the files stored in the script code above.

Hence the explanation of the tutorial ‘How to Make Registration form slider and Sign up with JQuery ‘. Much luck.






Leave a Reply

Your email address will not be published.