"Sign In / Sign Up Slider Form"
Bootstrap 4.1.1 Snippet by koshikojha

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="overlay" id="overlay">
<div class="sign-in" id="sign-in">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="switch-button" id="slide-right-button">Sign In</button>
</div>
<div class="sign-up" id="sign-up">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start a journey with us</p>
<button class="switch-button" id="slide-left-button">Sign Up</button>
</div>
</div>
<div class="form">
<div class="sign-in" id="sign-in-info">
<h1>Sign In</h1>
<div class="social-media-buttons">
<div class="icon">
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z" />
</svg>
</div>
<div class="icon">
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z" />
</svg>
</div>
<div class="icon">
<svg viewBox="0 0 24 24">
<path fill="#000000" d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z" />
</svg>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
:root {
--form-height: 550px;
--form-width: 900px;
/* Sea Green */
--left-color: #9fdeaf;
/* Light Blue */
--right-color: #96dbe2;
}
body,
html {
width: 100%;
height: 100%;
margin: 0;
font-family: "Helvetica Neue", sans-serif;
letter-spacing: 0.5px;
}
.container {
width: var(--form-width);
height: var(--form-height);
position: relative;
margin: auto;
box-shadow: 2px 10px 40px rgba(22, 20, 19, 0.4);
border-radius: 10px;
margin-top: 50px;
padding:0px;
}
/*
----------------------
Overlay
----------------------
*/
.overlay {
width: 100%;
height: 100%;
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var overlay = document.getElementById("overlay");
// Buttons to 'switch' the page
var openSignUpButton = document.getElementById("slide-left-button");
var openSignInButton = document.getElementById("slide-right-button");
// The sidebars
var leftText = document.getElementById("sign-in");
var rightText = document.getElementById("sign-up");
// The forms
var accountForm = document.getElementById("sign-in-info")
var signinForm = document.getElementById("sign-up-info");
// Open the Sign Up page
openSignUp = () =>{
// Remove classes so that animations can restart on the next 'switch'
leftText.classList.remove("overlay-text-left-animation-out");
overlay.classList.remove("open-sign-in");
rightText.classList.remove("overlay-text-right-animation");
// Add classes for animations
accountForm.className += " form-left-slide-out"
rightText.className += " overlay-text-right-animation-out";
overlay.className += " open-sign-up";
leftText.className += " overlay-text-left-animation";
// hide the sign up form once it is out of view
setTimeout(function(){
accountForm.classList.remove("form-left-slide-in");
accountForm.style.display = "none";
accountForm.classList.remove("form-left-slide-out");
}, 700);
// display the sign in form once the overlay begins moving right
setTimeout(function(){
signinForm.style.display = "flex";
signinForm.classList += " form-right-slide-in";
}, 200);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: